カラーコード変換無料・登録不要
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形式に対応しています。
関連ツール
カラーコード変換について
Web と印刷で色の形式がすれ違う場面
デザイナーから受け取った色が CMYK で、Web 実装側は HEX が必要、という食い違いはデザインの現場で頻繁に起きます。Photoshop や Illustrator を開かなくても、HEX・RGB・HSL・CMYK の4形式を相互に変換できれば、デザイナーと開発者のやり取りがその場で片づきます。本ツールは4形式のいずれかを入力タブで選んで1つ入力すると、残りの形式が同時に表示され、各形式のコピーボタンで取得できます。会員登録もログインも不要で、ブラウザ内だけで動きます。
使いどころは主に3つです。1つ目は Web 実装で、Figma で取得した HEX を CSS の rgb() に直したり、印刷連携で CMYK 値を確認したりする場面です。2つ目はブランドカラーの管理で、Web は HEX、印刷は CMYK と使い分ける色を、1回の入力で4形式そろえたいときに使えます。3つ目はデザインシステムやスタイルガイド作成で、色トークンを4形式で記録する際、毎回 HEX から RGB を手計算せずに済みます。
HEX・黒・無効値の3つを変換した実処理結果
実測条件です。本ツールは AI を呼ばず、ブラウザ内で計算します。正常な色、境界値の黒、無効な値の3通りを実際に入力し、返ってきた値をそのまま記録しました。
1つ目は正常系で、IGS の濃紺 HEX #003069 を入力しました。結果は rgb(0, 48, 105)、hsl(213, 100%, 21%)、cmyk(100%, 54%, 0%, 59%) で、エラー表示は無しでした。
2つ目は境界値の黒 #000000 です。結果は rgb(0, 0, 0)、hsl(0, 0%, 0%)、cmyk(0%, 0%, 0%, 100%) で、色相と彩度が 0、CMYK は黒 100% と、想定どおりの値が返りました。
3つ目は、わざと無効な HEX #GGGGGG を入れました。G は16進数に無い文字です。入力欄には「HEX 形式（例: #3B82F6）で入力してください」というエラーが表示されました。ただし変換結果は消えず、#000000、rgb(0, 0, 0)、hsl(0, 0%, 0%)、cmyk(0%, 0%, 0%, 100%) という黒の値が同時に表示され続けました。
無効な HEX はエラー表示と黒の変換値が同時に出る
今回試した3件の範囲で、はっきり出たクセが1つあります。無効な HEX #GGGGGG を入れると、入力欄には「HEX 形式（例: #3B82F6）で入力してください」というエラーが表示される一方で、変換結果には rgb(0, 0, 0)、つまり黒に相当する値がそのまま出続ける点です。エラーは知らせてくれますが、結果の表示自体は止まりません。
そのため、エラー文を見落として結果の値だけを見ると、正常な黒 #000000 を入れたときとまったく同じ値になり、「正しく黒を変換したのか」「無効な入力が黒として処理されたのか」を、結果だけでは区別できません。
これは今回の1件で観測された挙動で、あらゆる無効入力で必ず同じになると保証するものではありません。心配な場合は、入力欄にエラー文が出ていないか、入力した HEX が「#」と 0〜9・A〜F の6文字だけで構成されているかを、自分の目で確かめてから使うのが安全です。
カラーピッカー（既存ツール）との違い
カラーピッカー（/tools/color-picker）は「画面で色を選んで HEX/RGB/HSL を取得」する用途。本ツール（カラーコード変換）は「既知の色値（HEX/RGB/HSL/CMYK のいずれか）を別形式に変換」する用途で、目的が異なります。両ツールを併用することで、色設計の全フローをカバーできます。
CMYK 変換の注意点
RGB と CMYK の変換はモニタ表示色（RGB）と印刷色（CMYK）の単純な数式変換のため、実印刷時の色再現とは厳密には一致しません。商業印刷で色精度が必要な場合は、ICC プロファイル付き Photoshop での変換、もしくは印刷会社の色校正に従ってください。本ツールの CMYK 値は「目安値」「印刷会社への参考値」として使用してください。実際に #003069 を変換したときの CMYK は cmyk(100%, 54%, 0%, 59%) でしたが、これも同じく目安の数式変換値です。
この変換ツールが向かない使い方と手直しの目安
向かないのは、入力ミスをツール側で完全にはじいてほしい使い方です。前述のとおり、無効な HEX を入れるとエラー文は表示されますが、変換結果には黒の値がそのまま出続けるため、結果欄の値だけを見て入力の正誤を判断する使い方には向きません。また CMYK 値は前の「CMYK 変換の注意点」のとおり数式変換の目安なので、商業印刷の色決めをこの値だけで確定する用途にも向きません。
手直しの判断は2点で見てください。1つ目は、変換結果が rgb(0, 0, 0) の黒一色になっていないか、そのとき入力欄にエラー文が出ていないかを確かめることです。狙って黒を入れた場合を除き、黒一色やエラー表示が出ていたら、入力した HEX の文字が正しいかを疑ってください。2つ目は、CMYK を印刷に回すときは、この値を初稿の目安に留め、最終色は印刷会社の色校正で合わせることです。この2点だけ押さえておけば、Web と印刷で形式をそろえる用途では十分に使えます。