Developer 🔒 Runs in your browser — no data sent to servers

Color Converter

Convert HEX, RGB, HSL, HSV, CMYK and OKLCH, build palettes and check contrast — in your browser.

Input Color

Pick:

Enter a color to convert...

How to Use

1. Paste a colour in any notation, or choose one with the colour picker — Auto-detect works out the format.
2. The Formats tab lists HEX, RGB, HSL, HSV, CMYK and OKLCH, each with its own Copy button.
3. The Palette tab builds an eleven-step scale of tints and shades plus complementary, analogous, triadic and tetradic harmonies.
4. The Contrast tab measures the WCAG ratio against any background and marks the AA and AAA thresholds.
Everything runs locally in your browser — nothing is sent to a server.

Frequently Asked Questions

What color formats are supported?

Input is auto-detected: HEX with or without the #, rgb() and rgba(), hsl() and hsla(), modern oklch(), hwb() and lab(), and all 148 CSS colour names. Output covers HEX, RGB, HSL, HSV, CMYK and OKLCH, and an alpha channel is carried through rather than dropped.

Can I pick a color visually instead of typing values?

Yes, use the color picker next to the input — it fills in the HEX value automatically and converts it.

Does it support shorthand HEX codes like #FFF?

Yes, 3-digit shorthand HEX codes are automatically expanded to their 6-digit equivalent.

Is this tool accurate for design work?

Yes, conversions use standard color-space math and match values you'd get in design tools like Figma or Photoshop.

Can it build a colour palette?

Yes. The Palette tab turns your colour into an eleven-step scale of tints and shades numbered 50 to 950, plus complementary, analogous, triadic, split-complementary and tetradic harmonies. Copy as CSS puts the whole scale on your clipboard as custom properties.

Does it check colour contrast for accessibility?

Yes. The Contrast tab reports the WCAG ratio against any background, marks AA and AAA for normal and large text and for non-text UI, and suggests the closest shade of the same hue that passes when a pairing falls short.

How do I convert HEX to RGB?

Paste the HEX code, with or without #, and the RGB value appears at once alongside HSL, HSV, CMYK and OKLCH. A 4- or 8-digit HEX keeps its alpha as rgba().

Can it convert to CMYK for print?

Yes. CMYK is listed with every conversion. It is a mathematical conversion, so check the result against a printed swatch for colour-critical work.

Color Converter - HEX to RGB, RGB to HEX and HSL Online

Updated September 30, 2026 · By Saman

Design tools hand you one colour format, CSS wants another, and the canvas API wants a third. This free colour converter takes any of the three common notations - #0A84FF, rgb(10,132,255) or hsl(210,100%,52%) - and gives you the exact equivalent in the format you actually need.

Paste the value, choose the output format, and click Convert. There is nothing to install and nothing to sign up for, and the conversion runs in your browser so it works while you are offline.

A HEX colour is three pairs of hexadecimal digits for red, green and blue. #0A84FF is rgb(10, 132, 255), and the very same colour written in HSL is hsl(210, 100%, 52%).

The three formats and when each one wins

Format	Looks like	Best for
HEX	`#0A84FF`	Design handoffs, brand guidelines, anywhere a colour is written down or pasted
RGB	`rgb(10, 132, 255)`	Canvas, SVG, image processing and any code that manipulates channels
HSL	`hsl(210, 100%, 52%)`	Design systems - adjust lightness for hover, disabled and dark-mode variants

Every format the converter returns

You do not have to say what you are pasting: Auto-detect reads a HEX code with or without the #, both the comma and the space syntax of rgb() and hsl(), modern oklch(), hwb() and lab() values, and all 148 CSS colour names. Alongside HEX, RGB and HSL you get HSV for colour pickers, CMYK for anything headed to print, oklch() for perceptually even design tokens, and the closest CSS colour name so a value is recognisable at a glance. An alpha channel - rgba(), hsla() or an eight-digit HEX - is carried through rather than dropped.

How to convert a colour

Paste your colour in any notation, or choose one with the colour picker - Auto-detect works out the format. In browsers that support it, such as Chrome and Edge on desktop, Pick from screen grabs the colour of any pixel on your screen; elsewhere the button does not appear.
The Formats tab lists HEX, RGB, HSL, HSV, CMYK and OKLCH; copy any line with the button beside it. It also names the colour: CSS name when it is exactly one of the named CSS colours, otherwise the Closest one.
Open the Palette tab for a ready-made scale of tints and shades plus complementary, analogous, triadic and tetradic harmonies.
Open the Contrast tab, set the background colour, and read the WCAG ratio with its AA and AAA verdicts.
Use Random to explore, or Clear to reset before the next value.

How a HEX colour code works

