カラーコード変換・配色ツール
HEX・RGB・HSL・HSV・CMYKを相互変換。
配色パレットの自動生成やコントラストチェックも。
カラーピッカー
カラーコード
/* CSS変数 */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
配色パレット
コントラスト比
白テキスト Aa
比率: -
黒テキスト Aa
比率: -
保存した色
⭐ボタンで色を保存できます (最大20色)
カラーコード変換ツールの概要
カラーコード変換・配色ジェネレーターは、HEX・RGB・HSL・HSV・CMYKの5つの主要なカラーフォーマットをリアルタイムで相互変換する無料オンラインツールです。視覚的に操作できる直感的なカラーピッカーを備え、選んだ色から補色や類似色などの配色パレットを自動的に生成します。
また、Webアクセシビリティの基準となるWCAGコントラスト比チェック機能も内蔵しており、選んだ背景色に対して白文字・黒文字のどちらが適切かを瞬時に判定します。生成されたコードはワンクリックでコピーでき、CSS変数のフォーマットでも出力可能なため、Webデザイナーやフロントエンドエンジニアの開発効率を大幅に向上させます。
使い方
色を選択・入力する
カラーピッカーのグラデーション領域をクリックして色を選ぶか、色相（Hue）バーと透明度（Alpha）バーを調整します。または、HEXやRGBの入力欄に直接カラーコードを入力することもできます。
変換コードをコピーする
いずれかの方法で色を変更すると、すべてのカラーフォーマット（HEX, RGB, HSL, HSV, CMYK）がリアルタイムに更新されます。各項目の右側にある「コピー」ボタンをクリックすると、クリップボードに保存されます。CSS変数用のコードも一括コピーが可能です。
配色とコントラストを確認する
ページ下部の「配色パレット」タブを切り替えて、補色やモノクロなどのカラーバリエーションを確認できます。「コントラスト比」セクションでは、選択した色を背景とした場合の白文字・黒文字の可読性が自動判定されます。
色・カラーコードに関する用語集
- HEX（16進数カラーコード）
- Webデザインで最も一般的に使用される色指定形式です。「#RRGGBB」の6桁（または「#RGB」の3桁）で表現され、赤(R)・緑(G)・青(B)の強さを16進数（00～FF）で指定します。透明度を含める場合は「#RRGGBBAA」の8桁で記述され、CSSやHTMLで広くサポートされています。
- RGB / RGBA
- 光の三原色（Red, Green, Blue）による加法混色モデルです。ディスプレイの発色原理に基づき、各色0～255の数値で表現されます。CSSでは「rgb(255, 0, 0)」のように記述し、「rgba」では末尾に0.0～1.0のアルファ値（透明度）を追加できます。
- HSL
- 色相（Hue）・彩度（Saturation）・明度（Lightness）の3つの属性で色を表現するモデルです。直感的に「色味を変える」「暗くする」といった調整がしやすいため、CSS（hsl関数）を用いたデザインシステムの構築や、テーマの動的変更などに非常に適しています。
- CMYK
- シアン（Cyan）・マゼンタ（Magenta）・イエロー（Yellow）・ブラック（Key）の4色を用いた減法混色モデルです。主に印刷業界で使用されるインクの形式であり、ブラウザ上のCMYK値は近似的な理論値となるため、実際の印刷時にはプロファイルによる調整が必要です。
- コントラスト比（WCAG）
- Webアクセシビリティ・ガイドラインで定められた、背景色とテキスト色の相対輝度の比率です。すべてのユーザーがテキストを読めるよう、通常のテキストには「4.5:1（AAレベル）」以上、大きなテキストには「3:1」以上の比率が推奨されています。
よくある質問
- Q.CMYKの変換結果は実際の印刷で正確ですか？
- ブラウザ上で計算されるCMYK値は理論的な計算に基づく近似値です。実際の印刷物では、使用するプリンターのICCプロファイルやインクの特性によって色味が異なる場合があります。正確な印刷入稿用のCMYKデータが必要な場合は、Adobe IllustratorやPhotoshopなどのカラーマネジメント対応ソフトウェアで変換・確認を行ってください。
- Q.透明度（アルファ値）の変換には対応していますか？
- はい、対応しています。カラーピッカーの「透明度バー」を操作するか、コードに直接アルファ値を入力することで、HEX（#RRGGBBAA）、RGBA、HSLA形式のコードが正しく出力されます。透明度が必要なモダンなWebUIの実装に最適です。
- Q.「CSS変数 出力」機能とは何ですか？
- 選択した色をCSSのカスタムプロパティ（CSS Variables）形式として出力する機能です。--color-primary: #7C3AED; といった形式で、HEXだけでなく、RGBやHSLのカンマ区切り値も同時に出力されるため、Tailwind CSSの設定や動的なテーマ変更を行う際の実装の手間を大幅に削減できます。
- Q.入力した色データはサーバーに保存されますか？
- いいえ。本ツールは完全なクライアントサイド（ブラウザ内）で動作しており、入力されたカラーコードや生成結果が外部サーバーに送信・保存されることは一切ありません。「お気に入り機能」についても、ご使用のブラウザのローカルストレージにのみ保存されるため、安全にご利用いただけます。
活用シーン
Webデザインとコーディング
FigmaやXDなどのデザインツールで指定されたHEXコードを、開発用にRGBやHSL形式に一括変換。CSS変数を用いたモダンなテーマ構築の効率化に。
アクセシビリティの向上
サイトの背景色と文字色の組み合わせが、WCAGのコントラスト比基準（AA/AAA）を満たしているかをコーディングしながら即座にチェックし、より見やすいUIを実現。
プレゼン資料の配色検討
企業のブランドカラーを基に、補色や類似色などの関連パレットを自動生成。統一感のある美しいスライドやグラフィックデザインの配色検討に。
印刷物データへの変換目安
Webで使っているカラーをCMYK値に変換して、チラシや名刺などの印刷物へ展開する際の近似値の参考データとして活用。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。