Pick color

HEX

RGB

HSL

Contrast ratio

Color conversion and contrast review

Convert HEX, RGB, and HSL values from the same color and check contrast against white and black backgrounds.

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.

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.

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.

Tools that pair well