カラーコード変換
HEX・RGB・HSL をリアルタイム相互変換
コントラスト比チェック・色調バリエーション生成付き
🌈 色調バリエーション（Tint / Shade）
クリックするとその色を変換ツールに読み込めます
🎨 配色パレット
選択した色から自動生成される配色提案。スウォッチをクリックで反映。
🏷️ CSS カラー名一覧
CSS標準の名前付きカラー。クリックで変換ツールに反映されます。
🛒 おすすめグッズ
配色・デザイン・アクセシビリティの学習に役立つ本
使い方・特徴
カラーピッカーボタンをクリックするとカラーホイールが表示されます。色を選ぶとHEX・RGB・HSLが自動的に更新されます。
HEX・RGB・HSLの各入力欄に数値を入力すると、他の形式にリアルタイムで変換されます。HEXは3桁（例: f0a）でも入力できます。
各フォーマット横の📋ボタンで「rgb(59, 130, 246)」「hsl(217, 91%, 60%)」などCSS記述用の文字列をクリップボードにコピーできます。
WCAG 2.1基準でテキストの視認性を確認できます。AA（4.5:1以上）・AAA（7:1以上）の2段階で表示します。
FigmaやAdobe XDでは HEX・RGB・HSL いずれの形式でも色を指定できます。本ツールで変換した値をそのままデザインツールのカラーピッカーに入力してください。CSS変数（カスタムプロパティ）への転用にも活用できます。
ブランドカラーを決めたら、HSLの彩度・明度を変えることで明るいバリアント・暗いバリアントを統一感のある配色で作成できます。HEX値をデザインシステムやスタイルガイドに記録しておくとチーム開発での一貫性が保てます。
📋 カラーコード形式早見表
CSS・デザインツールで使われる主なカラー表現形式の比較
| 形式 | 記述例 | 特徴 | 主な用途 |
|---|---|---|---|
| HEX | #3b82f6 |
16進数6桁。最もコンパクト | CSS・HTML・デザインツール全般 |
| HEX（3桁） | #38f |
各チャンネルが同じ値の場合に省略可 | 簡略表記（#3388ff → #38f） |
| RGB | rgb(59, 130, 246) |
0〜255の整数で指定 | CSS・画像処理・印刷入稿 |
| RGBA | rgba(59,130,246,0.5) |
RGB＋透明度（0〜1） | 半透明のオーバーレイ・影 |
| HSL | hsl(217, 91%, 60%) |
色相・彩度・明度で直感的 | 動的カラー生成・Tint/Shade |
| CSS変数 | var(--color-primary) |
再利用・テーマ切替に最適 | デザインシステム・ダークモード |
※ CSS Color Level 4以降では #RRGGBBAA（8桁HEX）や oklch() など新しい形式も利用できます。
💡 活用シーン
デザインカンプから拾ったカラーをHEX→RGBに変換してCSS記述。コントラスト比でアクセシビリティをその場で確認しながら配色を決定。
Tint/Shadeでプライマリカラーから明暗バリエーションを生成。ボタンの通常・hover・disabled状態を統一感ある配色で作成。
カラーピッカーで選んだ色のHEX・RGB値をデザインツールに貼り付け。配色パレットを参考にコンポーネントカラーを設計。
WCAG基準のコントラスト比をリアルタイム確認。AA/AAAを満たす色の組み合わせを素早く見つけ、誰もが見やすいデザインを実現。
HSLで明度を調整してライト/ダーク両テーマのカラーを設計。CSS変数と組み合わせてテーマ切り替えが容易な設計に。
補色・トライアドなど配色理論を実際の色で確認。CSSカラー名を一覧で見て色と名前を直感的に学べる。
💬 よくある質問
:root { --color-primary: #db2777; } のように色を1か所で管理でき、テーマ切り替えやダークモード対応が容易になります。本ツールで変換した値をCSS変数として定義し、コンポーネント全体で再利用することでデザインの一貫性が保てます。