Actions

Visual picker

HEX input

Alpha / Opacity

100%

Palette mode

Variable name

How this color converter works

Pick a color or type a HEX value and get RGB, HSL, CMYK, CSS/SCSS variables and a palette of shades and tints. Contrast tells you whether dark or light text reads better.

Copy the values into a design system, landing page or UI component. Check the palette on the real interface background, not only in the tool preview.

Convert HEX, RGB, HSL

Get the usual web formats from a single starting color.

Palette Shades and tints

Build darker and lighter steps for hover, border and background.

Contrast Readable text

See which text color works on a button, card or section.

Important: A generated palette is a starting point. Check accessibility on the real background and at the text size you will use.

Preview

Contrast check

Recommended text color

#FFFFFF

Brightness

HEX

HEXA

RGB

RGBA

HSL

HSLA

CMYK

CSS variable

SCSS variable

RGB array

Palette

Shades

Developer output

Useful notes

Use the contrast check before you choose text on buttons or cards.
Rename the CSS variable to match the real design-system token.
Validate shades and tints on the interface, not only in the preview.
CMYK is indicative on the web; print work needs a separate workflow.