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
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.Swap with one click
Quickly exchange foreground and background colors to test different combinations.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.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).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
Convert HEX to HSL
Get the HSL equivalent of a hex color
Swap colors
Quickly test reversed foreground/background
Frequently asked questions
What is a color picker?
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?
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?
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?
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?
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?
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?
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.
CMYK to RGB
Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color Blindness Simulator
Preview how images and designs appear to people with protanopia, deuteranopia, tritanopia, and other color vision deficiencies
Color Escape Code Generator
Generate ANSI terminal color escape codes for styles, foregrounds, and backgrounds across bash, python, javascript, and more.