Skip to content

Color Picker & Contrast Checker

Pick colors, convert between formats (HEX, RGB, HSL, HSV, CMYK), and check WCAG contrast ratios in real-time.

Updated

What is the Color Picker & Contrast Checker?

Instantly pick, convert, and compare colors—all in one tool. Whether you're designing a website, checking accessibility, or fine‑tuning a brand palette, this color picker gives you accurate conversions and WCAG compliance results in real time.

Drop the guesswork. Choose a foreground and background color, see the contrast ratio, and verify that your design passes the latest accessibility standards. All common color formats are supported: HEX, RGB, HSL, HSV, and CMYK.

How it works

  1. Pick your colors
    Use the built‑in color wells or type a HEX code directly (with or without #). Short 3‑digit codes (like #ABC) are expanded automatically.

  2. Swap with one click
    Quickly exchange foreground and background colors to test different combinations.

  3. View conversions
    The tool instantly converts the selected color into all major formats: RGB, HSL, HSV, and CMYK. Copy any value with a single click.

  4. Check contrast
    See the contrast ratio between your two colors and confirm whether the combination passes WCAG 2.1 requirements for normal and large text (AA and AAA levels).

  5. Preview text
    A live text sample shows exactly how your content will look against the chosen background.

Examples

Check contrast

See if black text on white background passes WCAG AAA

Foreground: #000000, Background: #FFFFFF
Contrast ratio: 21.00, WCAG AAA passes for all text

Convert HEX to HSL

Get the HSL equivalent of a hex color

#3498db
HSL: hsl(207, 75%, 53%)

Swap colors

Quickly test reversed foreground/background

Foreground: #FF0000, Background: #0000FF
Contrast ratio: 2.52, WCAG fails; swap to see if it improves

Frequently asked questions

What is a color picker?

A color picker is a tool that lets you choose and fine‑tune colors visually, often by clicking on a gradient or entering a color code. This advanced picker also converts between color formats and checks text contrast.

How do I pick a color without a color well?

Type any valid HEX code in the input field (for example, #FF5733 or just FF5733). The tool will automatically update the color display and conversions.

What color formats does this tool support?

You can work with HEX (the common web format), RGB (red/green/blue), HSL (hue/saturation/lightness), HSV (hue/saturation/value), and CMYK (cyan/magenta/yellow/key – for print). Every selection is converted and shown in all formats.

How does the contrast checker work?

It calculates the relative luminance of your foreground and background colors and then computes the contrast ratio according to the WCAG 2.1 formula. It tells you whether the combination passes AA and AAA requirements for both normal and large text.

What is a good contrast ratio for accessibility?

WCAG 2.1 recommends at least 4.5:1 for normal text and 3:1 for large text to meet AA compliance. For the stricter AAA level, you need 7:1 for normal text and 4.5:1 for large text.

Can I copy the converted color values?

Yes. Each format (HEX, RGB, HSL, HSV, CMYK) has a copy button next to it. One click copies the value to your clipboard.

Why should I use this tool instead of a basic color picker?

Most basic pickers only show a single color. This tool gives you multi‑format conversion, real‑time contrast checking, and WCAG compliance results—all in one screen, helping you design faster and with better accessibility.

Related tools

More utilities you might find handy.

Color

CMYK to RGB

Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color

Color Blindness Simulator

Preview how images and designs appear to people with protanopia, deuteranopia, tritanopia, and other color vision deficiencies
Color

Color Escape Code Generator

Generate ANSI terminal color escape codes for styles, foregrounds, and backgrounds across bash, python, javascript, and more.