About the Color Picker
Choose a color with the picker, an eyedropper or a code, and instantly get it in HEX, RGB, HSL, HSV and CMYK, along with tints and shades, matching color harmonies and accessibility contrast checks.
Key features
- Pick colors visually, by code or with the screen eyedropper
- HEX, RGB, HSL, HSV and CMYK in one place
- Tints and shades from light to dark
- Complementary, analogous, triadic and tetradic harmonies
- WCAG contrast ratios against white and black text
- Click any swatch to copy its HEX code
Pick, convert and pair colors
Find the perfect color for a website, logo, presentation or craft project. Choose a color with the picker, paste a code or grab one from your screen, and get it in every common format, along with matching palettes and accessibility checks.
Color formats explained
| Format | Example | Used for |
|---|---|---|
| HEX | #4F46E5 | Web design, CSS, design tools |
| RGB | rgb(79, 70, 229) | Screens, CSS, image editors |
| HSL | hsl(243, 75%, 59%) | Adjusting lightness and saturation in CSS |
| HSV/HSB | hsv(243, 69%, 90%) | Photoshop and other color pickers |
| CMYK | cmyk(66%, 69%, 0%, 10%) |
Color harmonies
| Harmony | Angles on the color wheel | Feel |
|---|---|---|
| Complementary | 0°, 180° | High contrast, energetic |
| Analogous | −30°, 0°, +30° | Calm, cohesive |
| Triadic | 0°, 120°, 240° | Balanced, vibrant |
| Split complementary | 0°, 150°, 210° | Contrast with less tension |
| Tetradic | 0°, 90°, 180°, 270° | Rich, needs a dominant color |
Building a palette for a website
- Pick a brand color for buttons and links.
- Use its tints and shades for hover states, backgrounds and borders.
- Add one accent from the complementary or triadic harmony.
- Check contrast: text on your brand color should reach at least 4.5:1.
Related tools
Make a favicon in your brand colors with the Favicon Generator, or style a QR code with the URL QR Code Generator.
How to use the Color Picker
- Open the tool. It's ready to use immediately, with nothing to install.
- Enter your entries, numbers or settings, or keep the defaults.
- Press the main button (spin, roll, start or generate) and watch the result.
- Repeat as often as you like; results are generated fresh each time in your browser.