CSS Color Function Reference
Modern CSS color functions explained. Syntax, browser support, Tailwind equivalents, and practical examples for oklch(), color-mix(), and more.
Each reference page includes the full syntax, parameter details, browser compatibility, practical examples, and the Tailwind CSS equivalent where available.
accent-color CSS Property
The accent-color property sets the accent color for UI controls like checkboxes, radio buttons, range sliders, and progress bars.
background-color CSS Property
The background-color property sets the background color of an element. It is painted behind any background images.
border-color CSS Property
The border-color property sets the color of an element's borders. It is a shorthand for setting all four sides or individual sides.
brightness() CSS Filter Function
The brightness() filter function adjusts the brightness of an element's rendering, making it lighter or darker.
caret-color CSS Property
The caret-color property sets the color of the text insertion cursor (caret) in editable elements like inputs and textareas.
color-contrast() CSS Function
The color-contrast() function selects the color with the highest contrast ratio against a base color from a list of candidates.
color-mix() CSS Function
The color-mix() function blends two colors in a specified color space by given percentages.
color-scheme CSS Property
The color-scheme property declares which color schemes an element supports (light, dark, or both), affecting UA default styles.
color() CSS Function
The color() function specifies colors in any predefined or custom color space, enabling wide-gamut colors like Display P3.
conic-gradient() CSS Function
The conic-gradient() function creates a gradient that sweeps around a center point, useful for pie charts and color wheels.
contrast() CSS Filter Function
The contrast() filter function adjusts the contrast of an element's rendering, affecting the difference between light and dark areas.
CSS Named Colors
CSS defines 148 named color keywords (plus transparent and currentColor) that map to specific RGB values, from aliceblue to yellowgreen.
CSS System Colors
CSS system colors are predefined keywords that map to the user's operating system color palette, essential for forced-colors mode compatibility.
currentColor CSS Keyword
The currentColor keyword resolves to the computed value of the color property on the same element, enabling DRY color inheritance.
forced-colors CSS Property
The forced-color-adjust property controls whether an element's colors are adjusted by forced-colors mode (e.g., Windows High Contrast).
forced-colors Media Feature
The forced-colors media feature detects when the user agent enforces a limited color palette, such as Windows High Contrast mode.
hsl() CSS Function
The hsl() function defines colors using Hue, Saturation, and Lightness, providing an intuitive cylindrical color model.
hue-rotate() CSS Filter Function
The hue-rotate() filter function rotates the hue of all colors in an element's rendering by a specified angle.
hwb() CSS Function
The hwb() function defines colors using Hue, Whiteness, and Blackness, offering an intuitive way to tint and shade colors.
invert() CSS Filter Function
The invert() filter function inverts the colors of an element's rendering, producing a photographic negative effect.
lab() CSS Function
The lab() function defines colors in the CIE LAB color space using lightness and two chromaticity axes.
lch() CSS Function
The lch() function specifies colors using CIE Lightness, Chroma, and Hue, offering a perceptually uniform color space.
light-dark() CSS Function
The light-dark() function returns one of two colors depending on the element's computed color-scheme (light or dark).
linear-gradient() CSS Function
The linear-gradient() function creates a gradient image transitioning between colors along a straight line.
oklab() CSS Function
The oklab() function defines colors in the Oklab perceptual color space using lightness and two chromaticity axes.
oklch() CSS Function
The oklch() function defines colors in the OKLCH color space using lightness, chroma, and hue.
opacity() CSS Filter Function
The opacity() filter function applies transparency to an element's rendering, affecting both content and background.
outline-color CSS Property
The outline-color property sets the color of an element's outline. Outlines differ from borders in that they do not affect layout.
prefers-color-scheme Media Feature
The prefers-color-scheme media feature detects the user's system-level preference for light or dark color themes.
prefers-contrast Media Feature
The prefers-contrast media feature detects the user's preference for increased or decreased contrast in the UI.
print-color-adjust CSS Property
The print-color-adjust property controls whether the browser may adjust colors for optimal print output or screen readability.
radial-gradient() CSS Function
The radial-gradient() function creates a gradient image radiating from a center point outward in an elliptical or circular shape.
Relative Color Syntax (from keyword)
Relative color syntax creates new colors by modifying individual channels of an existing color using the from keyword.
repeating-conic-gradient() CSS Function
The repeating-conic-gradient() function creates a repeating conic gradient pattern, useful for fan or starburst effects.
repeating-linear-gradient() CSS Function
The repeating-linear-gradient() function creates a repeating linear gradient pattern, tiling the color stops indefinitely.
repeating-radial-gradient() CSS Function
The repeating-radial-gradient() function creates a repeating radial gradient pattern, producing concentric rings or ellipses.
rgb() CSS Function
The rgb() function defines colors using Red, Green, and Blue channel values. Modern syntax also accepts an optional alpha parameter.
saturate() CSS Filter Function
The saturate() filter function adjusts the saturation of an element's rendering, making colors more vivid or muted.
text-decoration-color CSS Property
The text-decoration-color property sets the color of text decorations such as underlines, overlines, and line-throughs.
transparent CSS Keyword
The transparent keyword represents a fully transparent color (rgba(0,0,0,0)). It is valid anywhere a color value is accepted.
Frequently Asked Questions
Should I use oklch() or hsl() for colors?
oklch() produces perceptually uniform colors - equal steps in lightness look equal to human eyes. It has wide browser support now. Use it for new projects. HSL is fine for legacy support.
Does Tailwind CSS support these CSS functions?
Tailwind v4 uses oklch() internally. For v3, you can use arbitrary values like bg-[oklch(0.7_0.15_200)] or define custom colors in your config.