Color Picker & Converter

Pick a color and instantly convert between HEX, RGB, HSL, and CMYK.

#2563EB
R37
G99
B235
HEX#2563EB
RGBrgb(37, 99, 235)
HSLhsl(221, 83%, 53%)
CMYKcmyk(84%, 58%, 0%, 8%)

Contrast Ratios (WCAG)

vs white5.17:1AA Pass
vs black4.06:1Fail

Color Shades

Click a shade to select it

About Color Picker & Converter

This color tool lets you pick any colour from the native browser color wheel or type in a HEX code, and instantly converts it to RGB, HSL, and CMYK equivalents. It also generates a palette of shades and calculates the WCAG contrast ratio against white and black, helping you make accessible colour choices.

Color format guide

  • HEX — 6-character hexadecimal code (e.g. #3b82f6). The standard format in CSS, HTML, and design tools.
  • RGB — Red, Green, Blue values from 0–255. Used natively in CSS and in many image editors.
  • HSL — Hue (0–360°), Saturation (%), Lightness (%). Intuitive for generating colour variations: adjust lightness to create tints and shades.
  • CMYK — Cyan, Magenta, Yellow, Key (Black) percentages. The standard model for print design and physical media.

WCAG contrast ratio

The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against the background. The contrast checker in this tool tells you whether your chosen colour passes AA or AAA accessibility standards when used on a white or black background.

About the Color Picker

A color picker lets you pick a colour interactively and read its value in every common notation — HEX (#RRGGBB), RGB, HSL, and CMYK. Each notation has its own use case: HEX dominates web development, RGB matches how monitors emit light, HSL is the most intuitive notation for adjusting brightness or saturation, and CMYK is the only correct choice when designing for print.

Along with the colour's numeric value, the tool shows lighter and darker shades, a complementary colour suggestion, and contrast information against black and white backgrounds — useful for quickly checking whether text will be legible over the chosen colour.

The four main colour models

RGB is additive: red, green, and blue light combine to produce all displayable colours on a screen. HEX is just RGB written in hexadecimal — #FF0000 means R=255, G=0, B=0. HSL re-parameterises RGB into hue (the position on the colour wheel), saturation (how vivid), and lightness (how bright). HSL is what designers reach for when they want to "make this colour 10% darker" without altering its character. CMYK is subtractive: cyan, magenta, yellow, and black inks combine on paper. Designs for print must specify colours in CMYK because RGB cannot reliably reproduce all printed colours and vice versa.

WCAG contrast and accessibility

The Web Content Accessibility Guidelines define minimum contrast ratios between text and background to ensure readability. WCAG AA requires 4.5:1 for normal-sized text and 3:1 for large text. AAA requires 7:1 and 4.5:1. This tool shows the contrast ratio of the picked colour against white and black, so you can immediately tell whether body text will be readable. For UI design, treat any ratio under 4.5 as unsafe for body copy.

How to use the Color Picker

  1. Pick a colour

    Use the colour wheel or paste a HEX/RGB value into the input field.

  2. Read every notation

    HEX, RGB, HSL, and CMYK values appear simultaneously, each with a copy button.

  3. Explore shades and contrasts

    Lighter and darker variants are shown alongside the contrast ratios with black and white text.

Worked examples

Example 1

Input: #2563EB (Tailwind blue-600)

Result: rgb(37, 99, 235) · hsl(221, 83%, 53%) · cmyk(84%, 58%, 0%, 8%)

A common web brand blue, with all four notations.

Example 2

Input: Lightening a brand colour by 10%

Result: Adjust HSL lightness from 50% to 60%.

HSL makes "lighter / darker" a single-coordinate change, which is awkward in RGB.

Real-world use cases

  • Picking brand colours and recording all four notation forms for a style guide.
  • Adjusting an existing colour to a slightly lighter or darker variant for hover states.
  • Checking that text will pass WCAG contrast requirements over a chosen background.
  • Translating a colour from a print design (CMYK) into the closest web (HEX) equivalent.
  • Sampling colours from a reference image for use in a CSS theme.

Tips & common mistakes

  • For hover and active states, change lightness in HSL by 5–10% rather than guessing in HEX — the result is more consistent.
  • CMYK to RGB conversion is approximate. For colour-critical print work, use ICC profiles and a calibrated workflow, not a free online tool.
  • A contrast ratio above 4.5 is the safety floor for body text. Aim for 7+ if you want your design to feel polished on low-quality monitors as well.

Frequently asked questions

Why does my colour look different on print versus screen?

Screens emit light additively (RGB), printers reflect it subtractively (CMYK). The two gamuts overlap but are not identical — many bright RGB colours cannot be reproduced in CMYK, and vice versa.

Is HSL the same as HSB or HSV?

HSL and HSV/HSB are related but not identical — they parameterise lightness/brightness differently. CSS uses HSL; many graphics tools default to HSV. Their hue and saturation values match; only the third coordinate differs.

Can I save a palette here?

Not currently — copy each HEX value into a notes app or a Figma palette. The tool itself is stateless by design.

How accurate are the CMYK values?

They use a standard mathematical conversion that ignores ink, paper, and printer calibration. For accurate print work, defer to your printer's ICC profile.

Related tools

→ CSS Gradient→ Hash Generator

Last updated: June 2026 · All processing happens locally in your browser.