カラーネーム リファレンス
CSS/HTML、Material Design、Tailwind CSS の名前付きカラーを閲覧できます。任意のカラーをクリックすると16進数値をコピーできます。検索ボックスでカラー名や16進数値でフィルタリングできます。
よくある質問
Q: CSS名前付きカラーとは何ですか？
A: CSS名前付きカラーは、すべてのモダンブラウザで認識される148の定義済みカラーキーワードです。#FF6347のような16進数コードの代わりに、CSSで直接「tomato」という名前を使用できます。これらの名前はCSS Color Level 4仕様で標準化されています。
Q: 16進数、RGB、HSLカラー形式の違いは何ですか？
A: 16進数は6桁の16進表記（#RRGGBB）を使用します。RGBは赤・緑・青のチャンネル値（0-255）を指定します。HSLは色相（0-360）、彩度（0-100%）、明度（0-100%）でカラーを定義します。3つの形式は同じカラーを表現でき、表記法が異なるだけです。
Q: Material Designカラーとは何ですか？
A: Material DesignカラーはGoogleがMaterial Designインターフェース用に作成した厳選パレットです。各カラーファミリーには50（最も明るい）から900（最も暗い）までのシェードがあり、500がプライマリシェードです。アクセシビリティと視覚的調和を考慮して設計されています。
Q: Tailwind CSSカラーとは何ですか？
A: Tailwind CSSは22のカラーファミリーを含む厳選されたデフォルトカラーパレットを提供しています。各ファミリーには50から950までのシェードがあり、500がベースカラーです。ライトとダークの両方のUIテーマで美しく表示されるように設計されています。
Q: プロジェクトに適切なカラーを選ぶには？
A: アクセシビリティのコントラスト比を考慮してください（WCAGは通常テキストに最低4.5:1を推奨）。ブランドアイデンティティにはプライマリカラー、テキストや背景にはニュートラルパレット、インタラクティブ要素にはアクセントカラーを控えめに使用しましょう。カラーコントラストチェッカーが選択の検証に役立ちます。