カラーコード変換無料・登録不要
HEX・RGB・HSL・CMYK のカラーコードを相互変換。Web デザインから印刷物まで、4 形式の色値を一画面で同時取得できます。
変換結果（クリックでコピー）
カラーコード変換の使い方
- 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 値は「目安値」「印刷会社への参考値」として使用してください。