青のカラーコード（青系37色）

青は、黒に近いネイビーから最も淡いアリスブルーまで幅があります。このページでは、royalblueやsteelblueなど18色のCSS色名に、コバルト、セルリアン、プルシアンブルー、インターナショナル・クライン・ブルーといったよく知られた名前を加えた青系37色を、HEX・RGB・HSL・HSV・CMYK・OKLCHのコードとともにまとめました。1色を選ぶと、その明るい版と暗い版、補色、そして白と黒のどちらの文字が読みやすいかが分かります。

使い方

1. 一覧から青系の色を選びます。
2. 結果からHEX、RGB、HSL、CMYKのコードをコピーします。
3. 同じ青のもっと明るい版・暗い版には、明るい版と暗い版の表を使います。
4. 全体の表をスクロールしてすべての色を並べて比べるか、チャートをダウンロードします。

計算式

明るい版 ＝ c + (255 − c) × p · 暗い版 ＝ c × (1 − p) · 補色 ＝ HSLの色相 + 180°

cはRGBの各チャンネル、pは混合の量（15〜75%）です。CMYKは単純な式 K = 1 − max(R′, G′, B′) を使っており、印刷会社はICCプロファイルで変換するため、数値が異なる場合があります。

計算例

ロイヤルブルー（royalblue）は #4169E1 ＝ rgb(65, 105, 225)、hsl(225, 72.7%, 56.9%) です。色相を180°回すと暖かい金色 #E1B941、つまり補色になります。その上の白い文字はコントラスト比4.84:1で、本文のAAを満たします。ネイビー #000080 の上の白い文字は16:1です。