PFVPFV Tools
All tools

Colour Converter

Convert between RGB, HEX, HSL, and CMYK colour spaces.

  • rgb
  • hsl
  • cmyk
  • hex

About Colour Converter

Every digital design tool, browser, and screen uses a slightly different way of describing colour. HEX values like #6366f1 live in CSS and Figma. RGB triplets are how monitors physically render colour. HSL is friendlier for adjusting colours by ear — bump the hue, drop the saturation. CMYK is the model used for print, expressing colour as the percentage of cyan, magenta, yellow, and black ink laid on white paper.

This converter holds one canonical colour and shows it in all four spaces at once. Edit any field and the others sync instantly. There's also a native colour picker, a "random" button for inspiration, and live contrast ratios against pure white and pure black so you can see at a glance whether your colour reads well as foreground or background.

How to use

Edit the colour in whichever notation you prefer: type a HEX value, adjust the R/G/B numbers, tweak hue/saturation/lightness, or set CMYK percentages. The big swatch at the top updates immediately and the other panels follow.

Click the "Pick" button to use your operating system's native colour picker, or "Random" to generate a fresh starting point. The two bars below the swatch show the colour's contrast ratio against white and against black — useful for spotting whether the colour reads better with light or dark text. Each panel has a copy button to lift its formatted value. The URL updates with the current colour so you can bookmark or share specific shades. Note: CMYK is shown as a mathematical conversion from RGB and won't match an actual printer exactly.

Frequently asked questions

  • What's the difference between RGB, HSL, and HEX?

    They're three ways of writing the same RGB colour. HEX (#6366f1) is a compact six-digit notation used in CSS and design files. RGB (rgb(99, 102, 241)) writes the same three channels as decimal numbers. HSL (hsl(239, 84%, 67%)) re-parameterises the same colour as hue, saturation, and lightness — friendlier when you want to tweak a colour without changing its underlying identity.

  • Why doesn't the CMYK match what my printer will produce?

    Because CMYK is device-dependent. Different inks, papers, and printer profiles produce different colours from the same CMYK values — and screen RGB is intrinsically wider than printable CMYK, so saturated screen colours simply can't be reproduced on paper. This converter uses a standard mathematical mapping that gives a reasonable starting point, but proofs from your print shop's actual profile remain the source of truth.

  • What do the "contrast vs white" and "contrast vs black" numbers mean?

    They're the WCAG contrast ratios between the chosen colour and pure white or pure black, on a scale from 1:1 (no contrast) to 21:1 (black on white). A higher ratio against black means the colour reads better as a foreground on dark backgrounds; a higher ratio against white means it reads better on light backgrounds.

  • Can I share a specific colour with someone?

    Yes. The HEX value is encoded in the URL as a "c" query parameter, so the page URL itself is a shareable link to the exact colour. Bookmark it, paste it into a chat, or include it in design notes; opening the link in any browser restores the same colour.

  • Why are some HSL edits losing decimal precision?

    HSL hue is shown as a whole degree (0–360), saturation and lightness as whole percentages, so any decimal precision in the underlying RGB is rounded to the nearest integer when displayed. The canonical colour is held in RGB internally, so HEX round-trips exactly — HSL is intentionally lossy for ease of editing.

More Colour tools