No Login Data Private Local Save

CSS Color Function Explorer - Online Write Modern Colors

28
0
0
0
#3B82F6 Click preset or pick a color
Aa Aa
1.00
Presets:

HEX — 最常用的颜色格式，使用6位十六进制表示RGB。简洁通用，所有浏览器完美支持。

#3B82F6

rgb() / rgba() — 红绿蓝通道，每通道0-255。现代CSS统一使用 rgb(r g b / a) 语法。

R 59
G 130
B 246
rgb(59 130 246)

hsl() / hsla() — 色相(Hue)、饱和度(Saturation)、亮度(Lightness)。HSL 更贴近人类感知，调整颜色更直观。

H° 217
S% 91%
L% 60%
hsl(217 91% 60%)

hwb() — 色相(Hue) + 白度(Whiteness) + 黑度(Blackness)。比HSL更直观地混合白色或黑色来调整颜色。

H° 217
W% 23%
B% 4%
hwb(217 23% 4%)

oklch() ⭐ — 现代CSS颜色空间，感知均匀。L(亮度0-1)、C(色度)、H(色相)。可表达P3广色域颜色，比sRGB鲜艳50%。MDN

L 0.65
C 0.20
H° 255
oklch(0.65 0.20 255)

oklab() — 改进的Lab空间，感知均匀，计算效率高。L(亮度0-1)、a(绿-红轴)、b(蓝-黄轴)。适合渐变插值。

oklab(0.60 -0.08 0.07)

lch() — CIELCh颜色空间。L(亮度0-100)、C(色度)、H(色相)。比HSL更均匀，可表达超出sRGB的颜色。

lch(60% 54 280)

lab() — CIE Lab颜色空间。L(亮度0-100)、a(绿-红)、b(蓝-黄)。设备无关，覆盖人类可见所有颜色。

lab(60% -20 30)
FAQ & Modern Color Tips
Q: Why use OKLCH over HSL?

OKLCH is perceptually uniform — equal numeric changes produce equal visual changes. HSL has uneven brightness perception (e.g., yellow at 100% lightness looks much brighter than blue at 100%). OKLCH also unlocks the P3 wide gamut for 50% more vibrant colors on modern screens.

Q: What's the modern syntax for rgb/hsl?

Modern CSS uses space-separated values: rgb(255 128 0 / 0.8) instead of rgba(255,128,0,0.8). Both work, but the new syntax is cleaner and allows omitting alpha when not needed.

Q: Browser support for OKLCH?

OKLCH is supported in Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+. Global coverage is ~92% as of 2025. Use @supports (color: oklch(0 0 0)) for graceful fallbacks.

Q: What is P3 / wide gamut?

Display P3 covers ~50% more colors than sRGB. Colors defined with oklch() or color(display-p3 ...) can utilize these extra-vibrant colors on compatible displays (most modern phones and Macs).

Q: How to use CSS color functions with custom properties?

Define: --brand: oklch(0.65 0.25 260); — then use color: var(--brand); anywhere. You can even animate between color spaces with @property for smooth transitions.

Q: What's the difference between Lab and OKLab?

OKLab is a simplified, computationally efficient version of CIE Lab, designed for better performance in real-time applications. Both are perceptually uniform, but OKLab is preferred for web use due to simpler math and better gradient interpolation.

🔧 Related Tools