RGB/HSL/CMYK変換ツール

色変換ガイド

カラーコードは、同じ色を複数の表記で読むためのものです

この変換ツールは、ひとつの色をHEX、RGB、HSL、CMYKでそろえて確認するためのページです。HEXはWebコード、RGBは画面の赤・緑・青チャンネル、HSLは色相・彩度・明度の調整、CMYKは印刷向けのインク比率の目安として読むと迷いにくくなります。

HEXやスライダーを動かすと、ほかの値もすぐに追従します

このツールには計算ボタンがありません。HEX入力、カラーピッカー、RGB/HSL/CMYKの数値欄やスライダーを動かすと、プレビューとコピー用の結果が同じ色で更新されます。

まず色を決めます。 HEX欄に#3498DBのように入れるか、カラーピッカーで選びます。3桁HEXも結果では6桁に展開されます。
必要なモデルを調整します。 RGBは0〜255、HSLはHue 0〜360°と彩度・明度0〜100%、CMYKは各インク比率0〜100%で動かします。
プレビューとコントラストを一緒に見ます。 現在の色を背景にしたとき、白文字と黒文字のどちらが読みやすいかをカードで確認します。
作業に合う表記だけコピーします。 WebやCSSにはHEX・RGB・HSLを、印刷向けのメモにはCMYKの近似値を分けて使うと安全です。

RGB、HSL、CMYKは同じ色を別の目的で読む表記です

同じ青でも、画面で扱うとき、CSSに貼るとき、印刷側へ説明するときで欲しい表記が変わります。画面上の入力は、色そのものを変える値と、その色を読む形式に分けて考えると整理しやすくなります。

HEXコードとカラーピッカー

HEXは#RRGGBBの形で赤・緑・青を16進数2桁ずつ書くWeb表記です。カラーピッカーは、同じHEX値を目で選びたいときに使います。

RGB値

Red、Green、Blueをそれぞれ0〜255で指定します。画面色、Canvas、CSSの確認ではいちばん直接的な値です。

HSL値

Hueは色相の角度、Saturationは鮮やかさ、Lightnessは明るさです。同じ色味を少し明るく、暗く、落ち着かせたいときに使いやすい表記です。

CMYKとコントラスト

CMYKは画面色から計算した印刷向けの目安です。コントラストカードは、現在の背景色に白文字と黒文字のどちらが合うかを見る補助値です。

HEXの2桁は、RGBの1チャンネル0〜255に変換されます

変換の中心はRGBです。HEXの2桁の16進数を10進数の0〜255に変換し、HSLはそのRGBを色相・彩度・明度に読み替えます。CMYKは同じ画面色からインク比率を近似するため、印刷所のICCプロファイルを使った最終値ではありません。

HEX#RRGGBB → R,G,B

RGB0〜255チャンネル

HSLH 0〜360° / S,L %

CMYKC,M,Y,K 近似%

MDN CSS color値HEX、RGB、HSLなどCSS色表記を確認するときに参照できます。WCAGコントラスト基準白文字・黒文字のコントラスト数値を読むときの基準です。

#FF8800を入れると、同じオレンジをRGB、HSL、CMYKで読めます

HEX欄に#FF8800を入れると、RGBは赤255、緑136、青0です。HSLではhsl(32, 100%, 50%)、CMYKの近似値ではマゼンタ46.7%とイエロー100%が中心になります。

入力HEX#FF8800

RGB結果rgb(255, 136, 0)

HSL結果hsl(32, 100%, 50%)

CMYK目安cmyk(0%, 46.7%, 100%, 0%)

このオレンジには黒文字のほうが読みやすくなります

#FF8800の背景では、黒文字のコントラストは約8.77、白文字は約2.39です。色が合っていても、文字色は別に確認する必要があります。

画面の色と印刷の色は、同じ数字に見えても結果が変わります

RGBとHSLは画面のsRGBに近い扱いで、CMYKはインクの比率を説明するための近似値です。紙、インク、プリンター設定、プロファイルで最終的な色は変わるため、大事な印刷物は校正で確認してください。

6桁のHEX結果を基準にコピーします。 3桁HEXを入力しても、結果は6桁の大文字コードに整理されます。
HSLは調整用として読みます。 Hue、Saturation、Lightnessは色の調整には便利ですが、最終的なCSS表記はプロジェクトのルールに合わせます。
CMYKを印刷確定値として扱わないでください。 このCMYKはRGBから計算した近似値です。ブランド印刷物では印刷所のプロファイルと校正を優先します。
コントラストは周辺条件も見ます。 数値は参考になりますが、文字サイズ、太さ、周囲の背景で実際の読みやすさは変わります。

よくある質問

HEXコードの前に#は必要ですか？

いいえ。3498DBと#3498DBのどちらも認識します。3桁の省略形も入力でき、結果は6桁のHEXコードで表示します。

RGBとHSLは同じ色を表していますか？

はい。同じ色を別の方法で書いています。RGBは赤・緑・青のチャンネル値、HSLは色相・彩度・明度として読み替えた値です。

CMYK値は印刷所の結果と変わることがありますか？

あります。このCMYKは画面RGBから計算した近似値です。実際の印刷色は紙、インク、機器、ICCプロファイルで変わります。

コントラストの数字はどう読めばいいですか？

数字が大きいほど、背景色と文字色の差がはっきりします。初期色#3498DBでは黒文字が6.66、白文字が3.15なので、ツールは黒文字を推奨します。