Pick color

HEX

RGB

HSL

Contrast ratio

Color conversion and contrast review

Choosing UI colours means moving between HEX, RGB and HSL and checking they describe the same colour. All three notations line up here, alongside contrast against white and black backgrounds. Because contrast is determined by luminance rather than hue, raising saturation alone will not make text readable.

Normalize design tokens

Convert HEX values from design tools into RGB and HSL formats for CSS, JavaScript, and documentation.

Check readable contrast

See how the selected color performs against light and dark backgrounds before using it for UI text or icons.

Copy-ready output

Copy each color format directly into theme variables, component styles, or design notes.

Errors you will hit

It looks fine but fails the audit

Light grey text on a light background is the most common failure. If you cannot reach 4.5:1, darken the text or increase the size to qualify for the 3:1 large-text threshold.

Transparency is not accounted for

Contrast must be computed on the color the eye actually sees. For semi-transparent colors, enter the composited result rather than the source value.

Things to check

Contrast needs context

The ratio is a fast signal, but final accessibility depends on text size, font weight, state color, and surrounding background.

Use HSL for variants

HSL is useful when you want to keep hue stable while adjusting lightness or saturation for hover, disabled, and border states.

Contrast is luminance, not hue

Contrast ratios use relative luminance only. Two vivid colours of similar brightness score badly no matter how different the hues are. Widen the lightness gap, not just the colour.

Alpha changes the calculation

Text on a semi-transparent background is actually rendered against whatever is behind it. Computing contrast from the declared colour alone gives the wrong answer; check the composited colour instead.

HEX and HSL drift on round trips

HEX has 256 steps per channel while HSL uses degrees and percentages, so conversion rounds. Going HEX to HSL and back can shift a step or two. Keep design tokens in one canonical format and edit only that.

How to use it

Choose a base color with the picker or inspect the current HEX value.

Copy the RGB or HSL output that matches the code format you need.

Review contrast against white and black before using the color for text or icons.

Do a final check in the real UI with the actual background, font size, and weight.

Real input and output

One color in three notations

Input

#2DD4BF

Output

HEX  #2DD4BF
RGB  rgb(45, 212, 191)
HSL  hsl(173, 66%, 50%)

Body text contrast check

Input

Foreground #64748B on background #FFFFFF

Output

Contrast ratio 4.76:1
Passes AA for body text, fails AAA

WCAG asks for 4.5:1 (AA) and 7:1 (AAA) on body text, and 3:1 for large text.

Tools that pair well