カラーコード変換（HEX・RGB・HSL・CMYK）

1. 色を指定します。方法は3つあり、どれを使っても構いません。
   • カラーピッカーで視覚的に選ぶ
   • HEX欄に #1a73e8 のように入力する（# は省略可、3桁の #abc にも対応）
   • R・G・Bの欄に0〜255の数値を入れる
2. HEX・RGB・HSL・HSV・CMYKの変換結果が自動で表示されます。
3. 各行の「コピー」を押すと、その形式のコードをクリップボードにコピーできます。CSSにそのまま貼り付けられる形になっています。
4. 「基本色」の四角を押すと、黒・白・赤などの代表的な色をすぐに呼び出せます。
5. いちばん下に、白文字・黒文字を乗せたときのコントラスト比が表示されます。

HEX（16進カラーコード）

Webでいちばんよく使われる書き方です。#RRGGBB の形で、赤・緑・青の強さをそれぞれ00〜FFの16進数2桁で表します。

• #000000 … 黒
• #ffffff … 白
• #ff0000 … 赤

各桁が同じ数字の場合は3桁に省略できます。#ffcc00 は #fc0 と書いても同じ色です。

末尾に2桁足した #RRGGBBAA という8桁の書き方もあり、最後の2桁が不透明度を表します。このツールでは8桁を入力すると、色の部分だけを読み取ります。

RGB

赤・緑・青をそれぞれ0〜255の10進数で表します。CSSでは rgb(26, 115, 232) のように書きます。

HEXと表している内容はまったく同じで、書き方が16進数か10進数かの違いだけです。

HSL

色相（Hue）・彩度（Saturation）・明度（Lightness）の3つで表す方式です。CSSでは hsl(217, 82%, 51%) のように書きます。

• 色相：0〜360の角度。0が赤、120が緑、240が青
• 彩度：0%が灰色、100%が鮮やか
• 明度：0%が黒、50%が純色、100%が白

「同じ色味のまま少し暗くしたい」といった調整はHSLのほうがやりやすく、配色を組むときに向いています。

HSV

色相・彩度・明度（Value）で表す方式です。HSLと似ていますが明度の扱いが違い、Photoshopなどの画像ソフトのカラーピッカーでよく見かけます。

CMYK

シアン・マゼンタ・イエロー・キー（黒）の4色で表す、印刷用の方式です。

注意点として、画面の色（RGB）と印刷の色（CMYK）は表現できる色の範囲が違います。このツールの変換は、プロファイルを使わない単純計算です。実際の印刷では色味がずれることがあるので、目安としてお使いください。

変換の考え方

HEX ↔ RGB

16進数と10進数を変換するだけです。たとえば 1a は 1 × 16 + 10 = 26 になります。

RGB → CMYK

まずR・G・Bを0〜1に直し、いちばん大きい値を使ってK（黒）を求め、残りをC・M・Yに振り分けます。

• K = 1 − max(R, G, B)
• C = (1 − R − K) ÷ (1 − K)

黒（R=G=B=0）のときはK=1になり、C・M・Yはすべて0になります。

コントラスト比について

このツールでは、選んだ色に白文字・黒文字を乗せたときのコントラスト比も表示します。WCAG（Webアクセシビリティの指針）の計算式に基づいたものです。

• 本文の文字：4.5:1 以上が目安
• 大きい文字（18pt以上、または14pt以上の太字）：3:1 以上が目安

背景色を決めるとき、白文字と黒文字のどちらが読みやすいかの判断に使えます。数字が大きいほど読みやすい組み合わせです。

よくある使い方

• デザインカンプのHEXを、CSSのrgb()やhsl()に書き換える
• 画面用に作った色を、印刷用のCMYKで確認する
• ブランドカラーの上に置く文字色を、白と黒のどちらにするか決める
• HSLの明度だけを変えて、ホバー時の色を作る

まとめ

• HEXとRGBは書き方が違うだけで中身は同じ
• 色味を保ったまま明るさを変えたいならHSL
• 印刷はCMYK。ただし画面の色とは完全には一致しない
• 文字色を決めるときはコントラスト比を見る

このツールは無料でご利用いただけます。CMYKへの変換はカラープロファイルを考慮しない単純計算のため、実際の印刷結果とは色味が異なる場合があります。