Skip to content

Color Converter & Picker

Convert between HEX, RGB, HSL and CMYK with WCAG contrast ratio checks.

Private Instant No sign-up No daily limit

Free to use. No account, no daily limit, and no watermark on the result.

 Colour Picker & Format Converter

Live conversion

HEX accepts 3 or 6 digits, with or without the leading #.

Current colour preview — click the harmony swatches below to try new hues.

Converted formats

HEX
#8B5CF6
RGB
rgb(139, 92, 246)
RGBA
rgba(139, 92, 246, 1.00)
HSL
hsl(258, 90%, 66%)
HSLA
hsla(258, 90%, 66%, 1.00)
HSV
hsv(258, 100%, 100%)
CMYK
cmyk(43%, 63%, 0%, 0%)

Harmony palette click any swatch to apply it

CSS custom properties

--color-primary: #8B5CF6;
100% private. Every conversion, contrast calculation and palette is computed locally in your browser. No colour data is ever uploaded or stored.
HEX · RGB · RGBA · HSL · HSLA · HSV · CMYK

 WCAG Contrast Checker

—

The picked colour above is used as the text colour.

Contrast ratio
—
WCAG level
—
AA normal · — AA large · — AAA normal · — AAA large · —

Live preview

The quick brown fox jumps over the lazy dog — body copy at 16px.

Large heading text

Small caption text, 13px — the hardest case for readability.

Normal text needs 4.5:1 (AA) or 7:1 (AAA). Large text (18.66px bold or 24px) needs 3:1 (AA) or 4.5:1 (AAA).

How to convert colours and check contrast

1

Pick or paste your colour

Use the native colour picker or type a HEX value such as #8B5CF6, #8b5cf6 or 8BC. The two controls stay in sync instantly.

2

Read every colour format

HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK are all calculated live and each card has its own copy button.

3

Test accessibility contrast

Pick a background colour to get the WCAG contrast ratio plus pass or fail badges for AA and AAA at normal and large text sizes.

4

Export your palette

Click a harmony swatch to apply complementary, analogous, triadic, tetradic, split-complementary or monochromatic colours, then copy them as CSS custom properties.

Color converter — frequently asked questions

HSL (hue, saturation, lightness) describes how a colour looks on a design canvas, while HSV (hue, saturation, value) describes how it behaves as pure pigment. HSL 100% lightness is white and 0% is black. In HSV, 100% value is the brightest version of the hue and 0% is black, while saturation still controls how colourless it becomes.

The ratio compares the relative luminance of the text and background colours. Each channel is normalised, weighted for human vision (0.2126 red, 0.7152 green, 0.0722 blue) and the result is scaled so the lightest colour is 1.0. A ratio of 4.5:1 passes AA for normal text, 7:1 passes AAA, 3:1 passes AA for large text and 4.5:1 passes AAA for large text.

This tool converts CMYK out of a colour, not back in, because CMYK is a print-specific subtractive model that depends on the ink profile and paper stock. Use the RGB or HSL values for screen work and treat CMYK as an approximate guide for print preparation.

No. The colour picker, every conversion, the contrast maths and the harmony palette all run in your browser with plain JavaScript. Nothing is transmitted, logged or saved on a server, so you can safely work with confidential brand colours.

Related Color & Design

Color Converter & Picker

Convert between HEX, RGB, HSL and CMYK with WCAG contrast ratio checks.

Open tool

CSS Gradient Generator

Create multi-stop linear and radial gradients and copy the CSS code.

Open tool

Image Palette Extractor

Extract the dominant colour palette and hex codes from any image.

Open tool