Color Converter

One color, every format at once.

One color, every format at once.

How to use it

  1. Paste a color. Any format: #4f46e5, 4f46e5, rgb(79, 70, 229), hsl(243 75% 59%), oklch(51% 0.23 277) or tomato.
  2. Read the row you need. Every format is worked out at once, so there is nothing to pick first.
  3. Copy it. Including a ready made CSS custom property line.

When you would use this

Most color converters make you pick a direction first, hex to RGB or RGB to hex, which means a separate page for every pairing and a wrong guess every other time. This reads whatever you paste and shows all of them at once. It accepts hex in three, four, six or eight digits with or without the hash, rgb() and hsl() in both the comma and the space syntax, oklch(), and any of the 148 CSS color names. OKLCH is included because it is what modern CSS uses and what a perceptually even palette is built in. Seeing it next to the hex is the quickest way to get a feel for what its lightness and chroma numbers mean. CMYK is the plain arithmetic conversion. It is useful for a rough idea and it is not a press profile, so the page says so rather than implying the numbers are ready to print.

Questions

Can I paste a color name?
Yes. All 148 CSS color names work, rebeccapurple and tomato included. The values behind them are checked against the browser's own color parser rather than typed in by hand.
Are the CMYK numbers safe to send to a printer?
No, and no web tool's are. Real separation depends on the paper, the ink and an ICC profile. This is the standard arithmetic conversion, which is fine for a rough idea and not for a press.
What about transparency?
Eight digit hex, rgba() and hsla() all work, and the alpha is carried through to every format that can express it. The hex output grows to eight digits when a color is not fully opaque.