カラーコード変換ツール（HEX/RGB/HSL/CMYK対応）
カラーコードをHEX・RGB・HSL・HSV・CMYKの5形式で相互変換。カラーピッカー・補色/類似色生成・コントラスト比（WCAG判定）・色覚異常シミュレーション・パレット保存・CSSコード自動生成対応。ブラウザ完結・無料・登録不要。
最終更新：2026年5月18日
CSS Color Name（140色）・HEX・rgb()・hsl() 形式に対応
Photoshop・Illustratorのカラーモデルと同一形式
正確な印刷色はICC Profileを使用してください。
カラーコード形式の比較・使い分けガイド
5種類のカラーコード形式の特性と使い分けを確認しましょう。
| 形式 | 例 | 用途・特性 |
|---|---|---|
| HEX | #3B7DEF | CSS・HTML・デザインツールで最も一般的。コンパクトで扱いやすい。 |
| RGB | 59, 125, 239 | デジタルディスプレイの基本。rgba()で透明度指定可能。プログラムでの計算に向く。 |
| HSL | 218°, 83%, 58% | 人間の感覚に近い。明度・彩度の微調整が直感的。テーマカラー設計に最適。 |
| HSV | 218°, 75%, 94% | デザインソフトのカラーホイールに使われる。Photoshop/Illustratorとの連携に。 |
| CMYK | 75%, 48%, 0%, 6% | 印刷用の色表現。名刺・チラシ・パッケージの入稿時に必要。 |
カラーハーモニー理論（補色・類似色・トライアド）
色相環の反対側（180度）の色。コントラストが最も高く、アクセントカラーとして使うと強い印象になります。例：青の補色はオレンジ。
色相環で隣り合う±30度の色。自然で調和のとれた配色になります。穏やかで統一感のあるデザインに適しています。
色相環を3等分した120度ずつの3色。バランスよく鮮やかな配色になります。3色の彩度・明度を調整して使います。
補色の両隣±30度の2色と組み合わせた3色。補色より穏やかなコントラストで使いやすい配色です。
WCAGコントラスト比とアクセシビリティ
Web Content Accessibility Guidelines（WCAG）ではテキストと背景色のコントラスト比に以下の基準があります。
| 基準 | 通常テキスト | 大きいテキスト（18pt+） | UI部品・グラフィック |
|---|---|---|---|
| WCAG AA | 4.5:1 以上 | 3:1 以上 | 3:1 以上 |
| WCAG AAA | 7:1 以上 | 4.5:1 以上 | — |
コントラスト比が低い配色は、弱視のユーザーや強い光の下でのスマートフォン閲覧で読みにくくなります。当ツールのコントラスト比チェッカーで確認できます。
変換式の仕組みと丸め誤差／プラットフォーム別コード書式
RGB → CMYK の変換式（デジタル近似）
ブラウザのRGBは印刷インクの混合量ではないため、CMYKへの変換は簡易近似式で行われます（R・G・Bは0〜1に正規化した値）。
K = 1 - max(R, G, B)
C = (1 - R - K) / (1 - K) // K = 1 のときは C = M = Y = 0
M = (1 - G - K) / (1 - K)
Y = (1 - B - K) / (1 - K)この式はデバイスに依存しない単純換算であり、実際の印刷機・用紙・インクの特性（ICCプロファイル）は反映していません。入稿用の正確なCMYK値にはAdobe IllustratorなどのICCプロファイル変換を使う必要があります（このツールのCMYK値はあくまで目安です）。
丸め誤差が起きる理由
HEXやRGBは0〜255の整数ですが、HSL・HSVの彩度/明度やCMYKは0〜100%の小数を経由して計算します。そのため「RGB→HSL→RGB」のように往復変換すると、四捨五入の影響でR・G・Bの値が±1ずれることがあります。例えば元がrgb(59, 125, 239)でも、HSL経由で戻すとrgb(59, 124, 239)になるケースがあります。デザインカンプとコードの色が「ほぼ同じだが1違う」場合は、この丸め誤差が原因であることが多いです。
プラットフォーム別の色指定書式
| プラットフォーム | 書式 | 値の範囲 |
|---|---|---|
| CSS | #3B7DEF / rgb(59 125 239) / hsl(218 83% 58%) | RGBは0〜255の整数、HSLは角度＋% |
| SwiftUI | Color(red: 0.23, green: 0.49, blue: 0.94) | R/G/Bとも 0.0〜1.0 の浮動小数点（255で除算） |
| Android | Color.parseColor("#FF3B7DEF") | 先頭2桁がアルファ値（AARRGGBB形式） |
// SwiftUI: RGB(59,125,239) を 0-1 範囲に変換して指定
Color(red: 59.0/255, green: 125.0/255, blue: 239.0/255)
// Android(Kotlin): HEXにアルファ(FF=不透明)を先頭付与
val color = Color.parseColor("#FF3B7DEF")出典: Apple Developer Documentation - SwiftUI Color（2026-09-04確認）／ Android Developers - Color（2026-09-04確認）／ MDN - CSS <color>（2026-09-04確認）
よくある質問（FAQ）
- HEXカラーコードとは何ですか？
- HEX（16進数）カラーコードは #RRGGBB の形式で色を表します。RR・GG・BBはそれぞれ赤・緑・青の強度を00〜FFの16進数で表します。例：#FF0000は純粋な赤です。CSS・HTML・デザインツールで最も広く使われる形式です。
- HSLとRGBどちらをCSSで使うべきですか？
- どちらでも機能は同じですが、用途によって使い分けます。HSLはデザインシステムのテーマカラー（ダークモード切替・色の明度調整）に向いており、直感的に調整できます。RGBはJavaScriptでの計算処理やCanvasとの連携に適しています。
- CMYKの変換は完全に正確ですか？
- ブラウザのカラーコード（HEX/RGB）はsRGBで定義されたデジタル表色系で、CMYKは印刷のインク混合量です。このツールの変換はsRGB→CMYKの近似変換であり、実際の印刷色とは異なる場合があります。印刷入稿にはAdobe IllustratorやICC profileを使った正確な変換を推奨します。
- 色覚異常シミュレーションはどう使いますか？
- 「色覚シミュレーション」セクションで色覚特性のタイプを選ぶと、その色覚特性を持つユーザーにはどう見えるかをシミュレートします。Webサイトのボタン・グラフ・アイコンの配色がすべてのユーザーに伝わるか確認するためのアクセシビリティツールです。
- Tailwindのクラス名も確認できますか？
- はい。入力した色に最も近いTailwind CSSのカラークラス名（例：blue-500）を提案します。完全一致する色のみコードを出力します。カスタムカラーの場合は近似値のクラスを表示します。