カラーコード変換無料・登録不要
HEX・RGB・HSL・CMYK のカラーコードを相互変換。Web デザインから印刷物まで、4 形式の色値を一画面で同時取得できます。
変換結果（クリックでコピー）
良いカラーコード変換の判断基準
デザインデータの色値を CSS 用に変換したり、Web 用の HEX と印刷用の CMYK を相互に確認したりするときに使うツールです。変換結果をコピーする前に、下の基準で「形式ごとの情報の違い」を確認すると、貼り付けた後の色ずれを防げます。
透明度（アルファ）の有無を確認したか
6桁の HEX には透明度の情報が含まれません。元の色に透明度が設定されている場合（rgba や半透明のオーバーレイなど）、HEX 6桁に変換すると透明度が失われます。透明度が必要な色かどうかを先に確認し、必要なら透明度を表現できる形式で扱います。
変換先の形式がコードの書き方と合っているか
同じ色でも、CSS では hex・rgb()・hsl() のどれでも書けます。プロジェクトで使っている書き方（既存コードやデザイントークンの形式）に合わせて変換先を選ぶと、コードベースの一貫性が保てます。
CMYK 値を「目安」として扱っているか
RGB と CMYK は色を表現できる範囲が異なるため、数式上の変換結果が実際の印刷の色と一致するとは限りません。印刷物で色の精度が必要な場合は、変換値を参考値として印刷会社の色校正で最終確認します。
実画面で色を確認したか
数値が正しくても、実際に背景や周囲の色と並べたときの見え方は別問題です。変換した色を本番に入れる前に、実際のブラウザで適用先の画面に当てて確認します。
テキストに使う色ならコントラストを確認したか
文字色や文字の背景色として使う場合、コントラストが不足すると読みにくくなります。変換そのものとは別の観点ですが、用途がテキスト関連なら背景色との組み合わせで読めるかを確認しておくと手戻りが減ります。
ありがちな失敗例（NG → 改善）
NGrgba(0, 48, 105, 0.5) の半透明色を HEX 6桁の #003069 に変換して貼り付け、透明度が消える。
改善透明度が必要な色は rgba など透明度を表現できる形式のまま使う。HEX にするなら透明度が落ちることを理解した上で使う。
→ HEX 6桁には透明度の情報がありません。変換で透明度が暗黙に失われると、重なりの表現が変わってしまいます。
NGツールで変換した CMYK 値をそのまま入稿データの最終色として確定する。
改善CMYK 値は参考値として使い、商業印刷では色校正や印刷会社の指定値で最終確認する。
→ RGB と CMYK は表現できる色域が違うため、数式変換だけでは実際の印刷色と一致しない場合があります。
NG変換した色値を画面で確認せずに本番コードへコミットする。
改善適用先の実画面（実際の背景・隣接要素と並んだ状態）で見え方を確認してから本番に入れる。
→ 色は単体ではなく周囲との関係で見え方が変わります。数値の正しさと画面上の妥当性は別物です。
カラーコード変換の使い方
- 1テキストを入力またはペーストします
- 2「変換する」ボタンをクリックします
- 3結果を確認してコピーします
よくある質問
カラーコード変換は無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
関連ツール
カラーコード変換について
カラーコード変換が解決する課題
デザイナーが受け取った色値が CMYK で、Web 実装側は HEX が必要——というシーンは日常茶飯事です。Photoshop・Illustrator を開かなくても、HEX / RGB / HSL / CMYK の 4 形式を相互変換できれば、デザイナーと開発者のやり取りが秒で完了します。本ツールは値を入力するだけで、他の 3 形式を同時表示し、コピーボタンで即取得できます。
こんなシーンで使えます
【1. Web 実装で CSS の rgb() / hsl() / cmyk() への変換】Figma で取得した HEX を CSS の rgb() に変換、もしくは印刷物連携で CMYK 値を確認する場面で。
【2. ブランドカラーの 4 形式同時管理】ブランドカラーは Web では HEX、印刷では CMYK で管理する必要があります。1 つ入力すれば 4 形式の値を取得できます。
【3. デザインシステム / スタイルガイド作成】Token としての色値を 4 形式で記録する際、毎回 HEX → RGB を計算しなくても自動で取得できます。
カラーピッカー（既存ツール）との違い
カラーピッカー（/tools/color-picker）は「画面で色を選んで HEX/RGB/HSL を取得」する用途。本ツール（カラーコード変換）は「既知の色値（HEX/RGB/HSL/CMYK のいずれか）を別形式に変換」する用途で、目的が異なります。両ツールを併用することで、色設計の全フローをカバーできます。
CMYK 変換の注意点
RGB ↔ CMYK の変換はモニタ表示色（RGB）と印刷色（CMYK）の単純な数式変換のため、実印刷時の色再現とは厳密には一致しません。商業印刷で色精度が必要な場合は、ICC プロファイル付き Photoshop での変換、もしくは印刷会社の色校正に従ってください。本ツールの CMYK 値は「目安値」「印刷会社への参考値」として使用してください。