このカラーコード変換ツールは無料で使えますか？

はい、完全無料です。会員登録・アプリのインストールも不要で、ブラウザを開くだけでご利用いただけます。使用回数の制限もありません。

HEXとRGBとHSLの違いは何ですか？

HEX（例: #FF5733）は16進数表記のRGB値で、CSSで最もよく使われます。RGB（例: rgb(255,87,51)）は赤・緑・青の光の強度を0〜255で表します。HSL（例: hsl(11,100%,60%)）は色相・彩度・明度で表し、人間の色感覚に近く、ダークモード対応などに便利です。

CMYKはWebでも使えますか？

CMYKはWebのCSSでは直接使用できません（印刷用の形式）。WebデザインにはHEX・RGB・HSLを使い、印刷入稿時にCMYKに変換するのが一般的です。本ツールでHEX→CMYKへの変換が可能です。

コントラスト比4.5:1とはどういう意味ですか？

WCAG（ウェブアクセシビリティ国際基準）が定めるテキストと背景の明るさの比率です。4.5:1以上でWCAG AA合格（一般的な法規制の最低基準）、7:1以上でAAA（最高等級）となります。本ツールのコントラストチェッカーで即座に判定できます。

色覚シミュレーターとは何ですか？

色覚多様性（色覚異常とも呼ばれますが、多様性として捉えます）のある方の見え方をシミュレートする機能です。P型（1型）は赤系が見えにくく、D型（2型）は緑系が見えにくく、T型（3型）は青黄が見えにくい特性があります。デザインがすべての人に伝わるか確認できます。

履歴は次回も保存されますか？

はい。カラーパレット履歴はブラウザのLocalStorageに保存されるため、同じブラウザ・デバイスであれば次回アクセス時も表示されます（最大20色）。ブラウザのキャッシュを消去すると削除されます。

スマートフォンでも使えますか？

はい、iPhoneのSafariやAndroidのChromeでそのままご利用いただけます。カラーピッカーやスライダーもタッチ操作に対応しています。

CSS変数コピー機能とは何ですか？

選択した色を「--color-primary: #FF5733;」の形式でコピーする機能です。CSSカスタムプロパティ（CSS変数）として直接コードに貼り付けられるため、デザインシステム構築に便利です。変数名は自分でカスタマイズできます。

デザインツール登録不要無料ブラウザ完結

カラーコード変換（HEX/RGB/HSL/CMYK 無料ツール）

カラーコード変換を無料・登録不要・ブラウザ完結で。HEX・RGB・HSL・CMYKの4形式を相互変換。カラーピッカー・配色提案・コントラスト比チェック・色覚シミュレーターも搭載。Webデザイン・印刷・アクセシビリティ対応に。

最終更新：2026年5月14日

カラーコード変換とは、HEX（#FF5733）・RGB（255,87,51）・HSL（11,100%,60%）・CMYK（0%,66%,80%,0%）などの色表現形式を相互に変換する処理です。Web デザインでは HEX/RGB/HSL を、印刷では CMYK を主に使います。本ツールはいずれかの形式を入力するとリアルタイムで全形式に変換し、カラーピッカー・配色提案・WCAG コントラスト比チェック（AA/AAA）・色覚シミュレーター（P型/D型/T型）まで搭載。ブラウザ完結・登録不要・完全無料です。

カラーピッカー

Indigo

色相 (H): 248°

彩度 (S): 79%

明度 (L): 59%

HEX

RGB

HSL

CMYK

CSS変数

--color-primary: #4F46E5;

カラー履歴（最大20色・LocalStorage保存）

履歴はまだありません。色を選択すると自動保存されます。

使い方ガイド

色を選ぶ/入力する カラーピッカーをクリックして色を選ぶか、HEX（#FF5733）・RGB（255,87,51）・HSL（11,100%,60%）・CMYK（0,66%,80%,0%）のいずれかで入力してください。どの形式から入力しても全形式が即座に更新されます。

スライダーで微調整 色相（Hue）・彩度（Saturation）・明度（Lightness）スライダーで色を細かく調整できます。リアルタイムで全形式の数値が更新されます。

