A color picker is a tool that lets you select a color visually and instantly see its values in multiple formats — HEX, RGB, HSL, and CMYK. Designers, developers, and marketers use color pickers to match brand colors, ensure accessibility contrast ratios, and generate consistent color palettes.
Color format explained
HEX
The most common format on the web. A 6-character code representing red, green, and blue values in hexadecimal:
#3b82f6 → red: 3B (59), green: 82 (130), blue: F6 (246)
Used in HTML, CSS, and every design tool.
RGB
Defines colors by mixing red, green, and blue light intensities on a 0–255 scale:
rgb(59, 130, 246)
Used in CSS, image editing software, and screen-based design.
HSL
Hue, Saturation, Lightness — the most intuitive format for designers:
- Hue (0–360°): position on the color wheel
- Saturation (0–100%): intensity of the color
- Lightness (0–100%): how bright or dark
hsl(217, 91%, 60%)
HSL makes it easy to create tints (increase lightness) and shades (decrease lightness) without changing the hue.
CMYK
Cyan, Magenta, Yellow, Key (Black) — used in print design:
cmyk(76%, 47%, 0%, 4%)
CMYK is subtractive color (mixing inks), while RGB is additive (mixing light). Always convert to CMYK before sending files to a print shop.
Why different formats give different results in print
RGB colors are defined for screens and can represent colors that are outside the printable CMYK gamut. Bright blues, vivid purples, and neon greens on screen may appear duller in print. Always check your brand colors in CMYK if print materials are part of your workflow.
WCAG contrast ratios — accessibility
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors to ensure readability:
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
The contrast ratio formula compares the relative luminance of two colors. A black (#000000) on white (#ffffff) background achieves 21:1 — the maximum possible. Always check your text/background combinations before publishing.
Tints and shades
A tint is a color mixed with white (higher lightness in HSL). A shade is mixed with black (lower lightness). Using consistent tints and shades from a single hue creates a professional, cohesive design:
- Base color:
hsl(217, 91%, 60%) - Tint:
hsl(217, 91%, 80%)— lighter - Shade:
hsl(217, 91%, 40%)— darker
Most design systems (Tailwind, Material Design) define 9–11 tint/shade steps per color.
Complementary colors
The complementary color sits 180° opposite on the color wheel. Complementary pairs produce maximum visual contrast — useful for call-to-action buttons, highlights, and accent colors. For example:
- Blue
#3b82f6→ Complementary orange#f6943b
How to use the color picker free
- Go to Color Picker
- Click the color swatch to open your OS native color picker, or type a HEX/RGB/HSL value directly
- All formats update in sync — copy whichever you need
- View tints and shades — click any to make it the active color
- Check WCAG contrast ratio against white or black
- Copy the CSS variable format for use in your design system
Related tools
- Color Picker Pro — advanced color analysis and palette extraction from images
- Color Palette Generator — generate full palettes from a seed color
- Color Contrast Checker — check any foreground/background combination
- Color Gradient Generator — create CSS linear, radial, and conic gradients