カラーコード変換
HEX・RGB・HSLのカラーコードを瞬時に相互変換。コントラストチェック・配色パレット生成も。無料・登録不要。
R
G
B
H (0-360)
S (0-100)
L (0-100)
よく使う色
カラーコード変換とは？
カラーコード変換ツールは、Web開発やデザインで使われる色の表記方法（HEX・RGB・HSL）を 相互に変換するツールです。カラーピッカーで直感的に色を選んだり、 WCAGに基づくコントラスト比の確認、配色パレットの自動生成も可能です。
色の表記方法
主な機能
- ✓HEX → RGB → HSL の相互変換
- ✓カラーピッカーで直感的に色を選択
- ✓WCAGコントラスト比チェック
- ✓AA / AAA 基準の合否判定
- ✓配色パレットの自動生成
- ✓補色・類似色・トライアド配色
- ✓明度バリエーションの表示
- ✓カラーコードのワンクリックコピー
よくある使い方
💻 Web開発
CSSで使うカラーコードの形式変換に。デザインカンプのHEXコードを RGB/HSLに変換してCSSに適用する場面で活躍します。
🎨 デザイン
配色パレットの生成で、ベースカラーから調和のとれた色の組み合わせを探索。 補色やトライアドで効果的な配色を見つけられます。
♿ アクセシビリティ
WCAGのコントラスト比チェックで、テキストと背景色の読みやすさを確認。 AA/AAA基準への適合を簡単にチェックできます。
代表的なカラーコード一覧
| 色 | HEX | RGB | HSL |
|---|---|---|---|
Red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
Green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
Blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
Yellow | #FFFF00 | 255, 255, 0 | 60°, 100%, 50% |
Cyan | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
Magenta | #FF00FF | 255, 0, 255 | 300°, 100%, 50% |
Orange | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
White | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
Black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
Gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
関連ツール
よくある質問（FAQ）
HEXカラーコードとは？
HEXカラーコードは、色を16進数で表す方法です。#に続く6桁（例: #FF5733）で表記します。 Web開発やデザインで最もよく使われる色指定方法です。3桁の短縮形（例: #F00 = #FF0000）もあります。
RGBとHSLの違いは？
RGBは赤(R)・緑(G)・青(B)の光の三原色で色を表現します（各値0〜255）。 HSLは色相(H: 0-360°)・彩度(S: 0-100%)・明度(L: 0-100%)で表現し、 直感的に色の調整がしやすいのが特徴です。
WCAGのコントラスト基準とは？
WCAG（Web Content Accessibility Guidelines）では、テキストと背景色のコントラスト比について、 AA基準で通常テキスト4.5:1以上・大テキスト3:1以上、 AAA基準で通常テキスト7:1以上・大テキスト4.5:1以上が推奨されています。
補色・類似色・トライアドとは？
補色は色相環で正反対の色（180°）、類似色は隣接する色（±30°）、 トライアドは120°ずつ離れた3色です。いずれもデザインで調和のとれた配色を作るための基本パターンです。
このカラーコード変換ツールは無料ですか？
はい、完全無料でご利用いただけます。登録やインストールも不要です。 すべての処理はブラウザ内で行われます。
CSSで色を指定する方法は？
CSSでは color: #FF5733;（HEX）、color: rgb(255, 87, 51);（RGB）、 color: hsl(11, 100%, 60%);（HSL）のいずれの形式でも指定できます。 当ツールでコピーした値をそのままCSSに貼り付けて使えます。