~/tools / color-converter
カラーコード変換
HEX・rgb()・hsl() のどれを貼っても自動判別して HEX / RGB / HSL / HWB / OKLCH に相互変換。透明度対応・コピーボタン付き。WCAGコントラスト比チェックと配色パレット生成も。処理はブラウザ内で完結し、色は送信されません。
RGB
HSL
プレビュー
変換結果
※ 変換・判定はすべてブラウザ内で完結します。入力した色が外部に送信されることはありません。
コントラスト比チェック（WCAG）
選択中の色を背景にしたときの白文字・黒文字の読みやすさを判定します。基準は AA: 4.5:1 / AAA: 7:1（大きい文字は 3:1 / 4.5:1）。半透明の場合は不透明にした値で判定します。
任意の2色を比較
派生パレット
選択中の色から明度バリエーションと配色（補色・類似色・トライアド）を生成します。スウォッチをクリックするとHEXをコピーします。
明るく（lighter）
暗く（darker）
配色（補色・類似色・トライアド）
使い方
- 入力欄にカラーコードを貼り付ける — #fff / #8b5cf680 のようなHEX、rgb(139, 92, 246) や rgb(139 92 246 / 50%)、hsl(258 90% 66%) のどれでも自動判別します
- カラーピッカーやRGB/HSLスライダーで微調整する — すべての表示がリアルタイムで連動します
- 変換結果（HEX / RGB / HSL / HWB / OKLCH）を「コピー」ボタンでクリップボードへ
- コントラスト比チェックで文字色として使えるか（AA/AAA）を確認する
- 派生パレットから明度違い・補色・トライアドをクリックしてコピーし、配色に展開する
実務のコツ: 本文テキストの色はコントラスト比4.5:1（AA）以上を確保するのが基本です。明るさのそろったパレットを作りたいときは、HSLのLではなくOKLCHのL値を目安にすると色相をまたいでも見た目の明るさが安定します。
よくある質問
HEXとRGBはどういう関係ですか？
HEX（#8b5cf6 など）は、RGBの赤・緑・青それぞれの値（0〜255）を16進数2桁で並べただけの表記です。たとえば #8b5cf6 は 8b=139、5c=92、f6=246 なので rgb(139, 92, 246) とまったく同じ色を指します。8桁のHEX（#8b5cf680 など）は末尾2桁が透明度（アルファ値）で、80 は 128/255 ≒ 50% に相当します。つまりHEXとRGBは「同じ数値の別表記」であり、変換で色が変わることはありません。
OKLCHとは何ですか？従来のHSLと何が違いますか？
OKLCHはCSS Color Level 4で使えるようになった色空間で、L（明度）・C（彩度）・H（色相）で色を表します。HSLとの最大の違いは「知覚的均等性」です。HSLのL=50%は色相によって実際の見た目の明るさが大きく変わり（黄色のL=50%は青のL=50%よりはるかに明るく見える）、コントラストの予測に使えません。OKLCHのLは人間の見た目の明るさとほぼ一致するため、L値をそろえるだけで明るさの均一なカラーパレットが作れ、色相だけ変えても明るさが保たれます。ディスプレイの広色域（P3など）の色も表現できるため、新規のCSS設計ではOKLCHが推奨されつつあります。
コントラスト比の基準（WCAG）を教えてください
WCAG 2.x では、文字色と背景色のコントラスト比について「通常サイズの文字は4.5:1以上（レベルAA）、7:1以上（レベルAAA）」「大きい文字（18pt以上、または14pt以上の太字。日本語ではおおむね22px以上/18px太字以上が目安）は3:1以上（AA）、4.5:1以上（AAA）」を求めています。比率は両色の相対輝度から計算され、最大は白と黒の21:1です。本文テキストはAA（4.5:1）を最低ラインにするのが実務での標準です。
透明度（アルファ値）付きの色はどう書きますか？
主な書き方は4つあります。(1) 8桁HEX: #8b5cf680（末尾2桁がアルファ）、(2) rgba(139, 92, 246, 0.5)、(3) モダンな空白区切り構文: rgb(139 92 246 / 50%)、(4) hsl(258 90% 66% / 50%) や oklch(60.6% 0.219 292.7 / 50%)。CSS Color 4以降はすべての色関数でスラッシュ区切りのアルファが使えます。このツールは透明度を入力するとすべての形式にアルファ付きで出力します。なお半透明の色のコントラスト比は背後の色との合成結果に依存するため、判定は不透明にした値で行っています。
入力した色は送信されますか？
いいえ。変換・コントラスト計算・パレット生成はすべてブラウザ内のJavaScriptで実行され、入力内容が外部サーバーに送信されることは一切ありません。オフラインでも動作します。