CSSの色を色名(カラーネーム)で指定する

カラーコードやRGBで色指定するのが億劫な時に便利な、カラーネーム(色名/Color name)についてご紹介します。

CSSで色を指定する方法4種

CSSで色を指定する方法には、2021年時点で4種あります。

知識もツールも不要なカラーネームは、「とりあえず」使えます。

カラーネームの使い方

p { font-color: #ffffff; }

p { font-color: white; }

上記ふたつは同じ意味になります。
※色名で指定する場合は、頭の「#」は不要です。

下の、「 色一覧 (※クリックでジャンプします)」にある色名を記述すれば反映されます。
たった140色ですがされど140色、良い色が揃っていますので、お気に入りの色を見つけて覚えれば、簡単便利で効率アップでハッピーになれます。

配色例

背景×文字の、お気に入り配色を置いておきます。ご自由にお使い下さい。
※黒字，白字以外

記述例

/*colors*/
.bg_powderblue { background-color: powderblue; }
.txt_deeppink { color: deeppink; }

かわいい

<div class="wp-block-cocoon-blocks-button-1 button-block"><a class="btn btn-l" style="background-color:aliceblue; color:gray;">背景：aliceblue | 文字：gray</a></div>

色一覧 ( Color list )

テイスト別に分けたカラーネームの一覧(全色)です。
実際の彩度明度ではなく、見た感じのトーン(黄色系の明るい色は実際よりも薄くみえがち、緑は彩度高くみえがち、など)を踏まえて分けています。

無彩色 ( Achromatic colors / Black and white )

めちゃくちゃ、めっちゃくちゃ使えます。
WordPressでページを作るなら、ちょっとしたものならデザインとコーディングを同時進行することも多いかと思います。
そんな時、色は後で考えるとして……ととりあえず明暗だけ入れておくのに、グレーの種類を覚えておくと早いです。

くすみカラー ( Dusty colors / Smoky colors )

ちょっと彩度高めのものも入っていますが、使いやすいくすみ系カラーです。

ほぼ白 ( Nearly white )

パステルカラーの上を行く(?)「ほぼ白」たち。
こちらもかなり使えます。色あんま入れたくないけど白背景と差別化は図りたい時など、控えめに上品に可愛らしく色を添えてくれます。
どの色をチョイスしても失敗がほぼないのも魅力的です。

パステル ( Pastel colors )

明るい～濃い

ヴィヴィッド ( Vivid colors )

なんと、名前違いの同じ色が2セットあります。
並べるとちょっと違ってみえるのですが錯視なのでしょうか。

ミディアム〇〇 ( Midium ** )

最後だけ、名前でまとめました。ひとつ例外はありますが、絶妙なニュアンスカラーが揃っています。
この群を眺めていると、ミディアムとはなんぞや……と迷路に入ります。

後書き

「ブラウザによっては表示されないことがある」とされている7色は省いています。
完全に主観ですしもちろん色の感じ方は人それぞれですが、チョイスしやすい分類になったかと思います。
お役にたてれば幸いです。

CSS/Properties/color/keywords - W3C Wiki

www.w3.org