HEX、RGB、HSLなどの形式間で色を変換する方法

色を変換するには、カラーコンバーターに貼り付けます。「変換先」で必要な形式を選び、結果をコピーしてください。入力形式は自動で判別されるため、#ff6600、rgb(255, 102, 0)、orangered、さらには255, 102, 0も使えます。入力中に結果が表示されます。結果の下にある色見本を見れば、正しい色が読み取られたか確認できます。

4つの形式で表した同じ色

HEX、RGB、HSL、CMYKは、同じ色を異なる方法で表す形式です。オレンジ色を4つの形式で表すと、次のようになります。

形式	値	数値の意味
HEX	#ff6600	赤、緑、青をそれぞれ2桁の16進数で表す
RGB	rgb(255, 102, 0)	赤、緑、青をそれぞれ0から255で表す
HSL	hsl(24, 100%, 50%)	色相環上の色相、彩度、明度
CMYK	cmyk(0%, 60%, 100%, 0%)	シアン、マゼンタ、イエロー、ブラックのインク

HEXとRGBは、同じ3つの数値を異なる形式で表しています。そのため、相互の変換は正確です。HSLは手動で調整しやすい形式です。明度の値を上げると、色が明るくなります。

CMYKが異なる理由

CMYKは印刷用の形式で、正確な値はプリンター、用紙、インクによって異なります。このコンバーターはプリンタープロファイルを使わずに標準的な計算式を使用するため、同じ色でも印刷会社から提示される値が少し異なる場合があります。モックアップにはCMYKの変換結果を使い、本印刷の前に印刷会社へテスト印刷を依頼してください。

どの形式を使うか

• CSSとHTML：HEXを使います。短く、どのブラウザーでも読み取れます。
• カラーテーマ：HSLを使います。1つの数値を変えるだけで、明るい色や暗い色を作れます。
• コードで透明度を指定する場合：アルファ値付きのRGBか、8桁のHEXを使います。rgba(37, 99, 235, 0.5)は#2563eb80になり、最後の2桁が不透明度を表します。
• 印刷用のモックアップ：CMYKを使い、上記の注意点も覚えておきましょう。

色の名前は正確な値ではない

このコンバーターは、OKLCH、LAB、HSV、CSSの色名、ターミナルのANSIコードなど、17種類の形式に対応しています。色名で表示されるのは最も近いCSSの色名であり、完全に一致する色名ではありません。#ff6600はorangeredになりますが、orangeredの実際の値は#ff4500です。簡単なラベルには色名を使い、ブランドカラーには正確な値を使ってください。

色を貼り付けて、色見本を確認し、結果をコピーする。それだけです。