カラーコード変換（HEX/RGB/HSL/CMYK 無料ツール）
登録不要 無料 ブラウザ完結
このツールの特徴: HEX・RGB・HSL・CMYKの4形式を同時リアルタイム変換。カラーピッカー・履歴・配色提案・WCAGコントラストチェック・色覚シミュレーターまで全部入り。日本語対応・登録不要・ブラウザ完結。Webデザイン・印刷・アクセシビリティ対応に。
Indigo
HEX
RGB
HSL
CMYK
CSS変数
--color-primary: #4F46E5; カラー履歴（最大20色・LocalStorage保存）
履歴はまだありません。色を選択すると自動保存されます。
選択中の色をベースにした配色提案
補色（Complementary）
類似色（Analogous）
トライアド（Triadic）
スプリット補色（Split-Complementary）
WCAGコントラスト比チェッカー
Aa サンプルテキスト / Sample Text
コントラスト比: —
AA（通常） AA（大文字） AAA
色覚多様性シミュレーター
通常（C型）
#4F46E5
P型（1型）赤系
#4F46E5
D型（2型）緑系
#4F46E5
T型（3型）青黄
#4F46E5
色覚多様性のある方が実際にどう見えるかをシミュレートします。選択した色をすべての方に伝わるデザインに役立ててください。
コピーしました
1
色を選ぶ/入力する
カラーピッカーをクリックして色を選ぶか、HEX（#FF5733）・RGB（255,87,51）・HSL（11,100%,60%）・CMYK（0,66%,80%,0%）のいずれかで入力してください。どの形式から入力しても全形式が即座に更新されます。
2
スライダーで微調整
色相（Hue）・彩度（Saturation）・明度（Lightness）スライダーで色を細かく調整できます。リアルタイムで全形式の数値が更新されます。
3
コードをコピー
各形式の横にある「コピー」ボタンで、その形式のカラーコードをクリップボードへコピー。CSS変数形式（
--color-name: #FF5733）でのコピーも可能です。
4
履歴・配色・コントラストを活用
「履歴」タブで過去の色を再利用、「配色」タブで補色・類似色を確認、「コントラスト」タブでWCAG準拠チェックができます。
プライバシー安心: すべての処理はブラウザ内で完結します。入力した色情報が外部サーバーに送信されることは一切ありません。
主要なカラーコード変換・配色ツールと本ツールの機能比較です。
| ツール | 全形式変換 | 配色提案 | コントラスト | 色覚シミュ | 日本語 | 履歴 |
|---|---|---|---|---|---|---|
| 本ツール（便利ツール集） | ✔ HEX/RGB/HSL/CMYK | ✔ 4種 | ✔ WCAG AA/AAA | ✔ 3型 | ✔ 完全日本語 | ✔ 20色 |
| 0to255.com | △ HEXのみ | ✗ | ✗ | ✗ | ✗ 英語のみ | ✗ |
| coolors.co | △ 基本のみ | ✔ パレット特化 | ✔ | ✔ | ✗ 英語のみ | △ 要登録 |
| colorhexa.com | ✔ 多形式 | ✔ | △ | ✗ | ✗ 英語のみ | ✗ |
| saruwakakun.com | △ HEX/RGB/HSLのみ | ✗ | ✗ | ✗ | ✔ | ✗ |
| benricho.org | △ テーブル参照のみ | ✗ | ✗ | ✗ | ✔ | ✗ |
※ 2026年5月現在の調査。各サービスの仕様は変更される場合があります。
加法混色
RGB
光の三原色（赤・緑・青）を組み合わせる加法混色。モニター・スマートフォン・テレビなどの発光デバイス向け。全色を混ぜると白（#FFFFFF）になります。Webデザイン・UI設計の基本形式。
rgb(255, 87, 51)
#FF5733
減法混色
CMYK
シアン・マゼンタ・イエロー・ブラックの減法混色。プリンターで使われる印刷向けカラーモデル。全色を混ぜると黒に近くなります。グラフィックデザイン・名刺・パンフレットに必須。
cmyk(0%, 66%, 80%, 0%)
人間の感覚に近い
HSL
色相（Hue）・彩度（Saturation）・明度（Lightness）の3要素。人間の色認識に近い直感的なモデル。CSSで広くサポートされ、ダークモード・アクセシビリティ対応のカラートークン設計に特に有効。
hsl(11, 100%, 60%)
使い分けの基本: Web・アプリは HEX/RGB/HSL、印刷・グラフィックは CMYK で入稿するのが一般的です。本ツールでワンクリックで相互変換できます。
WCAG（Web Content Accessibility Guidelines）2.1 では、テキストと背景色のコントラスト比に以下の基準を定めています。
| 等級 | コントラスト比 | 対象テキスト | 説明 |
|---|---|---|---|
| AA（合格） | 4.5:1 以上 | 通常テキスト（18pt未満） | 一般的な法規制・ガイドラインの最低基準 |
| AA Large | 3:1 以上 | 大きいテキスト（18pt以上・太字14pt以上） | 大見出し等は緩和基準が適用される |
| AAA（最高） | 7:1 以上 | 通常テキスト | 最高の視認性。政府・医療・金融サイト向け |
| NG（不合格） | 3:1 未満 | すべてのテキスト | 視覚障害者・高齢者にとって読みにくい |
実用的なヒント
白背景（#FFFFFF）に対して黒（#000000）は 21:1（AAA超）。グレー（#767676）は 4.5:1 でちょうど AA ライン。本ツールのコントラストチェッカーでリアルタイム確認できます。
日本の状況
JIS X 8341-3（情報通信アクセシビリティ）でも WCAG 2.0 AA 準拠が要求されています。公共機関・ECサイト・金融系では特に重要です。
🌐
Webデザイン・UI
- CSSはHEX または HSLを使う。HSLはカラートークン設計に最適
- ダークモード対応はHSLの明度（L値）を調整するだけで統一感が出る
- Tailwind CSS は HEX を自動で RGB/HSL に変換して出力する
- 本ツールのCSS変数コピー機能（
--color-primary: #4f46e5）でそのままコードに貼り付け可能
🖨
印刷・グラフィック
- 印刷物は必ずCMYKで入稿する（RGB のまま入稿すると色が変わる）
- 本ツールで HEX → CMYK 変換後、Illustrator / InDesign に入力
- 印刷では RGB より彩度・輝度が落ちるため、鮮やかな色は確認が必要
- 名刺・チラシ・ポスターの色校正に活用
✏️
ロゴ・ブランドカラー
- ブランドカラーは HEX で確定し、CMYK 値も記録する（ブランドガイドラインに両方記載）
- 配色提案機能でブランドカラーとの補色・類似色パレットを作成
- ロゴ使用時のコントラスト比をチェックして視認性を担保する
♿
アクセシビリティ対応
- テキストと背景のコントラスト比を本ツールのコントラストチェッカーで確認
- 色覚多様性シミュレーターで P型（赤緑色覚）・D型（赤緑色覚）・T型（青黄色覚）の見え方を確認
- 色だけで情報を伝えないようにアイコン・テキストを併用する
- WCAG 2.1 AA 基準（4.5:1）をクリアした配色を選ぶ
- Q このカラーコード変換ツールは無料で使えますか？
- A はい、完全無料です。会員登録・アプリのインストールも不要で、ブラウザを開くだけでご利用いただけます。使用回数の制限もありません。
- Q HEXとRGBとHSLの違いは何ですか？
- A HEX（例: #FF5733）は16進数表記のRGB値で、CSSで最もよく使われます。RGB（例: rgb(255,87,51)）は赤・緑・青の光の強度を0〜255で表します。HSL（例: hsl(11,100%,60%)）は色相・彩度・明度で表し、人間の色感覚に近く、ダークモード対応などに便利です。
- Q CMYKはWebでも使えますか？
- A CMYKはWebのCSSでは直接使用できません（印刷用の形式）。WebデザインにはHEX・RGB・HSLを使い、印刷入稿時にCMYKに変換するのが一般的です。本ツールでHEX→CMYKへの変換が可能です。
- Q コントラスト比4.5:1とはどういう意味ですか？
- A WCAG（ウェブアクセシビリティ国際基準）が定めるテキストと背景の明るさの比率です。4.5:1以上でWCAG AA合格（一般的な法規制の最低基準）、7:1以上でAAA（最高等級）となります。本ツールのコントラストチェッカーで即座に判定できます。
- Q 色覚シミュレーターとは何ですか？
- A 色覚多様性（色覚異常とも呼ばれますが、多様性として捉えます）のある方の見え方をシミュレートする機能です。P型（1型）は赤系が見えにくく、D型（2型）は緑系が見えにくく、T型（3型）は青黄が見えにくい特性があります。デザインがすべての人に伝わるか確認できます。
- Q 履歴は次回も保存されますか？
- A はい。カラーパレット履歴はブラウザのLocalStorageに保存されるため、同じブラウザ・デバイスであれば次回アクセス時も表示されます（最大20色）。ブラウザのキャッシュを消去すると削除されます。
- Q スマートフォンでも使えますか？
- A はい、iPhoneのSafariやAndroidのChromeでそのままご利用いただけます。カラーピッカーやスライダーもタッチ操作に対応しています。
- Q CSS変数コピー機能とは何ですか？
- A 選択した色を「--color-primary: #FF5733;」の形式でコピーする機能です。CSSカスタムプロパティ（CSS変数）として直接コードに貼り付けられるため、デザインシステム構築に便利です。変数名は自分でカスタマイズできます。