Colour Converter

Convert colors between HEX, RGB, HSL, HSV and CMYK instantly — free online color converter.

About

About the Colour Converter

Takes a colour typed in almost any CSS format — HEX, rgb(), hsl(), or a named colour like "tomato" — or picked visually with the colour swatch, and converts it into HEX, RGB, HSL, HSV and CMYK all at once, plus its relative luminance and whether black or white text reads better on top of it.

Designers use it to translate a colour from a design tool's HSL value into the HEX code a developer needs, while developers use it to check whether a background colour needs light or dark text on top for readability. It's one of many free designer tools on Toolapt, and like every tool here, it's free to use with no sign-up and no limit on how many times you run it.

Choose what to view about this tool

Guide

Using the Colour Converter

  1. 1

    Step 1

    Type a colour in the text field — HEX, rgb(), hsl(), or a named CSS colour like "tomato" — or use the colour picker.

  2. 2

    Step 2

    Click "Convert" (or just keep typing; it updates live) to see every format at once.

  3. 3

    Step 3

    Read the HEX, RGB, HSL, HSV and CMYK values, plus the luminance and recommended text colour.

  4. 4

    Step 4

    Copy any value with its own "Copy" button, or click Clear to start over.

  • Accepts almost any CSS colour format as input — HEX, rgb(), hsl(), and named colours like "tomato"
  • Converts to five formats at once: HEX, RGB, HSL, HSV and CMYK, instead of one pair at a time
  • Includes a visual colour picker alongside the text field, so you don't need to know a colour's code to start
  • Calculates relative luminance and recommends black or white text for readability on that colour
  • Works entirely in your browser — no installs and no sign-up
  • Free to use, with no limit on how many times you run it
  • Fully responsive, so it works just as well on a phone as on a desktop

Designers

Designers use the Colour Converter for translating a colour from a design tool's HSL or CMYK value into the HEX code a developer can drop straight into code.

Developers

Developers use the Colour Converter for checking a background colour's luminance to decide whether light or dark text reads better on top of it.

Print designers

Print designers use the Colour Converter for getting the CMYK breakdown of a screen colour before sending artwork to a printer.

Anyone picking a colour

Anyone picking a colour uses the Colour Converter for turning a colour they like the look of into the exact code they need for code, design software or documents.

Examples

Colour Converter examples

4 worked examples

01

HEX to everything

Converting #3b82f6 shows rgb(59, 130, 246), hsl(217, 91.2%, 59.8%), hsv(217, 76.0%, 96.5%) and cmyk(76%, 47%, 0%, 4%), all from the same colour.

02

A named CSS colour

Typing "tomato" converts to #FF6347, or rgb(255, 99, 71).

03

RGB to HEX

Typing rgb(34, 197, 94) converts to #22C55E, a common shade of green.

04

Luminance and text colour

Converting #111827 shows a relative luminance of 0.009 and recommends white text, since the colour is very dark.

Related tools

Colour Blindness Simulator

Preview a photo as it might look under common types of colour vision deficiency.

Use it

Image Colour Palette Extractor

Pull the dominant colours out of a photo, with HEX codes ready to copy.

Use it

Colour Contrast Checker

Check the WCAG contrast ratio between a text colour and a background colour.

Use it

Color Picker

Pick an exact colour from an uploaded image, or from anywhere on your screen.

Use it

HEX to RGB Converter

Convert a HEX colour code to its RGB and RGBA values.

Use it

RGB to HEX Converter

Convert RGB (or RGBA) values to a HEX colour code.

Use it

FAQ

Frequently asked questions

Quick answers to common questions about the Colour Converter.

What does the Colour Converter do?

It converts a colour you type or pick into HEX, RGB, HSL, HSV and CMYK all at once, plus its relative luminance and the best text colour to use on top of it.

Is the Colour Converter free to use?

Yes. It's free, with no sign-up, no watermark and no limit on how many times you use it.

Is my input safe when I use this tool?

Yes. The colour you enter is processed entirely on your own device — nothing is sent to a server.

What colour formats can I type in?

HEX codes (with or without a leading #), rgb()/rgba() values, hsl() values, and any named CSS colour your browser recognizes, such as "tomato" or "steelblue".

How is the recommended text colour decided?

It's based on the colour's relative (WCAG-style) luminance — above a threshold, black text is recommended; below it, white text is recommended, for the best general readability.

Does it support transparency?

Yes. If you enter an rgba() or an 8-digit HEX with an alpha channel, the RGB output reflects that transparency and the swatch preview shows it against the page background.

Can I use the Colour Converter on my phone?

Yes. The page is fully responsive and works on mobile, tablet and desktop browsers alike.

Does the Colour Converter have any limitations?

It relies on your browser to parse the colour you type, so any format your browser's CSS engine recognizes will work; anything it doesn't recognize will show a message instead of a result.

Still have a question? Contact us

Report a problem

Colour Converter

What went wrong?
    or paste a screenshot