オタク道場 ツール
日本語

カラーコード変換

カラーコード変換ツールは、#3a4fd8、rgb(58 79 216)、hsl(233 67% 54%)、tomato などの色名といった CSS のあらゆる色の書き方を受け付け、HEX・RGB・HSL・HSV・CMYK にすぐ変換します。さらに白・黒との WCAG 2.1 コントラスト比を計算し、文字色や背景色として AA / AAA 基準を満たすかを表示します。

  • 無料
  • 登録不要
  • データはブラウザ内で処理
オプション
カラーコード
ここに結果が表示されます
入力すると自動で処理されます

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

  1. 「色」欄に任意の形式でカラーコードを入力するか、カラーピッカーで選びます。
  2. 右側に色見本と各形式のカラーコードが表示されます。
  3. 「コントラスト比」で白文字・黒文字が読みやすいかを確認します。
  4. 「コピー」ですべての形式をコピーします。

使用例

HEX を RGB・HSL に変換

入力
#e2502c
出力
RGB: rgb(226 80 44)
HSL: hsl(12 76% 53%)
CMYK: 0%, 65%, 81%, 11%

WCAG コントラスト比の見方

WCAG 2.1 では文字の読みやすさをコントラスト比で判定します。通常の文字は 4.5:1 以上（AA）、より厳しい AAA は 7:1 以上、18pt 以上（太字は 14pt 以上）の大きな文字は 3:1 以上が基準です。比率は 1:1（同じ色）から 21:1（白と黒）までです。

仕様とポイント

入力形式HEX（3/4/6/8 桁）、rgb()、hsl()、CSS 色名、その他ブラウザが対応する CSS の色
出力形式HEX、RGB、HSL、HSV / HSB、CMYK
コントラスト比WCAG 2.1 の相対輝度（白・黒に対して）
透明度アルファ値に対応（8 桁 HEX、rgba()）
CMYK について数式による換算で、印刷用のカラープロファイルは考慮していません
処理場所ブラウザ内

よくある質問

HEX と RGB の関係は？

HEX は RGB を 16 進数で書いたものです。#e2502c の e2・50・2c が、それぞれ赤 226・緑 80・青 44 を表します。

変換した CMYK を印刷に使えますか？

目安としてお使いください。実際の印刷色は用紙や印刷会社のカラープロファイル（ICC）によって変わるため、重要な印刷物は印刷会社の色見本で確認してください。

HSL の 3 つの数値の意味は？

H は色相（0〜360 度の色相環）、S は彩度、L は明度です。L を変えると同じ系統の濃淡が作れるため、ホバー色の作成に便利です。