計算・変換ツール入力を送らない・登録不要ツールを探す

色

カラーコード変換

HEX・RGB・HSL のどれかを入力すると、ほかの形式と配色パターンをまとめて表示します。

入力内容は送信しません(ブラウザ内で処理)登録不要・無料更新

色を入れる

HEX(3桁・6桁)、rgb()、hsl()、CSS の色名(red、tomato など)のどれでも入れられます。左の四角を押すと色を選べます。

使いたい形式の値をコピーする

#16325c
HEX#16325c
RGBrgb(22, 50, 92)
HSLhsl(216, 61%, 22%)
CMYK(目安)cmyk(76%, 46%, 0%, 64%)

補色・配色パターン

明るさのバリエーション

文字色との見やすさ(WCAG)

あいう Aa 123

白の文字:コントラスト比 12.77 : 1(AAA)

あいう Aa 123

黒の文字:コントラスト比 1.64 : 1(不合格)

カラーコードの形式

形式例特徴
HEX(16進数)#2456d6Web で最も一般的。赤・緑・青を 00〜ff の 2 桁ずつで表す
RGBrgb(36, 86, 214)HEX と同じ内容を 0〜255 の 10 進数で表す
HSLhsl(223, 71%, 49%)色相・彩度・明度で表す。「少し明るく」などの調整がしやすい
CMYKcmyk(83%, 60%, 0%, 16%)印刷用。画面の色とは仕組みが違うため、変換値は目安

CMYK の値が印刷会社の指定と合わない理由

画面の色(RGB)と印刷の色(CMYK)は表現できる範囲が異なり、正確な変換には用紙やインクごとのカラープロファイルが必要です。 ここでの CMYK は単純な計算式による目安なので、入稿データは Illustrator などでプロファイルを指定して変換してください。

CSS で使える名前付きの色は カラーコード一覧 にまとめています。補色の考え方は 補色・反対色 で解説しています。

計算の根拠・出典

よくある質問

Q.3桁のカラーコードは使えますか?

使えます。#f60 は #ff6600 と同じ色として扱います。

Q.コントラスト比の AA・AAA とは何ですか?

Web アクセシビリティの基準(WCAG)による評価です。通常の文字は 4.5:1 以上で AA、7:1 以上で AAA になります。

ほかのツール