Tools Hub
Españolالعربية

Color Converter

Convert any colour between HEX, RGB, HSL, HSV and CMYK, with WCAG luminance.

Browser onlyYour data never leaves this device.

Runs entirely in your browser. The colours you enter are never sent or stored.

Details: Privacy policy

Input

Hex (#rgb, #rrggbb, #rrggbbaa), rgb(), rgba(), hsl(), hsla(), or a CSS colour name.

Preview updates as you type. Alpha is shown only when below 1.

Result

HEX
#3366ff
RGB
rgb(51, 102, 255)
HSL
hsl(225, 100%, 60%)
HSV
225°, 80%, 100%
CMYK
80%, 60%, 0%, 0%
Relative luminance
0.1743WCAG 2.x formula, 0 for black and 1 for white.

Contrast on common backgrounds

These are WCAG 2 contrast ratios for this colour used as text. Body text needs 4.5:1 and large text needs 3:1. Use the contrast checker for a full pass/fail breakdown against your own background.

  • On white: 4.68:1
  • On black: 4.49:1

Picked value: #3366ff

Color Converter reads a colour written as hex, rgb(), rgba(), hsl(), hsla() or a common CSS name and returns the same colour in every format a designer or developer needs. Parsing and formatting share one implementation with the contrast checker, so a hex value cannot mean one colour on this page and another on the accessibility page. The output includes HEX, HEX with alpha, RGB, HSL, HSV, a mathematical CMYK approximation, and the WCAG relative luminance that decides contrast. Alpha is preserved where the format supports it, and the page says plainly when it is ignored by a calculation. A visual picker writes back into the same input, which makes the tool usable without memorising syntax. Everything is computed locally: no colour, palette or value is uploaded, and nothing is kept after you leave.

How to use Color Converter

  1. Type a colour or choose one with the picker.
  2. Read each format in the result panel.
  3. Copy all formats, or open the contrast checker for accessibility.

What you get

  • HEX and HEX8 values plus rgb()/rgba() and hsl() strings.
  • HSL, HSV and CMYK component values.
  • WCAG relative luminance and contrast against white and black.

When to use Color Converter

  • Translate a brand hex code into rgb() for a stylesheet.
  • Read the HSL values of a colour picked from a screenshot.
  • Check a colour's luminance before using it as text.
  • Convert a print CMYK estimate back to a screen colour.

Frequently asked questions about Color Converter

Is the CMYK value print-accurate?

It is a mathematical conversion from RGB, not a profile-based separation. Real print work needs the printer's ICC profile and a proof.

Does the converter support transparency?

Yes. Alpha is parsed from HEX8, rgba() and hsla(), preserved in the outputs that support it, and shown in the preview swatch.

Why do HSL and HSV look different?

They describe the same colour with different axes. HSL uses lightness, while HSV uses value, so the same RGB triple produces different numbers in each model.

Is contrast calculated with alpha?

No. WCAG contrast uses opaque colours, so the alpha channel is ignored for that figure. Composite the colour over its background first if transparency matters.

Tools related to Color Converter

⚡Embed Color Converter on Your Site & Get Badge↓

Embed this in-browser tool into any blog, documentation, or dashboard. Includes an optional dofollow backlink badge to credit Tools Hub.

Height:
<iframe src="https://salaq.com/embed/image/color-converter" title="Color Converter — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">Powered by <a href="https://salaq.com/tools/image/color-converter" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">Color Converter on Tools Hub</a></p>

Feedback

Send feedback about this tool (placeholder — feedback collection is not wired up yet).