緑が見えにくい
赤が見えにくい
青が見えにくい
148色のCSS名前付きカラー
任意の色をクリックしてピッカーに読み込む。名前またはHex値で検索できます。
| スウォッチ | 名前 | Hex | RGB |
|---|
CSS Color Level 4仕様に準拠した全148色の標準CSS名前付きカラー。
カラーコードの仕組み
Hexコード
#FF5733のようなHexカラーコードは、3つの2桁16進数で色をエンコードします：赤（FF = 255）、緑（57 = 87）、青（33 = 51）。Hexは#000000（黒）から#FFFFFF（白）まで。#F60のような省略形は#FF6600に展開されます。
RGB
RGBは赤・緑・青の光の強度をそれぞれ0〜255で指定します。rgb(255, 0, 0)は純粋な赤、rgb(0, 0, 255)は純粋な青です。アルファ値の指定も可能です：rgba(255, 87, 51, 0.5)は50%の透明度です。
HSL
HSL（色相・彩度・輝度）はより直感的です：色相は色の角度（0°=赤、120°=緑、240°=青）、彩度は色の鮮やかさ（0%=グレー、100%=鮮やか）、輝度は明るさ（0%=黒、50%=標準、100%=白）。プログラムによる色のバリエーション作成に最適です。
CMYK
印刷デザインで使用されます：シアン・マゼンタ・イエロー・キー（ブラック）。RGBからの変換は近似値です — プロの印刷ワークフローでは精度のためにICCプロファイルを使用します。表示される値は参考用です。プリンターで必ず確認してください。
計算例
CSSカラーtomatoは#FF6347です。内訳：R=255（FF）、G=99（63）、B=71（47）。HSLでは：色相≈9°、彩度=100%、輝度=64%。白背景とのWCAGコントラスト：約3.0:1（小テキストはAA不合格）。黒背景では：約7.0:1（AAA合格）。最良の可読性のためにtomatoのテキストは暗い背景で使用してください。
よくある質問
Hexカラーコードとは何ですか？
Hexカラーコードは、赤・緑・青の光を混ぜて色を表す6桁の16進数（#FF5733など）です。最初の2桁が赤、次の2桁が緑、最後の2桁が青 — それぞれ00（なし）からFF（全量）まで。3桁の短縮形（#F60）も有効で、各桁が倍になります。
RGBとHSLの違いは何ですか？
RGBは赤・緑・青の光の値（各0〜255）を混ぜ合わせ、画面の仕組みに対応しています。HSLは色相（色角度0〜360°）・彩度（鮮やかさ0〜100%）・輝度（明るさ0〜100%）で色を表し、人間の色の知覚に対応しています。L値を調整するだけで明るい/暗いバリアントを簡単に作れます。
必要なWCAGコントラスト比はいくつですか？
WCAG 2.1 AAは通常テキストに4.5:1、大きなテキスト（18ptまたは14pt太字）に3:1を要求します。AAAはそれぞれ7:1と4.5:1です。これらの比率はテキストとその背景色に適用されます。装飾的なグラフィックや非アクティブなUIコンポーネントは除外されます。上のコントラストチェッカーで色の組み合わせを確認してください。
補色・類似色・三角形配色とは何ですか？
補色はカラーホイールの反対側（180°離れた位置）にあり、強いコントラストを生み出します。類似色は隣接する色（±30°）で、調和のとれた一体感のあるパレットを作ります。三角形配色は120°間隔で均等に配置され、鮮やかなバランスを提供します。3種類のハーモニーはすべて上の「カラーハーモニー」セクションで確認できます。
スポイトはすべてのブラウザで使えますか？
EyeDropper APIは現在Chrome 95+・Edge 95+・Opera 81+でサポートされています。FirefoxやSafariでは使用できません。サポートされていないブラウザでは自動的に非表示になります — コアのカラーピッカーとすべてのコード形式はすべての最新ブラウザで動作します。
CSS名前付きカラーとは何ですか？
CSSはaliceblueからyellowgreenまで148色の名前付きカラーを定義しており、HexやRGB値なしにCSSで直接使用できます。CSS Color Level 4仕様の一部であり、クラシックなウェブセーフカラー（red・blueなど）や多くの説明的な名前（cornflowerblue・mediumaquamarineなど）が含まれます。全テーブルは上で検索できます。