ラベンダー色のカラーコード（ラベンダー系17色）

「ラベンダー」と言うと、まったく違う2つの色が出てくることがあります。CSSの lavender は #E6E6FA で、青みがかったごく淡い白に近い色です。一方、花のラベンダーの色は #B57EDC で、はっきりした中間の明るさの紫です。このページでは、この系統のCSSキーワード5つ（lavender、lavenderblush、thistle、plum、mediumpurple）に、花のラベンダー、ペリウィンクル、ペール・ラングイッドラベンダー、ウィステリア、ライラック、ヘリオトロープなどを加えた、ラベンダー・ライラック17色をHEX、RGB、HSL、HSV、CMYK、OKLCHのコード、明暗の段階、そして2つのラベンダーのどちらに近いかとともに紹介します。

使い方

1. リストからラベンダーまたはライラック系の色を選びます。
2. 必要なHEX、RGB、HSL、CMYKのコードをコピーします。
3. 単に「ラベンダー」とだけ書かれた指定に合わせるときは「近いラベンダー」を確認します。
4. より明るい背景や暗いアクセントカラーが必要なときは、明暗の段階の表を使います。

計算式

明るい版 = c + (255 − c) × p · 暗い版 = c × (1 − p) · 補色 = HSLの色相 + 180° · 「近い方」 = CIEDE2000のΔEが小さい方

cはRGBの各チャンネル値、pは混ぜる割合（15–75%）です。距離はCIELAB（D50）とCIEDE2000の式で求めます。約2以下ならほとんど見分けがつかず、10を超えるとはっきり違って見えます。

計算例

ラベンダー（花の色）は #B57EDC = rgb(181, 126, 220) = hsl(275.1, 57.3%, 67.8%)、CMYKは 17.7%, 42.7%, 0%, 13.7% です。CSSの lavender #E6E6FA は hsl(240, 66.7%, 94.1%) でずっと淡い色です。どちらの色も黒い文字が読みやすく、花のラベンダーでは 6.98:1、CSSラベンダーでは 17.06:1 です。一方、花のラベンダー上の白い文字は 3:1 にとどまり、大きな見出しには使えても本文には足りません。ウィステリア #C9A0DC はCSSキーワード（ΔE 20.2）よりも花のラベンダー（ΔE 10.5）に近い色です。