Toolkit
All tools
Design utility · Free

Color Picker & Converter

Move between HEX, RGB, HSL, and CMYK, test accessible contrast, and turn one color into a useful palette.

Colors stay in this browser
Live color
Current selection
#3159DE

Edit any color model on the right. Every other value and palette updates immediately.

Color values

Edit in the format you know.

HEX#3159DE
RGBrgb(49, 89, 222)
HSLhsl(226, 72%, 53%)
CMYKcmyk(78%, 60%, 0%, 13%)
Harmony palette

Colors that work around #3159DE.

Shade scale
Contrast checker

Readable together?

The quick brown fox

Preview normal and large text against the selected background.

Contrast ratio
5.81:1
Pass · AA textPass · AA largeFail · AAA textPass · AAA large
WCAG 2.2 contrast criteria
Saved swatches

Stored only in this browser.

Save useful brand, UI, or project colors for quick access on this device.
How it works

One color, every useful representation.

Choose the format that fits your workflow. Every conversion is recalculated from the active color so the controls stay predictable and in sync.

  1. 01

    Choose or enter a color

    Use the visual picker, type a HEX value, or edit individual RGB, HSL, or CMYK channels.

  2. 02

    Use every format

    All color models stay synchronized, ready to copy into CSS, design software, documents, or brand guidelines.

  3. 03

    Check and export

    Test foreground contrast, explore harmonious colors and shades, save swatches, or export the palette as CSS variables.

Built for design decisions

Conversion, accessibility, and palette work together.

Four synchronized formats

Move naturally between HEX, RGB, HSL, and CMYK without re-entering the same color or relying on rounded intermediate values.

WCAG 2.2 contrast checks

Measure the exact contrast ratio and see AA and AAA results for normal and large text against a second color.

Palettes ready for CSS

Explore complementary, analogous, and triadic colors, generate a shade scale, save swatches locally, and export CSS variables.

Color questions

Know what each value means.

How do I convert HEX to RGB?+

Enter a three- or six-character HEX color. The red, green, and blue channel values update immediately, along with HSL and CMYK.

What is the difference between RGB and CMYK?+

RGB mixes emitted red, green, and blue light for screens. CMYK estimates cyan, magenta, yellow, and black ink percentages for print workflows. Actual printed results still depend on printer and color profile.

What contrast ratio does WCAG require?+

WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA uses 7:1 for normal text and 4.5:1 for large text.

Are the generated palettes saved?+

Only swatches you explicitly save are stored in this browser. The active color and generated palette are calculated locally and are never uploaded.

Can I use the CMYK values for professional printing?+

Use them as a general conversion reference. Production printing requires an ICC color profile, substrate, ink, and press settings, which a browser-only mathematical conversion cannot model.

More focused tools, ready when you are.

Explore the growing collection for calculations, documents, writing, and everyday work.

Browse all tools