🎨 Color Picker & Converter

Pick, convert, generate palettes, and check WCAG contrast. Runs in your browser.

HEX

RGB

HSL

HSV

CMYK

Generated Palettes

WCAG Contrast Check

Background:

Free Color Picker & Converter

Pick any color and instantly see it in HEX, RGB, HSL, HSV, and CMYK formats. Generate complementary, analogous, triadic, and shade palettes. Check WCAG contrast ratios for accessibility compliance. Use the eyedropper to pick colors from anywhere on your screen. All processing happens in your browser -perfect for designers and developers.

What is a Color Picker and Converter?

A color picker is a tool that lets you select, preview, and convert colors between different formats used in web design, graphic design, and software development. Colors can be represented in many ways: HEX codes (#FF5733), RGB values (rgb(255, 87, 51)), HSL notation (hsl(11, 100%, 60%)), HSV, and CMYK for print. Each format serves a different purpose, and designers and developers frequently need to convert between them. This tool handles all five formats simultaneously, updating every value in real time as you adjust the color.

Beyond basic color conversion, this tool generates color palettes (complementary, analogous, triadic, shades, and tints) and includes a WCAG contrast checker for accessibility compliance. Designers use it to build cohesive color schemes, developers use it to grab exact color values for their CSS, and accessibility specialists use the contrast checker to verify that text is readable against background colors. The eyedropper feature lets you pick colors directly from anywhere on your screen (in supported browsers). Everything runs client-side in your browser with no data uploaded or stored.

How to Use This Tool

Pick a color using the color picker widget on the left, type a HEX code directly into the HEX field, or click "Eyedropper" to sample a color from anywhere on your screen.
View the color in all five formats (HEX, RGB, HSL, HSV, CMYK) on the right side. Click "Copy" next to any format to copy its value to your clipboard.
Scroll down to see auto-generated palettes: Complementary, Analogous, Triadic, Shades, and Tints. Click any swatch to select that color and copy its HEX value.
Use the WCAG Contrast Check section at the bottom to test your selected color against a background color. The tool displays the contrast ratio and WCAG compliance grade (AAA, AA, AA Large, or Fail).

Key Features

Five Color Formats - Instantly convert between HEX, RGB, HSL, HSV, and CMYK with one-click copy for each format.
Palette Generator - Automatically generates Complementary, Analogous, Triadic, Shades, and Tints palettes based on color theory, giving you a complete color scheme from a single starting color.
WCAG Contrast Checker - Test your color against any background to see the contrast ratio and WCAG accessibility grade. Essential for ensuring your designs meet accessibility standards.
Eyedropper Tool - Pick colors directly from your screen using the browser's native EyeDropper API (available in Chrome and Edge). No extensions or plugins needed.
Interactive Swatches - Click any swatch in the generated palettes to immediately select that color as your active color, making it easy to explore variations.

Frequently Asked Questions

What is the difference between RGB, HSL, and HSV?

RGB (Red, Green, Blue) defines colors by mixing three light channels, with values from 0 to 255 each. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) both use a color wheel approach: Hue is the angle on the wheel (0-360 degrees), Saturation controls the intensity, and Lightness or Value controls the brightness. HSL and HSV are often more intuitive for designers because adjusting lightness or saturation is more natural than tweaking individual RGB channels.

What WCAG contrast ratio do I need?

WCAG 2.1 guidelines require a minimum contrast ratio of 4.5:1 for normal text (AA level) and 3:1 for large text (AA Large). For the highest accessibility standard (AAA), normal text needs a 7:1 ratio and large text needs 4.5:1. The contrast checker in this tool automatically grades your color combination and tells you which WCAG levels it passes.

When should I use CMYK instead of RGB?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in physical printing. If your design will be printed on paper, packaging, or other physical media, you should use CMYK values. RGB is used for screens and digital displays. The two systems represent different color gamuts, so colors can look slightly different between screen and print. This tool provides both so you can reference the correct values for your medium.

Why does the eyedropper not work in my browser?

The eyedropper feature uses the EyeDropper API, which is currently supported in Chromium-based browsers like Chrome, Edge, and Opera. Firefox and Safari do not yet support this API. If the eyedropper is unavailable, you can still use the color picker widget or type a HEX code directly to select your color.