コードをコピー 各形式の横にある「コピー」ボタンで、その形式のカラーコードをクリップボードへコピー。CSS変数形式（--color-name: #FF5733）でのコピーも可能です。

履歴・配色・コントラストを活用 「履歴」タブで過去の色を再利用、「配色」タブで補色・類似色を確認、「コントラスト」タブでWCAG準拠チェックができます。

プライバシー安心: すべての処理はブラウザ内で完結します。入力した色情報が外部サーバーに送信されることは一切ありません。

他ツールとの違い（0to255 / coolors / colorhexa との比較）

主要なカラーコード変換・配色ツールと本ツールの機能比較です。

ツール	全形式変換	配色提案	コントラスト	色覚シミュ	日本語	履歴
本ツール（便利ツール集）	✔ 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・CMYK・HSL の違い）

加法混色

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コントラスト基準とアクセシビリティ対応

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・印刷・ロゴ・アクセシビリティ）

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）をクリアした配色を選ぶ

よくある質問（FAQ）

このカラーコード変換ツールは無料で使えますか？: はい、完全無料です。会員登録・アプリのインストールも不要で、ブラウザを開くだけでご利用いただけます。使用回数の制限もありません。
HEXとRGBとHSLの違いは何ですか？: HEX（例: #FF5733）は16進数表記のRGB値で、CSSで最もよく使われます。RGB（例: rgb(255,87,51)）は赤・緑・青の光の強度を0〜255で表します。HSL（例: hsl(11,100%,60%)）は色相・彩度・明度で表し、人間の色感覚に近く、ダークモード対応などに便利です。
CMYKはWebでも使えますか？: CMYKはWebのCSSでは直接使用できません（印刷用の形式）。WebデザインにはHEX・RGB・HSLを使い、印刷入稿時にCMYKに変換するのが一般的です。本ツールでHEX→CMYKへの変換が可能です。
コントラスト比4.5:1とはどういう意味ですか？: WCAG（ウェブアクセシビリティ国際基準）が定めるテキストと背景の明るさの比率です。4.5:1以上でWCAG AA合格（一般的な法規制の最低基準）、7:1以上でAAA（最高等級）となります。本ツールのコントラストチェッカーで即座に判定できます。
色覚シミュレーターとは何ですか？: 色覚多様性（色覚異常とも呼ばれますが、多様性として捉えます）のある方の見え方をシミュレートする機能です。P型（1型）は赤系が見えにくく、D型（2型）は緑系が見えにくく、T型（3型）は青黄が見えにくい特性があります。デザインがすべての人に伝わるか確認できます。
履歴は次回も保存されますか？: はい。カラーパレット履歴はブラウザのLocalStorageに保存されるため、同じブラウザ・デバイスであれば次回アクセス時も表示されます（最大20色）。ブラウザのキャッシュを消去すると削除されます。
スマートフォンでも使えますか？: はい、iPhoneのSafariやAndroidのChromeでそのままご利用いただけます。カラーピッカーやスライダーもタッチ操作に対応しています。
CSS変数コピー機能とは何ですか？: 選択した色を「--color-primary: #FF5733;」の形式でコピーする機能です。CSSカスタムプロパティ（CSS変数）として直接コードに貼り付けられるため、デザインシステム構築に便利です。変数名は自分でカスタマイズできます。

カラーコード変換（HEX/RGB/HSL/CMYK 無料ツール）

▶ 使い方ガイド

📊 他ツールとの違い（0to255 / coolors / colorhexa との比較）

🎨 カラーモデル解説（RGB・CMYK・HSL の違い）

RGB

CMYK

HSL

♿ WCAGコントラスト基準とアクセシビリティ対応

💡 シーン別活用ガイド（Web・印刷・ロゴ・アクセシビリティ）

Webデザイン・UI

印刷・グラフィック

ロゴ・ブランドカラー

アクセシビリティ対応

❓ よくある質問（FAQ）

関連ツール

使い方ガイド

他ツールとの違い（0to255 / coolors / colorhexa との比較）

カラーモデル解説（RGB・CMYK・HSL の違い）

WCAGコントラスト基準とアクセシビリティ対応

シーン別活用ガイド（Web・印刷・ロゴ・アクセシビリティ）

よくある質問（FAQ）