カラーコンバーター

5 種の色空間比較

• HEX — CSS 標準。#RRGGBB で 24bit カラー。
• RGB — 加法混色。画面表示の基本モデル。
• HSL — 色相・彩度・明度。明るさの調整に便利。
• HSV — 色相・彩度・明度(Value)。Photoshop 標準。
• CMYK — シアン・マゼンタ・イエロー・キー(黒)。印刷参考。

典型的な用途

1. デザイン→フロント:HEX → RGB / HSL、Tailwind や CSS 変数へ。
2. ブランドパレット:HSL で単一色相の明度階段を生成。
3. 印刷入稿:画面 RGB を CMYK 変換して校正と突き合わせ。
4. カラー配色:HSL の色相を ±30° / ±120° / ±180° 変更で類似・三色・補色。

Tips

• ブランド主色は明度 45〜55% にすると 100〜900 の階段が作りやすい。
• 本文は WCAG 4.5:1 のコントラストを担保、明度スケールで調整。
• 6 桁 HEX では広色域を表現できない。P3 なら CSS Color 4 の color(display-p3 ...) を推奨。
• 印刷前は必ず専門ソフトの CMYK 色版で再確認、本ツールは sRGB 数学モデルです。

このツールについて

完全ブラウザ内動作。ピッカー・HEX・RGB・HSL・HSV から入力、10 段階スケール & 4 種パレットを同期出力。データは送信せず、オフラインでも動きます。