CSS Color DEMO

Named Colors

CSS で定義されている 148 色。別名を持つ同色も個別に表示する。

• aliceblue
• antiquewhite
• aqua
• aquamarine
• azure
• beige
• bisque
• black
• blanchedalmond
• blue
• blueviolet
• brown
• burlywood
• cadetblue
• chartreuse
• chocolate
• coral
• cornflowerblue
• cornsilk
• crimson
• cyan
• darkblue
• darkcyan
• darkgoldenrod
• darkgray
• darkgreen
• darkgrey
• darkkhaki
• darkmagenta
• darkolivegreen
• darkorange
• darkorchid
• darkred
• darksalmon
• darkseagreen
• darkslateblue
• darkslategray
• darkslategrey
• darkturquoise
• darkviolet
• deeppink
• deepskyblue
• dimgray
• dimgrey
• dodgerblue
• firebrick
• floralwhite
• forestgreen
• fuchsia
• gainsboro
• ghostwhite
• gold
• goldenrod
• gray
• green
• greenyellow
• grey
• honeydew
• hotpink
• indianred
• indigo
• ivory
• khaki
• lavender
• lavenderblush
• lawngreen
• lemonchiffon
• lightblue
• lightcoral
• lightcyan
• lightgoldenrodyellow
• lightgray
• lightgreen
• lightgrey
• lightpink
• lightsalmon
• lightseagreen
• lightskyblue
• lightslategray
• lightslategrey
• lightsteelblue
• lightyellow
• lime
• limegreen
• linen
• magenta
• maroon
• mediumaquamarine
• mediumblue
• mediumorchid
• mediumpurple
• mediumseagreen
• mediumslateblue
• mediumspringgreen
• mediumturquoise
• mediumvioletred
• midnightblue
• mintcream
• mistyrose
• moccasin
• navajowhite
• navy
• oldlace
• olive
• olivedrab
• orange
• orangered
• orchid
• palegoldenrod
• palegreen
• paleturquoise
• palevioletred
• papayawhip
• peachpuff
• peru
• pink
• plum
• powderblue
• purple
• rebeccapurple
• red
• rosybrown
• royalblue
• saddlebrown
• salmon
• sandybrown
• seagreen
• seashell
• sienna
• silver
• skyblue
• slateblue
• slategray
• slategrey
• snow
• springgreen
• steelblue
• tan
• teal
• thistle
• tomato
• turquoise
• violet
• wheat
• white
• whitesmoke
• yellow
• yellowgreen

Web Safe Colors

RGB の各成分を 00, 33, 66, 99, CC, FF から選ぶ 6³ = 216 色。

左から R = 00, 33, 66, 99, CC, FF の6ブロック。各ブロック内で G と B が変化する。

HSL Comparison

色相と明度を固定し、彩度だけを 90% から 100% に変えた比較。

HSL Components

hsl(220 90% 50%) の青を起点に、H, S, L のうち 1 つだけを変えたパレット。

HSL Perceptual Uniformity

S = 100%, L = 50% を固定して H だけを変える。数値上の明度は同じでも、黄色は明るく、青は暗く見える。

• 0deg
• 30deg
• 60deg
• 90deg
• 120deg
• 150deg
• 180deg
• 210deg
• 240deg
• 270deg
• 300deg
• 330deg

HWB Comparison

同じ色相で、白と黒の混合率が異なる 2 色。

LAB Comparison

HSL では彩度だけが異なっていた 2 色を LAB で表した比較。

LCH Hue Shift

lch(30% 130 300) を起点に、C = 130, H = 300 を固定して L を 10 ずつ増やす。明るくするにつれて赤紫が入って見える。

• lch(30% 130 300)
• lch(40% 130 300)
• lch(50% 130 300)
• lch(60% 130 300)
• lch(70% 130 300)

OKLCH Hue Stability

同じ lch(30% 130 300) を起点に、OKLCH では C = 0.31, H = 264 を固定して L を 0.1 ずつ増やす。C が色域を超えた分は丸められるが、色相が保たれるため、明るくしても青のままになる。

• lch(30% 130 300)
• oklch(0.55 0.31 264)
• oklch(0.65 0.31 264)
• oklch(0.75 0.31 264)
• oklch(0.85 0.31 264)

HSL / OKLCH Palette

HSL は S, L を固定し、H を 30 度ずつシフトして色相環を一周するパレット。OKLCH は、その各色と同じ色相のまま、L と C を HSL 側 12 色の平均値に固定したもの。つまり、上下の列は同じ色相で、パレット全体の平均のトーンも同じ。違いは、色ごとのばらつきの有無だけになる。

同じ 2 つのパレットを grayscale(100%) で見ると、HSL は数値上の L が同じでも実際の明るさがばらつき (輝度 0.50~0.80)、OKLCH は揃っている (輝度 0.62~0.67) ことがわかる。

color-mix()

背景色に前景色を 20% 混ぜて、新しい色を作る。color-mix(in oklab, var(--fg) 20%, var(--bg)) という同じ宣言のまま、Light / Dark 両方のモードに適応する。ボタンを hover すると、背景が混合色になる。

color-mix() Color Space

同じ blue と yellow を、異なる色空間で混ぜた比較。in srgb は完全なグレーに濁り、in oklab は明度の自然な中間色になる。極座標の in oklch は、色相環を経由するため鮮やかなまま混ざる。in を省略した場合のデフォルトは oklab。

contrast-color()

背景色ごとに、文字色を白または黒から自動的に選択する。未対応のブラウザでは、同じ結果を手書きしたフォールバック色で表示している。

Wide Gamut

sRGB の緑と Display P3 の緑を比較する。P3 対応ディスプレイでは色域の差を確認できる。