カラーコード変換：HEX・RGB・HSL・HSV・CMYK

計算方法

カラーコード変換の計算方法

どの形式も、ディスプレイやWebの標準であるsRGB色空間の同じ色を表しています。計算の出発点は、0～255の3つのチャンネルからなるRGB値です。

• HEXは3つのチャンネルを2桁の16進数で書きます。59 → 3B、130 → 82、246 → F6なので#3B82F6です。短縮形の#RGBは各桁を2回繰り返します（#FA0 = #FFAA00）。4桁目・8桁目は不透明度を表します。
• HSL（色相・彩度・輝度）とHWB（色相・白さ・黒さ）は、CSS Color Module Level 4の式で計算します。
• HSV（HSBとも呼ばれます）はHSLと同じ色相を使い、Vは3チャンネルの最大値、S =（最大 − 最小）÷ 最大です。
• CMYKは簡易式で求めます。K = 1 − max(R, G, B)、C =（1 − R − K）÷（1 − K）などです。

例：#3B82F6　R = 59/255 = 0.231、G = 0.510、B = 0.965。最大値は0.965、最小値は0.231です。輝度L =（0.965 + 0.231）÷ 2 = 59.8%、彩度S =（0.965 − 0.231）÷（1 − |2 × 0.598 − 1|）= 91.2%、色相H = 217.2°。結果はhsl(217.2, 91.2%, 59.8%)です。

CMYKが近似値にすぎない理由

印刷インキは光とは異なる振る舞いをします。画面の色にどのCMYK値がいちばん近いかは、用紙・印刷方式・インキ量によって変わり、その特性はICCカラープロファイルにまとめられています。ここで使う式はプロファイルを考慮しないため、たとえば純粋な青は「cmyk(100%, 100%, 0%, 0%)」となり、実際に印刷するとかなり紫がかって見えます。印刷物では印刷会社が指定する値を使うか、デザインソフトで印刷会社のプロファイルを使って変換してください。

丸め方

RGBとHEXは整数なので正確です。HSL・HSV・HWBは小数点以下1桁、CMYKは整数のパーセントで表示します。小数点はピリオドなので、そのままCSSに貼り付けられます。

よくある質問

出典・根拠

• CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
• CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
• CSS Color 4, § 8: W3C – CSS Color Module Level 4: HWB colors

更新日：2026年9月27日