Free Color Picker & Palette Generator
Pick any color and instantly get HEX, RGB, HSL, and CMYK values. Generate complementary palettes, check WCAG contrast ratios, and save recent colors. Free, no signup.
Color Values
Color Harmonies
#24DCFF#ff4824Shades & Tints
#002b33#005566#008099#00aacc#00d5ff#33ddff#66e6ff#99eeff#ccf7ffWCAG Contrast Checker
#24DCFFWCAG AA requires 4.5:1 for normal text, 3:1 for large text (18px+ or bold 14px+). WCAG AAA requires 7:1.
Extract Colors from Image
🖼️ Drag and drop an image here to extract dominant colors
CSS Variables Export
:root {
--color-primary: #24DCFF;
--color-comp: #ff4824;
--color-light: #66e6ff;
--color-dark: #008099;
}What is a Color Picker?
A color picker is a tool that lets you select any color and retrieve its exact values in every digital format — HEX, RGB, HSL, CMYK, and more. Designers use color pickers to capture precise color codes for use in CSS, design tools like Figma, brand style guides, and print production workflows.
HEX vs. RGB vs. HSL — What's the Difference?
| Format | Example | Range | Best For |
|---|---|---|---|
| HEX | #FF5733 | #000000 – #FFFFFF | HTML/CSS, design tools, copy-paste |
| RGB | rgb(255, 87, 51) | 0–255 per channel | CSS, canvas rendering, image processing |
| HSL | hsl(11, 100%, 60%) | H: 0–360°, S/L: 0–100% | Creating tints, shades, and themed palettes |
| CMYK | cmyk(0%, 66%, 80%, 0%) | 0–100% per channel | Print production and offset printing |
How to Use This Color Picker
- Pick a color — use the visual color picker, type a known HEX value, or use the Eyedropper to sample from your screen (Chrome/Edge).
- Copy any format — click Copy next to HEX, RGB, HSL, or CMYK to grab the exact value for your project.
- Explore harmonies — choose a harmony type to see palette suggestions built from your selected color.
- Check contrast — use the WCAG contrast checker to verify your foreground/background combination passes accessibility standards.
- Extract from image — drag and drop any image to pull out its dominant color palette.
Generating Color Palettes
This tool generates six harmony types automatically from your selected color:
- Complementary — two colors directly opposite on the color wheel; high contrast, bold
- Analogous — three adjacent colors on the wheel; harmonious and natural-looking
- Triadic — three colors evenly spaced 120° apart; vibrant and balanced
- Tetradic — four colors at 90° intervals; rich and complex, requires careful balancing
- Split-Complementary — base color plus two colors adjacent to its complement; softer than full complementary
- Monochromatic — tints and shades of a single hue; clean, professional, easy to apply
WCAG Contrast & Accessibility
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for readable text. WCAG AA (minimum legal standard) requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA (enhanced) requires 7:1. Failing these thresholds can exclude users with low vision and create legal liability under ADA and EN 301 549. Use the contrast checker above to test any color combination before publishing.
Tips for Using Color in Design
- Apply the 60-30-10 rule — 60% dominant color (backgrounds), 30% secondary (sections), 10% accent (CTAs, links)
- Color psychology matters — blue signals trust and stability, red urgency, green health and finance, purple luxury
- Always check accessibility — use the WCAG contrast checker above before finalising text color combinations
- Stay consistent — define a palette of 3–5 colors and stick to it across your entire project
- Test in different contexts — colors look different on dark vs. light backgrounds, on screens vs. print, in day vs. night mode