Hex Color Picker
Free hex color picker — select any color visually and get HEX, RGB, HSL, HSV, and CMYK codes. Generate shades, tints, and color harmonies. No signup required.
Updated May 2026
This color meets WCAG 2.1 AA standards for normal text (4.5:1) on at least one background.
Shades & Tints
Color Harmonies
How to use the hex color picker
Visual canvas, five formats updated live
1. Click or drag on the canvas
Saturation runs along the X axis, brightness along the Y axis — fine-tune the hue on the rainbow bar below.
2. Or type a hex code directly
Paste any 6-digit code and the picker jumps straight to that color.
3. Copy and explore variations
Grab HEX, RGB, or HSL with one click, then browse shades, tints, and harmonies in the panels below.
What this hex color picker does
Five formats, shades, tints, and a built-in contrast checker
HEX, RGB, HSL, HSV, and CMYK
All five formats update simultaneously in real time as you move the picker.
Shades and tints
10 darker steps and 10 lighter steps generated automatically from your selected color.
5 color harmonies
Complementary, analogous, triadic, split-complementary, and tetradic — all one click away.
WCAG contrast checker
Shows whether your color meets the 4.5:1 ratio required for AA-level text contrast.
Nearest CSS color name
Calculates the Euclidean RGB distance to suggest the closest matching CSS keyword.
100% in your browser
No sign-up, no installs — everything runs locally on your device.
Conversion examples
When you'll reach for this tool
The scenarios that come up most often
Web development and UI work
Copy HEX or RGB straight into CSS, a Tailwind config, or your design tokens.
Accessibility audits
The WCAG checker flags contrast problems before they ship to production.
Building a design system
Use the shades and tints panel to build out a full color ramp from a single base hue.
Prepping colors for print
The CMYK values show how a screen color actually translates to ink.
Common mistakes
Mixing up HSL and HSV
Both share hue and saturation, but the third axis differs — see the comparison below.
Treating the nearest CSS name as an exact match
It's the closest keyword by RGB distance, not necessarily an identical color.
Expecting CMYK to reproduce a screen color exactly
Some vivid blues and greens fall outside the printable color gamut.
Why use this hex color picker
It combines format conversion, shade/tint generation, harmony exploration, and WCAG contrast checking on a single page — most color pickers online only convert between formats.
It shows HSL and HSV side by side, so you don't have to guess which one CSS expects versus what Photoshop uses internally.
HSL vs. HSV
Same first two axes, different third axis
Frequently asked questions
A hex code is the 6-digit hexadecimal representation of an RGB color, written as #RRGGBB. Each pair of digits represents one channel — RR for red, GG for green, BB for blue — on a scale from 00 to FF.
Resources
Related Tools
- Color Palette Generator Design Generate harmonious color palettes from any base color. Choose Analogous, Complementary, Triadic or Tetradic harmony — export as CSS variables or JSON.
- Color Contrast Checker Design Free color contrast checker — verify WCAG 2.2 AA and AAA compliance instantly. Live preview, color blindness simulation, and accessible color suggestions....
- Color Converter Design Convert colors between HEX, RGB, HSL, and CMYK instantly. Free online color picker with WCAG contrast checker and palette generator.
- Color Palette from Image Design Extract color palettes from any image — get HEX, RGB, HSL codes and export as CSS variables, Tailwind config, JSON, or PNG. 100% client-side, no upload.
- CSS Box Shadow Generator — Neumorphism, Glassmorphism & Tailwind Design Free CSS box shadow generator with live preview. Build shadows, neumorphism, glassmorphism effects. Export to CSS, Tailwind, or CSS variables. No signup.
