カラーコード変換ツール

どの値を編集しても色ブロックとすべての形式が同期されます。

#B74F2A
HEXカラー
RGB 値
R
G
B
rgb(183, 79, 43)
HSL 値
H
S
L
hsl(11, 63%, 44%)
HSV 値
H
S
V
hsv(11°, 63%, 72%)
CMYK 値
C
M
Y
K
cmyk(0%, 66%, 80%, 28%)

カラー形式と利用シーン

ワークフローによって使うモデルは異なります。WebではHEXやRGB、デザイン調整ではHSL/HSVが直感的です。

HEXはRGBの16進表現でCSSに適しており、RGBはピクセルや画像処理に向いています。

HSL/HSVは色相・彩度・明度/輝度を分離し、パレットやグラデーション設計に有効です。

CMYKは印刷標準で、画面色と印刷色の差を抑えるために重要です。

形式 用途
HEX #FF5733 Webデザイン、CSS
RGB rgb(255, 87, 51) 画面表示、Photoshop
HSL hsl(11, 100%, 60%) 色相/彩度調整
CMYK cmyk(0%, 66%, 80%, 0%) 印刷、グラフィックデザイン
HSV hsv(11°, 80%, 100%) 画像処理、OpenCV

統一された変換ツールを使うことで、デザイン・開発・印刷間の色差や手戻りを減らせます。

1. 形式によって数値が大きく違うのはなぜ?

HEXとRGBは同一モデルの表現違いで、HSL/HSV/CMYKは視覚や印刷特性に合わせて再構成されています。数値は違っても同じ色を示します。

2. 変換後に誤差が出る理由は?

変換には浮動小数点演算や丸めが入り、CMYKは印刷プロファイルに依存します。軽微な差は一般的です。

3. HSL/HSVはいつ使うべき?

色相・彩度・明度を調整してパレットやテーマ、グラデーションを作る場合に最適です。

4. 印刷でCMYKが重要な理由は?

印刷はRGB光ではなくインク混合で色を再現します。CMYKを把握することで印刷時の色ズレを抑えられます。

5. HEXとRGBはどちらを使うべき?

CSSではHEXが簡潔で扱いやすく、ピクセル処理やチャネル操作ではRGBが直感的です。

6. HSLとHSVの違いは?

HSLは明度、HSVはバリューを用いて明るさを配分します。グラデーションの見え方が変わります。

7. 値の範囲が固定されているのはなぜ?

各モデルには定義された数値範囲があり、範囲外は無効な色になります。

8. 無効な入力で色が変わらない理由は?

入力途中の誤りで色が崩れないよう、形式を検証した上で反映します。

9. 色の値はサーバーに送信されますか?

いいえ、すべてブラウザ内で処理されます。

10. CMYKは印刷色と完全に一致しますか?

一般的な換算値であり、正確な一致はICCプロファイルや用紙、印刷条件に依存します。

カラーコード変換

HEX/RGB/HSL/HSV/CMYKのリアルタイム変換とプレビュー。

モバイルで続行するにはスキャンしてください。