CSS Color Names

使い方

1. ページを開くと 148 個の名前付き色がすべて表示され、それぞれに見本色、HEX、RGB、HSL が付いています。
2. 検索欄に入力すると、名前または HEX で絞り込めます。例: slate、gold、#708090。
3. 色系を選ぶと、赤・オレンジ・黄・緑・シアン・青・紫・ピンク・茶・中立色に絞り込めます。
4. 見本色をクリックすると HEX をコピーできます。数値の下の名前をコピーとHEX をコピーも使えます。
5. ステータス行に、148 色のうち現在表示されている数が出ます。

よくある用途

• HEX から CSS の名前を逆引きする —— #708090 を検索欄に入れれば slategray だと分かります。
• スタイルシートに名前付き色を選ぶ —— 色系で絞って見本色を比較し、名前をそのまま CSS にコピー。
• テーマ用に HSL へ変換する —— 各カードに HSL が出るため、hsl() で再利用して明度を調整できます。
• デザイン受け渡しの確認 —— HEX を直書きする前に、モックアップが指している名前付き色を確認。

よくある質問

Q: CSS の名前付き色はすべて網羅していますか？ A: CSS カラー仕様の 148 個の名前付き色を収録しています。gray と grey、darkslategray のような両方の綴りも含まれます。

Q: 色系はどう判定していますか？ A: 各色の色相から判定します。彩度が 12% 未満の色は中立色、オレンジ系の色相で暗い色は茶に分類されます。

Q: 同じ HEX の名前が 2 つあるのはなぜ？ A: 本来の別名があるためです。aqua と cyan、fuchsia と magenta、gray と grey は同じ値で、表にはそれぞれを掲載しています。