A HEX colour is three pairs of hexadecimal digits, one pair each for red, green and blue, with each pair covering the range 00 to FF - that is 0 to 255 in decimal. #FF0000 is full red, #000000 is black and #FFFFFF is white. When all three pairs repeat a digit, the shorthand form works: #FFF means #FFFFFF. A four- or eight-digit code adds an alpha channel, so #0A84FF80 is the same blue at roughly 50% opacity.

Why HSL is easier to reason about

HSL describes a colour the way people do: hue as an angle on the colour wheel, saturation as how vivid it is, lightness as how close it sits to white or black. That makes it the practical choice for building a palette. Take your brand hue, keep the saturation, and move only the lightness to generate a hover state, a disabled state, a border tint and a dark-mode variant that all clearly belong to the same family. Doing the same thing in HEX means guessing at six digits.

Build a whole palette from one colour

The Palette tab turns a single brand colour into the set you actually need. The Tints & shades scale keeps your hue and saturation and moves only lightness across eleven steps, numbered 50 to 950 like the scales in most design systems, so hover, border, disabled and dark-mode variants unmistakably belong together. Copy as CSS puts the whole scale on your clipboard as custom properties, ready to paste into :root.

Below the scale sit the colour-wheel harmonies: complementary (the opposite hue), analogous (neighbours 30 degrees away), triadic and Split complementary for balanced accents, and tetradic for a four-colour scheme. Click a swatch to copy its HEX, or double-click it to make it the current colour and build a new palette around it.

Check contrast before you ship

The Contrast tab measures the WCAG contrast ratio between your colour and any background. It reports the ratio to two decimals and marks every threshold pass or fail: AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1, AAA large text at 4.5:1, and UI components such as icons and input borders at 3:1. Swap exchanges the text and background colours in one click. A live sample shows the pairing at 16px and at 24px bold, because a ratio that fails for body copy can still be fine for a heading.

When a pairing falls short, the tool proposes the closest shade of the same hue that does reach 4.5:1, so you can fix the contrast without abandoning your brand colour. A translucent colour is composited onto the background first, because that is what a reader actually sees - checking the raw rgba() value would be too optimistic.

Where colour conversion comes up

Moving brand colours out of a design file and into CSS custom properties.
Setting fillStyle on a canvas or a colour attribute in an SVG, which prefer RGB.
Building HTML email templates, where HEX is the safest notation across clients.
Generating a consistent set of tints and shades for a design system.
Choosing chart and dashboard palettes where hues need even spacing.
Translating a colour from a screenshot or a brand PDF into something you can use in code.

Colour and readability

Converting a colour does not tell you whether text will be legible on it. Contrast depends on relative luminance, and the WCAG guidelines ask for a ratio of at least 4.5 to 1 for normal body text and 3 to 1 for large text. HSL lightness is a useful first approximation - if two lightness values are close, the contrast almost certainly is not enough - and the Contrast tab settles it exactly, for any pair of colours, before you ship.

Details worth knowing

Rounding. HSL uses whole degrees and percentages, so converting HEX to HSL and back can shift a channel by one. Keep one format as the source of truth.
Alpha. rgba() and 8-digit HEX carry opacity; a 6-digit HEX cannot represent it.
Percentages in RGB. rgb(100%, 0%, 0%) is valid CSS and means the same as rgb(255,0,0).
Wide-gamut colour. Newer CSS functions such as oklch() and color(display-p3 ...) can express colours outside the sRGB range that HEX cannot.
Named colours. CSS keywords like tomato map to fixed HEX values, but they are limited and hard to fit into a system.

Runs locally

The conversion is plain arithmetic performed in your browser. No colour you paste is uploaded, which matters when you are working with an unreleased brand palette.

The HEX to RGB formula, and the conversion in code

A HEX code is three bytes written in base 16. Split #0A84FF into 0A, 84 and FF, convert each pair to decimal (0A = 10, 84 = 132, FF = 255) and you have rgb(10, 132, 255). Going back, write each channel as two hex digits and pad with a zero when it is below 16.

Language	HEX to RGB	RGB to HEX
JavaScript	`parseInt(hex.slice(1, 3), 16)` for red, then 3-5 and 5-7	`'#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('')`
Python	`tuple(int(h[i:i+2], 16) for i in (0, 2, 4))`	`'#%02x%02x%02x' % (r, g, b)`
PHP	`sscanf('#0A84FF', '#%02x%02x%02x')`	`sprintf('#%02x%02x%02x', $r, $g, $b)`
CSS (modern browsers)	`rgb(from #0A84FF r g b)`	not needed - both notations are valid colour values

Related tools

Front-end work rarely stops at colour. Format design tokens with the JSON formatter, embed a small icon as a data URI with the Base64 encoder, find every colour code in a stylesheet with the regex tester, and convert asset images with the image converter. To turn the colours into gradients and shadows, use the CSS generator.