What color formats does this tool output?

HEX, RGB (with RGBA), HSL, HSV, and CMYK. Values update live as you drag the color picker — click any copy button to put the value on your clipboard instantly.

What is the WCAG contrast checker for?

WCAG 2.1 requires a 4.5:1 contrast ratio between text and background for AA compliance (7:1 for AAA). The contrast panel shows your selected color against black and white, flagging whether it meets the standards for normal text and large text (18pt+).

What are color harmonies?

Color harmonies are palettes that work visually based on positions on the color wheel. Complementary (opposite hue), analogous (adjacent hues), triadic (120° apart), and split-complementary variations are generated automatically from your current color.

What is the difference between HSL and HSV?

Both use Hue and Saturation, but differ in the third channel. HSL Lightness reaches pure color at 50% and white at 100%. HSV Value reaches pure color at 100% (never white). HSV is used internally by Photoshop, Figma, and this picker's gradient canvas.

Color Picker.

Pick any color and get it in every format — HEX, RGB, HSL, HSV, CMYK. Explore harmonies, check WCAG contrast, and fine-tune every channel. All local, nothing leaves your browser.

Hue

210°

Alpha

100%

HEX

Current

Color Space Reference

palette

HEX / RGB

Hexadecimal is the dominant web format — three byte-pairs for red, green, and blue (0–255). Identical to RGB, just written base-16 for compactness. RGBA/HEXA add an alpha byte for transparency.

tune

HSL / HSV

Human-centric models. Hue is the color angle (0–360°), Saturation the vividness. Lightness (HSL) centres on 50% for pure color; Value (HSV) peaks at 100% for pure color. HSV is used internally by this picker.

CMYK

Subtractive model used in print. Cyan, Magenta, Yellow, and Key (Black) inks absorb light rather than emit it. The values shown here are an RGB→CMYK approximation; true CMYK output depends on ICC profiles and the physical press.

accessibility_new

WCAG Contrast

WCAG 2.1 requires a 4.5:1 ratio for normal text (AA) and 7:1 for AAA. Large text (18pt+/14pt bold+) needs only 3:1 for AA. Ratios are based on relative luminance — a perceptual measure independent of hue.

What Is a Color Picker?

A color picker is a tool that lets you select a precise color visually and export it in whatever format your workflow requires. Web developers reach for HEX and RGB; CSS authors prefer HSL because the hue angle maps directly to the color wheel; print designers use CMYK; accessibility auditors check WCAG contrast ratios. This picker outputs all of them simultaneously — change one and everything updates instantly.

Key Features

Five color formats: HEX (#RRGGBB), RGB (0–255), HSL (hue, saturation, lightness), HSV (hue, saturation, value), and CMYK — all shown at once with copy buttons.
Alpha transparency: Hue, saturation/value, and alpha sliders let you pick any color including semi-transparent values. Output includes RGBA and #RRGGBBAA variants.
Color harmonies: Instantly see complementary, analogous, triadic, and split-complementary palettes based on your selected color.
WCAG contrast checker: Shows the contrast ratio of your color against black and white, with AA and AAA pass/fail for normal and large text.
Color history: Recently picked colors are saved in the session so you can revisit them without re-picking.
HEX quick input: Type or paste any HEX code directly — the picker jumps to that color immediately.

How to Use the Color Picker

Drag the circular cursor on the gradient canvas to select saturation and brightness.
Drag the hue slider to change the base color.
Use the alpha slider to control transparency (100% = fully opaque).
Click any copy button next to a format value to copy it to your clipboard.
Type or paste a HEX code into the HEX field to jump directly to any color.

Color Space Guide

HEX and RGB are numerically identical — HEX is base-16 shorthand for three RGB channels (red, green, blue), each 0–255. Both are the standard web formats used in CSS and HTML. HSL describes the same color space in perceptual terms: hue (angle on the color wheel, 0–360°), saturation (vividness, 0–100%), and lightness (brightness, 0–100%). HSV replaces lightness with value — more commonly used in graphic editors like Photoshop and Figma. CMYK is the subtractive model for print: inks absorb light rather than emit it, and the K (Key/Black) channel reduces ink usage.

Frequently Asked Questions

What color formats does this tool output?: HEX, RGB (with RGBA), HSL, HSV, and CMYK. Values update live as you drag the color picker — click any copy button to put the value on your clipboard instantly.
What is the WCAG contrast checker for?: WCAG 2.1 requires a 4.5:1 contrast ratio between text and background for AA compliance (7:1 for AAA). The contrast panel shows your selected color against black and white, flagging whether it meets the standards for normal text and large text (18pt+).
What are color harmonies?: Color harmonies are palettes that work visually based on positions on the color wheel. Complementary (opposite hue), analogous (adjacent hues), triadic (120° apart), and split-complementary variations are generated automatically from your current color.
What is the difference between HSL and HSV?: Both use Hue and Saturation, but differ in the third channel. HSL Lightness reaches pure color at 50% and white at 100%. HSV Value reaches pure color at 100% (never white). HSV is used internally by Photoshop, Figma, and this picker's gradient canvas.

Privacy & Security

All color picking and calculation runs locally in your browser. No color data is ever sent to any server.