Color Studio

The color tools you reach for

Choosing the right color format

Every format on this page describes the same colors — they differ in what they make easy. HEX is the compact interchange format designers trade in, but its six hex digits tell you nothing by reading them. RGB exposes the raw red/green/blue channels, which matters when you're matching a value from a canvas or an image pipeline. HSL is the one to edit by hand: hue is an angle on the color wheel, so "the same blue, slightly darker" is just a lower lightness number. OKLCH, the modern CSS color space, fixes HSL's biggest flaw — in OKLCH, two colors with the same lightness value actually look equally bright, which makes it the best choice for building color scales that step evenly from light to dark.

What the contrast numbers mean

The contrast checker computes the WCAG luminance ratio between your text and background colors. The thresholds worth memorizing: 4.5:1 is the AA requirement for normal body text, 3:1 is enough for large text (roughly 24px, or 19px bold) and interface components, and 7:1 reaches the stricter AAA level. Gray-on-gray interfaces fail more often than designers expect — checking your actual muted-text color against your actual card background takes seconds here and routinely surfaces combinations that read fine on a bright studio monitor but vanish on a dim laptop.

Building palettes that hold together

The palette generator derives schemes geometrically from your base color's hue: complementary picks the opposite side of the wheel for maximum tension, analogous keeps neighbors for calm; triadic spaces three hues evenly for balance. The tints-and-shades ramp is the workhorse for interfaces — a well-stepped ramp of one hue covers backgrounds, borders, hovers and text states without inventing new colors. Generate, tweak the base, and copy each swatch in whichever format your codebase uses.

Step-by-step: fixing a contrast failure without redesigning

Open the Contrast tab and enter the two colours exactly as they appear in your stylesheet — a hex value, an rgb() or hsl() string, or a CSS colour name all parse — into Text color and Background color. The ratio updates live and the four badges tell you at a glance which thresholds pass: AA normal (4.5), AA large (3.0), AAA large (4.5) and AAA normal (7.0). The preview on the right renders a heading-size sample and a body-size sample in the actual pair, which is a better judge than the number alone. Suppose muted grey text (#8A8F98) on a dark card (#18181B) reports 4.1:1 — a near miss. Switch to the Converter tab, paste the text colour, and read its HSL line: nudge lightness up three or four points, paste the new hex back into the contrast tab, and you will usually cross 4.5:1 while the colour still reads as "the same grey". Doing it the other way — darkening the background — is often invisible too. Once both colours are settled, the Palette tab's tints-and-shades row for either colour gives you matching hover and border steps that stay in the same hue family.

How the conversions work under the hood

Every input is parsed to 8-bit sRGB first; that triple is the hub, and each format is a projection of it. HEX is the bytes in base 16. HSL is derived from the channel maximum and minimum: lightness is their average, saturation is their spread normalised by lightness, and hue is which channel dominates and by how much — cheap to compute, which is why HSL says nothing about perceived brightness. OKLCH is different: the channels are linearised (undoing the sRGB gamma curve with the 2.4 exponent), transformed through the LMS cone-response matrix, cube-rooted, and mapped to OKLab, whose L, a and b axes are then expressed as lightness, chroma and hue angle. That extra stage is what makes OKLCH lightness match human perception. The contrast checker uses the WCAG formula: each colour's relative luminance is computed from linearised channels weighted 0.2126, 0.7152 and 0.0722 for red, green and blue, 0.05 is added to both, and the lighter is divided by the darker. The palette generator stays in HSL for its geometry — complementary rotates hue by 180°, analogous by ±30°, triadic by ±120° — and the tints-and-shades ramp holds hue and saturation while stepping lightness through 90, 75, 60, base, 40, 25 and 15.

Real-world use cases

• Auditing a design token file. Paste each text/background pair from tokens.css into the contrast tab; the muted-text and placeholder-text tokens are where most AA failures hide.
• Converting a brand guide to CSS. Brand PDFs give HEX or sometimes RGB; the converter hands back oklch() strings so you can author modern CSS that interpolates smoothly in gradients and color-mix().
• Chart series colours. A triadic or analogous set from one base gives three to five distinguishable series; check each against white and against your dark-mode background before committing.
• Generating a neutral scale. Start from a slightly tinted grey rather than pure #808080, take the tints-and-shades ramp, and you have seven coordinated surface and border values that feel warmer or cooler on purpose.

Further reading

The WCAG colour contrast guide goes into the success criteria, non-text contrast and testing workflows; Glassmorphism and modern CSS effects shows how translucent layers change the effective contrast you need to check. Browse all guides.

Frequently asked questions