ツールを実行
CSSカラーネームリファレンスは、定義済みの名前付きカラー一覧を検索・確認できるツールです。検索ボックスに色名の一部を入力すると、名称に該当する文字列を含む色や、16進数表記（HEX）が一致する色を絞り込んで表示します。未入力のまま実行すると、全カラーがアルファベット順に一覧表示されます。また、6桁のカラーコード（例: #3a86ff や ff007f）を入力して完全一致する名前が見つからない場合は、RGB各チャンネルの距離に基づいて最も近似する名前付きカラーを自動的に算出します。各色は色名、#付きの小文字6桁HEX値、およびRGB各整数値（0〜255）で確認できるため、Web制作やデザインでの色指定に活用できます。
使い方
- 検索欄に調べたい色名（例: blue, coral）または16進数カラーコード（例: #ff6347）を入力します（未入力の場合は全一覧が表示されます）。
- 入力値の前後の余白は自動で調整され、大文字・小文字を問わず検索されます。
- 検索ボタンをクリックすると、条件に合致する名前付きカラーの一覧が表示されます。
- 該当する名称が存在しない6桁の16進数コードを指定した場合は、最も近い近似色が自動的に表示されます。
使用例
- 検索欄に「blue」と入力すると、「blue」「aliceblue」「cadetblue」「royalblue」など、名称に「blue」を含むカラーとそのHEX値・RGB値が一覧表示されます。
- 検索欄に存在しないカラーコード「#123456」を入力すると、RGB値の距離に基づいて計算された最も近似する名前付きカラーが表示されます。
よくある質問
検索欄を空のまま実行するとどうなりますか？
検索ボックスが空の場合はフィルターが適用されず、収録されているすべての名前付きカラーがアルファベット順に一覧表示されます。
大文字と小文字は区別されますか？
区別されません。入力された文字列は小文字に正規化されてから照合されるため、「RED」でも「red」でも同じ結果が得られます。
16進数コードの先頭に「#」を付ける必要はありますか？
「#」の有無に関わらず検索可能です。「#ff5733」でも「ff5733」でも同様に処理されます。
3桁の短縮HEXコード（例: #f00）で近似色を検索できますか？
近似色の算出は6桁の16進数コードのみに対応しています。3桁コードの場合は完全一致または部分一致のテキスト検索として処理されます。