COLOR PICKER & CONVERTER

Type a color as HEX, RGB or CMYK and the other formats update as you go. You can type with or without commas, and CMYK can be entered as decimals or whole numbers.

Color formats

Six-digit code, with or without the leading #.
Red, green and blue values from 0–255. Commas and the rgb() wrapper are optional.
Cyan, magenta, yellow and key (black). Decimals or whole numbers, with or without %.
Picking a named color fills the fields above with its exact value.

Live preview

Click or press Enter to switch black or white text
#3A6EA5

Click the swatch (or press Enter while it’s focused) to toggle the label between black and white text for a quick contrast check. Everything runs in your browser — nothing you type is uploaded or stored.

Coded by 2RE with help from DeepSeek.

How to use the picker

  1. Type in any field. HEX, RGB or CMYK — the other two update as you go.
  2. Commas are optional. 58, 110, 165, 58 110 165 and rgb(58,110,165) all work. So does bare digits with no brackets.
  3. Short hex is fine. #39f expands to #3399FF, the same way CSS does it.
  4. CMYK takes percentages or plain numbers. 65 33 0 35 and 65% 33% 0% 35% mean the same thing here.
  5. Or pick by name. The dropdown lists every CSS colour name, from aliceblue to rebeccapurple.
  6. Check the swatch. The panel shows the colour as a background; click it (or focus it and press Enter) to flip the sample text between black and white.

A field with a typo flashes red and keeps the last valid colour — nothing breaks and nothing is submitted.

Reading the output

HEX is the one to copy

When you only need one value, take the HEX. It is what goes in a stylesheet, a brand document or a design token, and it is unambiguous.

RGB for screens and code

Use RGB when you are writing canvas or animation code, or when an app asks for three numbers rather than a code.

CMYK is an approximation

The CMYK values come from a plain formula, not a press profile, so treat them as a starting point rather than the number to send to a printer.

The black/white toggle on the swatch is an eyeball check for contrast, not a measurement. If you are choosing text and background colours for real, aim for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text, and confirm it with a contrast checker — roughly the same colour on both sides of the toggle is a warning sign.

Frequently asked questions

Yes, for HEX and RGB. Paste #3A6EA5, 3A6EA5 or 58, 110, 165 and it will resolve. What will not work is an eight-digit hex with transparency (#3A6EA5FF) — this tool has no alpha channel, so drop the last two digits and add the transparency in your own CSS.

Because the conversion runs in both directions through 8-bit RGB and rounds at each step, so a percent or two can disappear on the way back. It is inherent to screen-to-ink conversion without a colour profile, not a bug — and it is one more reason not to treat these as press-ready numbers.

No. Nothing is saved to your browser — reload the page and you are back to the default blue. That is deliberate: no storage means no cookie banner and no profile quietly building up. Copy the HEX you want before you leave.

No. Every conversion is done in your browser, and the named-colour list is part of the page. Unlike the OCR tool, nothing here is uploaded — there is nowhere for a colour to go.

Related tools

Shades of Green

Browse 583 greens with their HEX, RGB and CMYK values, and copy the one you want.

Color Tools

The rest of the colour collection, plus the HEX vs RGB vs CMYK explainer.