🎨 カラーコード変換ツール

RGB / HEX / HSL / HSV 変換・カラーピッカー・パレット生成

🎯 カラーピッカー

#000000

🔄 カラーコード変換

🌈 パレット生成

⚖️ コントラスト比計算

🔍 色名検索

カラーコード変換ツールとは

カラーコード変換ツールは、RGB・HEX・HSL・HSVという4つの色の表し方を相互に変換するツールです。カラーピッカーで選んだ色のコードをその場で取得することもできます。

同じ色でも、CSSではHEX（#4FD1C5）、デザインツールではHSL、画像処理ではRGBの数値というように、場面ごとに求められる表記が違います。HSLとHSVは色相・彩度・明度で色を表すため、「同じ色味のまま少し暗くする」といった調整が直感的に行えます。

配色パレットの自動生成と、WCAG（Webアクセシビリティのガイドライン）に基づくコントラスト比の計算も備えています。文字色と背景色の組み合わせが読みやすい水準にあるかを、数値で確認できます。

カラーコード変換ツールの使い方

  1. カラーピッカーで色を選ぶか、いずれかの形式でコードを直接入力します。
  2. RGB・HEX・HSL・HSVの4形式が同時に更新されるので、必要な表記をコピーします。
  3. 「パレット生成」で、選んだ色を基準にした配色候補を確認します。
  4. 「コントラスト比計算」に文字色と背景色を指定して、アクセシビリティ基準を満たしているかを確認します。

よくある質問

HEXの #FFF と #FFFFFF は同じ色ですか？

同じです。3桁表記は各桁を2回繰り返した6桁表記と等価で、#4AE は #44AAEE と同じ色になります。3桁で書けるのは各成分が同じ数字2つで表せる色に限られます。

HSLとHSVの違いは？

どちらも色相（H）と彩度（S）を使いますが、3つ目が異なります。HSLの L は明度で、100%にすると白、0%にすると黒になります。HSVの V は明度の最大値で、100%にしても白にはならず最も鮮やかな色になります。CSSで使えるのはHSLのほうです。

#RRGGBBAA の8桁表記は使えますか？

はい。末尾2桁が不透明度（アルファ値）を表す8桁のHEXは、現在の主要ブラウザで利用できます。#00000080 なら黒の50%不透明という意味になります。

コントラスト比はいくつあればよいですか？

WCAG 2.1のレベルAAでは、通常の文字で4.5:1以上、18ポイント（または14ポイント太字）以上の大きな文字で3:1以上が必要です。より厳しいレベルAAAでは、それぞれ7:1と4.5:1が求められます。

もう少し詳しく

コントラスト比の計算方法

コントラスト比は (L1 + 0.05) ÷ (L2 + 0.05) で求めます。L は相対輝度で、RGB各成分をsRGBのガンマ補正から線形値に戻したうえで、0.2126×R + 0.7152×G + 0.0722×B として計算します。緑の係数が突出して大きいのは、人間の目が緑の明るさに最も敏感だからです。同じ明るさに見える色でも、緑が多い色のほうが輝度が高く計算されます。

関連ツール