CSS Color Converter

• CSS Color
• Color Scheme Generator

Convert between CSS color notations including Hex, RGB, HSL, OKLCH and more.

About the Color Values

The conversion results above show the same color expressed in different color models and notations. Here is an explanation of each.

Hex

Hex (#rrggbb)

"Hex" is short for hexadecimal. This notation represents a color's red, green, and blue components as a six-digit hexadecimal number preceded by a hash symbol (#). For example, #ff0000 is red.

A three-digit shorthand exists for colors whose pairs repeat (e.g. #f00 for #ff0000).

Hex + Alpha (#rrggbbaa)

An eight-digit hex value appends two more digits to encode the alpha (opacity) channel, where ff is fully opaque and 00 is fully transparent. A four-digit shorthand (#rgba) is also available.

RGB

RGB (rgb(r, g, b))

The RGB model defines a color by its red, green, and blue components, each as an integer between 0 and 255 (or a percentage). In CSS this is written using the rgb() function, e.g. rgb(255, 0, 0) for red. Values may also be space-separated under the modern CSS Color Level 4 syntax.

RGB with alpha (rgb(r g b / a))

CSS Color Level 4 extended rgb() to accept an optional alpha value after a forward slash, making a separate rgba() function unnecessary. The alpha can be a number from 0 (transparent) to 1 (opaque), or a percentage. Example: rgb(255 0 0 / 0.5) is a 50%-transparent red.

RGBA (rgba(r, g, b, a))

rgba() is the older syntax for specifying an alpha channel alongside RGB values. It is now synonymous with rgb() with the slash notation, and is kept here for compatibility with older code and tools.

HSL

HSL (hsl(h, s%, l%))

HSL describes a color by its hue (position on the color wheel, 0–360°), saturation (intensity, as a percentage), and lightness (brightness, as a percentage). It is often more intuitive for designers than RGB. In CSS, use the hsl() function.

HSL with alpha (hsl(h s% l% / a))

The modern CSS Color Level 4 form of hsl() accepts an alpha value after a forward slash, just like rgb(). The space-separated form is preferred in new code.

HSLA (hsla(h, s%, l%, a))

The legacy function for HSL with transparency, equivalent to hsl() with a slash-alpha. Kept for backward compatibility.

HWB

HWB (hwb(h w% b%))

HWB (Hue, Whiteness, Blackness) was introduced in CSS Color Level 4. It shares the same hue angle as HSL but replaces saturation and lightness with the amounts of white and black mixed into the color. Many people find this model more intuitive: adding white lightens, adding black darkens, and adding both grays. Example: hwb(0 0% 0%) is pure red, hwb(0 50% 0%) is a pink, and hwb(0 0% 50%) is a dark red.

Append / alpha to include transparency: hwb(0 0% 0% / 0.5).

HSV

HSV

HSV (Hue, Saturation, Value) is similar to HSL but uses value (brightness) instead of lightness. It is widely used in color-picker UIs. Note that HSV is not a CSS notation (you cannot use it directly in a stylesheet) but it is a common intermediary format in design tools and applications.

CIE Lab & LCH

LAB (lab(L a b))

CIELAB (also written L*a*b*) is a perceptually uniform color space defined by the International Commission on Illumination (CIE). It is designed so that equal numerical differences correspond to roughly equal perceived differences in color. The three axes are:

• L* — lightness (0 = black, 100 = white)
• a* — green–red axis (negative = green, positive = red)
• b* — blue–yellow axis (negative = blue, positive = yellow)

Because Lab can express colors beyond the sRGB gamut, it is useful for color science and professional color work. In CSS, use the lab() function. Append / alpha to include transparency.

LCH (lch(L C H))

LCH (Lightness, Chroma, Hue) is the cylindrical form of CIELAB. It's the same perceptual space, but with a polar coordinate system. It is generally more intuitive for designers because hue and chroma (colorfulness) are independent axes:

• L — lightness (same as Lab)
• C — chroma (colorfulness; 0 = neutral gray)
• H — hue angle (0–360°)

In CSS, use the lch() function. LCH is excellent for creating accessible, perceptually balanced color palettes.

Oklab & Oklch

OKLAB (oklab(L a b))

Oklab is a modern perceptual color space created by Björn Ottosson in 2020. It improves on CIELAB by fixing hue-shift artifacts during interpolation, making it the preferred choice for gradients and color mixing in CSS. The axes are similar to Lab:

• L — lightness (0–1)
• a — green–red axis
• b — blue–yellow axis

In CSS, use the oklab() function. This is the recommended color space for gradient interpolation when perceptual uniformity is important.

OKLCH (oklch(L C H))

OKLCH is the cylindrical form of Oklab. It combines the perceptual advantages of Oklab with the intuitive hue/chroma model of LCH:

• L — lightness (0–1)
• C — chroma (colorfulness; approximately 0–0.4 for sRGB colors)
• H — hue angle (0–360°)

OKLCH is widely recommended for modern design systems because hue stays visually consistent as you adjust lightness or chroma. In CSS, use the oklch() function.

Wide-Gamut & Linear Spaces — color()

CSS Color Level 4 introduced the color() function, which accepts a color-space identifier followed by three channel values. These color spaces go beyond the standard sRGB gamut to take advantage of high-definition and wide-gamut displays. Append / alpha to any color() value to include transparency.

display-P3 (color(display-p3 r g b))

Display-P3 is the wide-gamut color space used by Apple displays (iPhones, Macs, iPads) and many modern monitors. Its gamut is roughly 35% larger than sRGB, allowing for more vivid reds, greens, and other saturated colors. Channel values are 0–1 (like sRGB), but values outside 0–1 represent colors outside both gamuts.

sRGB Linear (color(srgb-linear r g b))

This is the same color space as standard sRGB but without the gamma encoding — channel values are physically linear (light intensity). This makes it useful for shader math, physically based rendering, and situations where gamma correction is handled separately. Values are 0–1.

a98-RGB (color(a98-rgb r g b))

Adobe RGB (1998) is a wide-gamut color space designed for professional photography and print workflows. It covers approximately 50% of the visible CIE Lab colors, significantly more than sRGB. Uses a pure 2.2 gamma curve. Channel values are 0–1.

ProPhoto RGB (color(prophoto-rgb r g b))

ProPhoto RGB (also called ROMM RGB) is an extremely wide-gamut color space covering nearly the entire visible spectrum. It is used in high-end photography and RAW image workflows. However, a significant portion of its gamut is outside human vision, so out-of-gamut clipping must be handled with care. Uses a 1.8 gamma curve. Channel values are 0–1.

Rec. 2020 (color(rec2020 r g b))

Rec. 2020 (ITU-R BT.2020) is the color standard for Ultra HD (4K/8K) television broadcasts. Its gamut is larger than display-P3 and covers most of the visible spectrum. Channel values are 0–1 (normalized).

XYZ D65 (color(xyz-d65 x y z))

CIE XYZ is the foundational device-independent color space from which most other color spaces are derived. The D65 variant uses the standard daylight illuminant (6500 K), which is the white point used by sRGB, display-P3, and Rec. 2020. XYZ values can exceed 1 for colors brighter than the reference white.

XYZ D50 (color(xyz-d50 x y z))

The D50 variant of CIE XYZ uses a 5000 K illuminant, which is the standard for print proofing and is the white point used by CIE Lab, LCH, and ProPhoto RGB. The two XYZ variants relate to each other via Bradford chromatic adaptation.

Named Color

Color Name

CSS defines names for approximately 148 specific colors (plus transparent). Named colors are the easiest to read and remember, and are available in every browser. Not all colors have a name. If the selected color does not correspond to a named color, this field will show "None" in the above color converter.

See the named color chart and more about named colors.

Color Schemes

You can also enter your color into the color scheme generator to generate color schemes based on your color.

• CSS Color
• Color Scheme Generator