Color Code Format Converter

What HEX encodes

A HEX color is a string prefixed with # that encodes red, green, and blue as pairs of hexadecimal digits. The most common form uses six characters, splitting them into three channel pairs: the first pair sets the red intensity, the second sets green, and the third sets blue. Each pair is a base-16 number from 00 (decimal 0) to ff (decimal 255), which yields 16.7 million distinct combinations.¹ In that scheme #ff5500 means full red with no green and no blue, producing a saturated orange you will recognize from warning buttons and sale badges.

Shorthand notation like #f50 expands each single digit into a repeated pair, becoming #ff5500. This shorter form is only valid when both digits of each channel pair are identical, which is why #123 works but #124 does not. An optional seventh and eighth character encode the alpha channel on the same zero-to-255 scale, so #ff550080 represents that same orange at roughly 50% opacity.¹

RGB, HSL, and HSV explained

RGB expresses the same channel values as HEX in decimal notation: rgb(255, 85, 0) describes the very same orange as #ff5500. Browsers treat RGB as their native color format, so it is the most direct way to specify a color in CSS without any conversion step. Each of the three numbers maps to the red, green, and blue intensity in that order, which makes the relationship between the channels and the final color easy to reason about when you are tweaking values by hand.

How HSL and HSV describe a color

HSL (hue, saturation, lightness) and HSV (hue, saturation, value) trade that channel-level precision for a layout that feels more intuitive when you are adjusting a color by eye. Hue is a zero-to-360 degree angle on the color wheel, where 0 and 360 both land on red, 120 lands on green, and 240 lands on blue.² Saturation controls how vivid or grey the color appears. The third channel is where HSL and HSV diverge: in HSL a lightness of 100% gives white, while in HSV a value of 100% gives the brightest version of the hue itself.³ For adjusting brightness without washing a color out, HSV is often more predictable.

What makes OKLCH different

OKLCH stands for Lightness, Chroma, and Hue in the OKLab color space, and its defining property is perceptual uniformity. Equal numeric steps in any direction produce roughly equal perceived color differences, which is something HSL cannot guarantee.⁴ Two colors that share an identical HSL lightness value can look dramatically different in actual brightness to the human eye, because HSL lightness is computed from raw channel averages rather than from how people actually see luminance.

In practice, OKLCH is a reliable format for building color scales where every step should feel equally spaced from its neighbors. Modern browsers support it natively, so you can drop it straight into your CSS without any preprocessor or polyfill: color: oklch(0.65 0.18 30).⁵ That native support means the values you read in the converter are the same values the browser renders, which removes an entire class of surprises when a design moves from a mockup into production code.

How CSS named color matching works

CSS defines 148 named colors, from the obvious anchors like black and white to oddities such as rebeccapurple and papayawhip.² The CSS Named field finds the closest match for your current color, although closest here does not mean the smallest raw RGB distance. Colors like pink and brown can land on surprisingly similar red-green-blue triples while looking nothing alike to the human eye, which is exactly the kind of mismatch a purely numeric comparison gets wrong.

Why perceptual distance beats raw RGB

The matching algorithm measures perceptual distance in OKLab space, the same space that underpins OKLCH.⁵ Because that space mirrors how people actually judge color similarity, a muted red lands on firebrick rather than on a numerically close but visually distant alternative that a straight RGB comparison would pick. The small swatch displayed next to the field shows you exactly what the matched named color looks like, so you can judge how close the approximation is before you commit to copying it into your stylesheet.

Reading the WCAG contrast check

The contrast check compares text against your background using the contrast thresholds defined by the WCAG guidelines. The ratio scale starts at 1:1, where the text and background are indistinguishable, and climbs to a maximum of 21:1 for pure black text on a pure white background.⁶ The two panels in this tool show that ratio once with black text on your color and once with white text on your color, so you can immediately see which pairing gives you the more readable result.

The WCAG 2.1 thresholds are: AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text.⁶ AA LG means the 3:1 large-text threshold is met but not the 4.5:1 normal-text threshold. Fail means the ratio is below all thresholds.

Building color scales with perceptually uniform spaces

Design systems require color scales where each step looks equally distant from the last, and OKLCH delivers exactly that because it operates in a perceptually uniform space. The same numeric step in any direction produces roughly the same perceived change, regardless of which hue you are working with, so you can step through lightness or chroma and trust that the visual result will feel evenly spaced from the darkest token to the lightest one.

Where HSL scales fall apart

HSL cannot make that guarantee, because equal numeric steps in lightness produce unequal perceived brightness differences across different hues. Yellow at 80% HSL lightness looks markedly brighter than blue at that same 80% value, which is why HSL-generated scales appear visibly unbalanced when you render several swatches side by side against a neutral background. That inconsistency gets worse at the extremes, where HSL bunches shades together near black and spreads them unevenly near white, making it hard to design a ramp where every step reads as an equal jump.

Building tokens and multi-step scales in OKLCH

Adjusting chroma in OKLCH also preserves hue identity far better than adjusting saturation in HSL does. Reducing HSL saturation on a vivid blue shifts the perceived hue slightly toward purple as the color desaturates, whereas reducing OKLCH chroma on that same blue produces a less vivid blue with essentially no hue drift. For design tokens where you need both a saturated primary and a tinted background variant of the same color, OKLCH chroma reduction keeps the relationship between those two versions consistent across your entire palette. Tailwind CSS v3 and Radix Colors both lean on perceptual models to generate their ramps for exactly this reason.

Building a ten-step scale in OKLCH by moving the L channel from 0.1 to 1.0 in equal intervals produces steps that look visually equidistant from dark to light, while the same ten steps in HSL compress awkwardly at the dark end and stretch at the bright end. Checking the OKLCH values in this converter alongside the HEX output keeps your token definitions anchored in a format any modern browser renders natively, so you can verify the perceptual spacing of a ramp as you build it without switching to a separate color science tool. The contrast check panel then confirms that both the light and dark ends of your scale clear the WCAG thresholds your design system demands for readable text on those backgrounds.