カラーコードをHEX・RGB・HSLで相互変換する方法

3つの表記は「同じ色の別の書き方」

HEX・RGB・HSLは、どれも画面上の同じ色を指す別の表記法です。デザインツールはHEXで色を示し、CSSではRGBAで透明度を扱い、色の調整はHSLが楽——と場面ごとに得意分野が違うため、相互変換が必要になります。

• HEX（例：#ff3e9d）：赤・緑・青の強さを16進数2桁ずつで並べた表記。最も短く、デザインツールやスタイルガイドでの色指定の事実上の標準です
• RGB（例：rgb(255, 62, 157)）：同じ赤・緑・青を0〜255の10進数で書いたもの。中身はHEXと完全に同じ情報です。透明度を加えたrgba()が使えるのが実務上の利点
• HSL（例：hsl(330, 100%, 62%)）：色相（色味の角度）・彩度（鮮やかさ）・明度（明るさ）という人間の感覚に近い3軸で表す表記

HSLを知ると色の調整が「計算」になる

HEXやRGBの数字をいじって狙い通りの色を作るのは、慣れていても困難です。ところがHSLなら、色の調整が直感的な操作になります。

• 「もう少し暗い色がほしい」 → 明度（L）だけ下げる。ボタンのホバー色（マウスを乗せたときの色）は「同じ色の明度を5〜10%下げる」だけで自然に作れます
• 「落ち着いた色にしたい」 → 彩度（S）を下げる。鮮やかすぎる色はSを下げるとトーンが揃います
• 「同系色でバリエーションがほしい」 → 色相（H）を固定してSとLだけ変える。統一感のある配色が機械的に作れます

デザイナーから受け取ったHEXをHSLに変換して明度違いを作り、それをHEXに戻してCSSに書く——この往復が、変換ツールの実務での主な使い方です。カラーコード変換ツールではカラーピッカーやHEX入力から3表記が同時に得られます。

色選びで見落とされがちな「コントラスト」

Webで色を決めるとき、見た目の好みと同じくらい重要なのが文字色と背景色のコントラスト（明暗差）です。薄いグレーの背景に白文字、淡い色どうしの組み合わせは、若い目・良い照明・大きな画面では読めても、それ以外の環境では読めないテキストになります。

Webアクセシビリティの国際基準（WCAG）では、通常サイズの文字でコントラスト比4.5:1以上が推奨されています。厳密な計算はチェックツールに任せるとして、実務の感覚としては次を押さえておくと大きく外しません。

• 本文テキストは「白背景に#333333以上の濃さ」が安全圏。#999999より薄いグレー本文は基準を満たしません
• 色付きボタンの白文字は、背景色の明度（HSLのL）が60%を超えたあたりから読みにくくなります。Lを下げるか文字を濃色にします
• 「薄い色＋細字」の組み合わせは最悪です。薄くしたいならせめて太字にします

チームでの色指定を混乱させないために

「ピンクっぽい色で」のような口頭指定は、人によって思い浮かべる色が違います。色のやり取りは必ずカラーコード（HEX）で行い、プロジェクトで使う色は「メイン #FF3E9D／テキスト #333333／背景 #F7F7F7」のように一覧化しておくと、ページごとに微妙に違う色が増殖する事態を防げます。

よくある質問

Q. 印刷用のCMYKに変換したい場合はどうすればいいですか？
A. 画面の色（RGB系）と印刷インクの色（CMYK）は表現できる色の範囲が異なるため、単純な数値変換では色がくすんで見えることがあります。印刷物の色指定は、印刷会社指定の方法（IllustratorなどでのCMYK指定や色見本帳）に従うのが確実です。

Q. 「#fff」のような3桁のHEXコードは何ですか？
A. 6桁の省略記法で、各桁を2つ重ねたものと同じ意味です（#fff＝#ffffff、#f80＝#ff8800）。CSSではどちらも有効ですが、チーム開発では表記を6桁に統一しておくと検索や置換で漏れが起きにくくなります。

変換はカラーコード変換ツールで行えます。入力内容はサーバーに送信されず、ブラウザ内だけで処理されます。

あわせて使いたいツール