色コードを相互変換
HEX / RGB / HSL / HSV / CMYK を変換し、白黒テキストとのコントラスト比を確認します。
使い方とユースケース
デザイン指定、CSS調整、画像から拾った色の形式変換に使えます。入力はブラウザ内だけで処理します。
#2f80ed、rgb(47,128,237)、hsl(214,85%,56%)、0,66,0,7などを受け付けます。- コントラスト比はWCAGの相対輝度式に基づく目安です。
カラーコード変換は、HEX・RGB・HSL・HSV・CMYKの5形式のカラーコードをブラウザ内で相互変換するツールです。入力形式は自動判定にも対応し、変換結果と一緒に色のプレビュー、白文字・黒文字それぞれとのコントラスト比、推奨される文字色（黒/白）も表示します。Webデザイナーやフロントエンド開発者が、デザインツールから取得した色をCSSやコードへ素早く転記したいときに使えます。
使い方・サンプル・結果例・注意点
使い方
色コードを入力欄に貼り付け、入力形式（自動判定でも可）と出力形式を選んで「変換」ボタンを押すと、各形式の値とコントラスト比が表示されます。
サンプル入力
#2f80ed
結果例
このHEXコードを「自動判定」「すべて」で変換すると、HEX: #2f80ed、RGB: rgb(47, 128, 237)、HSL: hsl(214, 85%, 56%)、HSV: hsv(214, 80.17%, 92.94%)、CMYK: cmyk(80.17%, 45.99%, 0%, 7.06%) のように5形式すべてが表示されます。あわせて黒文字・白文字とのコントラスト比（例: 黒文字は約1.9、白文字は約2.7程度）と、推奨文字色（コントラスト比が高い方）が色プレビューとともに表示されます。
注意点
RGBは0〜255、HSL/HSVは色相0〜360・彩度と明度0〜100、CMYKは各成分0〜100の範囲外の値を入力するとエラーになります。CMYK形式の自動判定は、入力した数値が4つあるかどうかで判定するため、3値のRGBやHSLと混同しないよう形式を明示するのが安全です。コントラスト比はWCAGの相対輝度の式に基づく目安値で、アクセシビリティ基準（AA/AAAなど）を満たすかどうかの判定そのものは行いません。入力は200文字までです。
こんなときに使えます
- Webデザイナーが、デザインツールでピックアップしたHEXカラーをCSS用のRGBやHSLに変換し、CSS変数として記述する
- フロントエンドエンジニアが、デザイナーから渡されたCMYK値（印刷用）をWeb表示用のHEX/RGBに変換してコードに反映する
- アクセシビリティ担当者が、背景色と文字色の組み合わせについて、黒文字・白文字どちらが見やすいかをコントラスト比から確認する
- ロゴ・グラフィック制作者が、印刷用CMYKとWeb用HEX/RGBの両方を一度に確認し、媒体ごとの色指定資料を作成する
よくある質問
入力形式の「自動判定」はどのように色形式を見分けていますか？
#から始まる3桁/6桁の16進数はHEX、rgb/hsl/hsv/cmykという文字列で始まればその形式、それ以外で数値が4つあればCMYK、3つならRGBとして扱います。意図しない形式と判定された場合は、入力形式を手動で指定してください。
コントラスト比はWCAGの基準（AA・AAAなど）を満たすか教えてくれますか？
コントラスト比の数値（黒文字・白文字それぞれ）と、より見やすい方の推奨文字色は表示しますが、AA/AAAなどの達成基準を満たすかどうかの自動判定は行いません。基準値との比較はご自身で行ってください。
CMYKからHEXへの変換は印刷の色とまったく同じになりますか？
なりません。このツールはディスプレイ表示を前提とした簡易的なCMYK⇄RGB変換式を使っており、印刷インクやプロファイルに依存する正確な色再現とは異なります。あくまで目安としてご利用ください。
rgb(47,128,237)のようにスペースなしで入力しても大丈夫ですか？
問題ありません。RGB・HSL・HSV・CMYKはテキスト中の数値（カンマ区切りでなくても可）を順番に抽出して解釈するため、多少表記が崩れていても認識できます。
HEXは3桁の省略形（#abcなど）にも対応していますか？
対応しています。#abcのような3桁HEXは、各桁を2回繰り返した6桁HEX（#aabbcc）として扱われます。