カラーコード変換 – HEX↔RGB・HSL・CMYK、配色、コントラスト

カラーコードを変換する方法

すべての形式を同じRGB値から計算するので、互いに食い違うことはありません。HSLとHSVは色を色相・彩度・明度（明るさ）で表すため、配色を作りやすいのが特長です。補色は色相環で180°、トライアドは120°ずつ離れています。明るく・暗くした色は、色相と彩度を保ったまま明度だけを変えます。

コントラストチェックは、アクセシビリティ診断で使われるWCAG 2の相対輝度の式をそのまま使っています。

当サイトの青 #0071e3 は rgb(0, 113, 227)、hsl(210, 100%, 44.5%)、おおよそ cmyk(100%, 50%, 0%, 11%) です。白背景とのコントラストは4.70:1で、WCAG AAの本文の基準4.5:1をわずかに上回ります。

よく使われるグレー #767676 は白背景で4.54:1で合格ですが、1段階明るい #777777 は4.48:1で不合格です。デザイナーが目分量ではなくチェックする理由です。明るいオレンジ #ff9f0a は白背景で2.06:1しかなく、大きなアイコンには使えても本文には向きません。

ブランドガイドの色をCSS・Android・印刷用の値に直したいとき。スライドやWebサイト、ロゴ用の小さなパレットを作りたいとき。公開前にボタンの文字が読みやすいか確かめたいとき。ホバー時に使う少し暗い色を探したいときに。

QRコードに色を付けるならQRコード作成、画像に載せる文字の色はミーム作成でそのまま選べます。

HEXをRGBに変換するには？

6桁を2桁ずつに分け、16進数として読みます。#0071e3 → 00, 71, e3 → 0, 113, 227。入力するとすぐにツールが計算します。

コントラスト比はどれくらい必要？

WCAG AAでは本文で4.5:1以上、大きな文字（約24px、太字なら19px）で3:1以上が必要です。AAAは7:1です。

CMYKの値はそのまま印刷に使える？

出発点としては十分ですが、実際の印刷色は紙とインクのプロファイルで変わります。ブランドカラーが重要なら、印刷会社に色校正を依頼してください。

CSSにはどの形式を使えばいい？

どれでも使えます。HEXがもっとも一般的で、明るさを手で調整したいときはhsl()が便利です。