カラー変換
HEX・RGB・CMYK・HSL のカラーコードを相互に変換し、文字色と背景色のコントラスト(WCAG)とパレットの組み合わせも検査します。
CMYK の値はカラープロファイル(ICC)なしの標準式で計算した近似値です。
コピーしやすい形式
-
HEX
-
RGB
-
CMYK
-
HSL
色コントラストチェッカー
文字色と背景色の輝度コントラストを WCAG 2.x の基準で測り、パレットの全組み合わせを一つの表で確認できます。本文は 4.5 : 1 以上が目安です。
大きな文字のサンプル (18pt 以上)
通常サイズの文字のサンプルです。本文サイズで読めるか確認してください。
コントラスト比
半透明の色は背景に重ねて見える色で計算しました。背景が半透明の場合は白の上にあると仮定します。
パレット組み合わせ表
色を改行またはカンマで区切って入力すると(最大 12 色)、文字色と背景色にした全組み合わせのコントラストを表で示します。セルを押すと上のチェッカーに読み込みます。
WCAG 2.x の相対輝度に基づきます。太さ・大きさ・周囲の色による実際の読みやすさまでは保証しません。比は小数第 2 位で切り捨てて表示します(4.499 を 4.50 に切り上げて合格に見せないため)。入力した色はサーバーに送信されません。
配色の調和・色の段階
基準色ひとつから、似合う色の候補と50〜950の段階を作り、CSS・Tailwindのコードとしてコピーします。見本を押すとHEXがコピーされ、文字を載せたときのコントラストも表示します。
似合う色
色相環で角度だけ回し、彩度と明度はそのままです。出発点として使い、目で調整してください。
50〜950の段階
500が基準色で、明るい側は白、暗い側は黒を混ぜます。基準色が中間の明るさのときにいちばん均等になります。Tailwind公式パレットとは値が異なります。
RGB と CMYK の違い
| 区分 | RGB | CMYK |
|---|---|---|
| 方式 | 光を足す加法混色 | インクを重ねる減法混色 |
| 用途 | モニター・スマホ・Web | 印刷物・名刺・ポスター |
| 基本色 | 赤・緑・青 | シアン・マゼンタ・イエロー・黒 |
| 表現範囲 | 広い(明るく鮮やかな色) | 狭い(蛍光色や非常に鮮やかな色は不可) |
変換式
K = 1 − max(R′, G′, B′), C = (1 − R′ − K) ÷ (1 − K), M = (1 − G′ − K) ÷ (1 − K), Y = (1 − B′ − K) ÷ (1 − K) (R′ = R ÷ 255)。逆変換は R = 255 × (1 − C) × (1 − K) です。
印刷すると色が違って見える理由
モニターは自ら発光しますが、印刷物は紙が反射した光を見ます。また CMYK で表せる範囲は RGB より狭く、画面の鮮やかな青や緑は印刷でくすみます。大切な印刷物は印刷所指定のプロファイルに変換し、校正を確認してください。
黒の使い方
本文の文字は C0 M0 Y0 K100 のように K だけを使うのがおすすめです。4色すべてを混ぜた黒は、小さな文字の縁がにじみます。
よくある質問
結果が印刷所の色と違うのはなぜ?
このツールはプロファイルなしの標準式なので近似値です。正確な色は印刷所の ICC プロファイルで確認してください。
入力した色はサーバーに保存されますか?
いいえ。計算はすべてブラウザ内で行われ、どこにも送信されません。
HEX は 3 桁でも入力できますか?
はい。#F00 は #FF0000 として扱われます。