カラー変換ツール - HEX, RGB, HSL, CMYK 相互変換＆パレット
デザインと開発の現場では異なるカラーモデルが日常的に使われます。FigmaでのHEX/HSL、CSSでのRGB、印刷でのCMYKなど多岐にわたります。本ツールは主要な色空間を相互変換し、Webアクセシビリティ（WCAG）基準に合致するコントラスト比の検証も同時に行えます。
このような場面で活用できます
- CSSテーマパレットの構築: デザインツールから抽出したHEXカラーを、CSS変数（HSLやRGB）へ瞬時に変換します。
- WCAGアクセシビリティ検証: 背景色と文字色のコントラスト比がWCAG AA基準（4.5:1以上）をクリアしているか判定します。
- 印刷用CMYKとWeb用RGBの連携: 印刷向けCMYK値とWeb向けデジタルsRGB値を手軽に相互変換します。
- Tailwind CSS用の透過カラー設定: アルファ値（不透明度）を適用しやすいRGB形式のカラー定義を素早く取得します。
使い方と実務ガイド
- 色を選択または入力: カラーピッカーから直感的に選ぶか、HEX（#3B82F6など）を直接入力します。
- 相互変換値の確認: HEX、RGB、HSL、CMYKの各フォーマット値が同時に算出されます。
- WCAGコントラスト判定: 黒文字および白文字を重ねた場合の視認性（AA/AAA適合度）を確認します。
- CSSコードをコピー: 必要なフォーマットをワンクリックでコピーし、スタイルシートへ適用します。
入出力の実務例
Input:
HEX: #3B82F6
Output:
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
CMYK: cmyk(76%, 47%, 0%, 4%)
WCAG Contrast on White: 3.4:1 (Fail)
WCAG Contrast on Black: 6.2:1 (Pass AA)
よくある質問（FAQ）
Q. なぜCSS開発でHSLが注目されているのですか？
A. HSL（色相・彩度・明度）は人間の感覚に合致しており、色相を変えずに明度（L）の数値を微調整するだけでホバー色やアクティブ色を体系的に管理できるためです。
Q. RGBの色はCMYKで完全に再現できますか？
A. 発光色であるRGBの色域はインクのCMYKよりも広いため、画面上の鮮やかな青や緑は印刷時にくすむ傾向があります。本ツールは理論値換算を行います。
Q. 本文テキストの最低限のコントラスト比は？
A. WCAG 2.1 AA規格では、通常の文字サイズにおいて背景色との間で4.5:1以上のコントラスト比が義務付けられています。
技術・セキュリティ上の注意事項
- W3C標準のカラー変換数式に厳密に準拠し、誤差のない色彩値を導出します。
- sRGB相対輝度計算に基づき、客観的なWCAGアクセシビリティ評価指標を提供します。
あわせて使える関連ツール