NineClip Free Tools

Color Code Converter

Convert any CSS colour between HEX, RGB and HSL — including named colours — right in your browser. It parses your input with the browser's own colour engine.

Developer Tools● Free No upload Instant

Loading Color Code Converter…

Your browser is preparing the tool. It runs 100% locally.

Quick Answer

Enter a colour as HEX, an rgb() value, or a CSS name, and the tool returns it in HEX, RGB and HSL, with a swatch preview. It works by handing your input to the browser's own CSS colour parser, so it understands anything CSS does — including all the named colours. Alpha is dropped from the HEX output and HSL values are rounded. It runs entirely in your browser; nothing is uploaded.

What the Color Code Converter Does

This tool takes a colour written in almost any CSS form and restates it in the three formats developers use most: HEX, rgb() and hsl(). Type a hex code, an rgb() expression, or a colour name like tomato or rebeccapurple, and all three representations appear together with a preview swatch.

It is the quick way to move a colour between notations — to get the hex for a named colour, the HSL for a hex, or the rgb() for any of them — without converting by hand.

How It Works

Rather than parse the colour itself, the tool applies your input as a CSS colour to a hidden element and reads back what the browser computed, which always comes out as an rgb() value. From those red, green and blue numbers it builds the hex code and calculates the hue, saturation and lightness for the HSL form.

Using the browser's parser is what makes it so flexible: anything CSS accepts as a colour works as input, including the full set of named colours and the various numeric syntaxes. If the input is not a colour the browser recognises, the tool reports that it is unknown.

Data source & conversion logic

  1. Apply the colour. Set your input as a CSS colour on a hidden element so the browser parses it.
  2. Read back RGB. Read the computed colour, which the browser returns as red, green and blue values.
  3. Build HEX. Convert the red, green and blue values into a hex code.
  4. Calculate HSL. Work out the hue, saturation and lightness and show all three formats.

What it outputs

any CSS colour (HEX, rgb(), or a name) → parsed by the browser → HEX · rgb() · hsl()
Worked example
#2563EB → HEX #2563EB · rgb(37, 99, 235) · hsl(221, 83%, 53%) · rebeccapurple → #663399

It accepts any colour the browser understands, including all named colours. Alpha (transparency) is dropped from the HEX, and the HSL numbers are rounded to whole values.

Standards & references

  • CSS colour values — CSS accepts colours as hex, rgb() and rgba(), hsl() and hsla(), and 148 named keywords. Because the tool uses the browser's parser, it understands all of these as input.
  • sRGB — The standard colour space for the web. The conversions between HEX, RGB and HSL all describe the same sRGB colour, so they are exact restatements of one another.
  • Named colours — CSS defines 148 colour names, from common ones like red and blue to rebeccapurple. Entering a name returns its exact hex, RGB and HSL values.

Accuracy & Limitations

The HEX, RGB and HSL outputs are exact restatements of the same colour, so converting between them is lossless apart from HSL being rounded to whole degrees and percentages for readability.

Alpha is not carried into the HEX output. The tool reads the solid red, green and blue channels and produces a six-digit hex, so a semi-transparent input loses its transparency in the hex form. Keep the rgba() value if you need the alpha.

It relies on the browser's colour support. Every standard CSS colour works, but a very new colour syntax that an older browser does not recognise would be reported as unknown on that browser.

It does not output every format. HEX, RGB and HSL are covered, but not CMYK or newer spaces like OKLCH — for those, a dedicated colour tool is needed. This one focuses on the three common developer notations.

Real-World Use Cases

Getting a hex from a name

Find the hex code for a CSS colour name like coral or teal.

Switching notations

Convert a hex to rgb() or hsl() for your stylesheet.

Normalising a colour

Turn an rgb() or named colour into a clean hex.

Checking a colour

Confirm a colour resolves to the values you expect.

When to use it — and when not to

Good for

  • Converting between HEX, RGB and HSL
  • Getting the hex of a named colour
  • Accepting any CSS colour as input
  • Normalising a colour to hex

Not the best choice for

  • Keeping an alpha/transparency value
  • CMYK or print colour output
  • Newer spaces like OKLCH
  • Building a full palette or scheme

To keep transparency, use the rgba() value rather than the hex. For CMYK, use an RGB-to-CMYK converter; for OKLCH or palettes, a dedicated colour tool. This converter covers the three common web notations.

Frequently Asked Questions

What colour formats can I enter?
Any colour CSS understands: a hex code, an rgb() or rgba() value, an hsl() value, or a colour name like tomato or rebeccapurple. The browser's parser handles them all, and the tool returns HEX, RGB and HSL.
Does it support named colours?
Yes. Enter any of the 148 CSS colour names and the tool returns its exact hex, RGB and HSL. It is a quick way to get the numeric values behind a name.
What happens to transparency?
The HEX output is solid — it drops the alpha channel. If your input is semi-transparent, keep the rgba() value to preserve the transparency, since a six-digit hex cannot represent it.
Are the conversions exact?
Yes, between HEX and RGB they are exact, and HSL is the same colour with its numbers rounded to whole degrees and percentages. Converting between the three returns the same colour.
Why is the HSL rounded?
For readability. Hue, saturation and lightness are shown as whole numbers, which is precise enough for design use. The underlying colour is unchanged; only the displayed HSL is rounded.
Why does it say my colour is unknown?
Because the browser did not recognise the input as a colour. Check for a typo in a name or hex, or an invalid syntax. Anything CSS accepts will work; anything it does not will be reported as unknown.
Does it output CMYK?
No. It covers HEX, RGB and HSL — the common web notations. For a CMYK approximation, use a dedicated RGB-to-CMYK converter, which is a print-oriented format.
How does it parse so many formats?
It uses the browser's own CSS colour engine rather than its own parser. It applies your input as a colour and reads back what the browser computed, so it understands every format CSS does.
Can I convert an rgb() value to hex?
Yes. Enter the rgb() expression and the tool returns the matching hex, along with the HSL. It works in any direction between the three formats.
Is this the same as the colour picker tools?
It overlaps, but this one is built for developers: it accepts any CSS colour as text input, including names and rgb()/hsl() syntax, and returns the three code notations. A picker is more about choosing a colour visually.
Is my colour uploaded anywhere?
No. The conversion happens entirely in your browser. Nothing is sent to a server.
Does it handle modern colour spaces like OKLCH?
It returns HEX, RGB and HSL. Whether a modern input syntax is accepted depends on the browser, but the outputs are the three classic notations, not OKLCH or other newer spaces.

References

Parses the colour with the browser's CSS engine, so it accepts any valid CSS colour (HEX, rgb(), or a name) and outputs HEX, RGB and HSL; honest that alpha is dropped and HSL is rounded.

PopularHot

JSON Formatter

JSON Formatter for developers — instant, offline-style and privacy-safe.

DeveloperOpen Tool
Popular

JSON Validator

JSON Validator for developers — instant, offline-style and privacy-safe.

DeveloperOpen Tool
Popular

Base64 Encoder

Base64 Encoder for developers — instant, offline-style and privacy-safe.

DeveloperOpen Tool
Popular

Hash Generator

Fast, free Hash Generator that runs entirely client-side in your browser.

DeveloperOpen Tool
Popular

UUID Generator

Fast, free UUID Generator that runs entirely client-side in your browser.

DeveloperOpen Tool
Trending

CSS Minifier

Fast, free CSS Minifier that runs entirely client-side in your browser.

DeveloperOpen Tool

Ready to try the Color Code Converter?

It is free, private and runs entirely in your browser — no sign-up, no uploads, no limits.

Use the tool now Explore Developer Tools