Color Picker & Converter
The most complete color tool: convert between all color formats, generate tints & shades, and save your recent colors.
Tints & Shades
How to use Color Picker & Converter
Pick any color visually and instantly get its values in HEX, RGB, HSL, HSV, and CMYK formats — all in your browser with no data sent anywhere. Use the color wheel, hue/saturation sliders, or type a known value in any format to start. Essential for web designers, UI developers, and digital artists who need accurate color codes for CSS, design tools, or branding systems.
- Click anywhere on the color spectrum to select a hue.
- Drag the brightness/saturation selector to fine-tune the shade.
- Adjust the opacity slider if you need a semi-transparent color.
- Copy the value in your preferred format: HEX, RGB, HSL, or HSV.
- Use the eyedropper tool to sample a color directly from your screen.
Your data never leaves your device — 100% private processing.
Color format reference
HEX (#rrggbb) is the standard format for CSS and HTML — compact and universally supported. RGB (red, green, blue) with values 0–255 is used in CSS rgb() and design software color panels. HSL (hue 0–360°, saturation 0–100%, lightness 0–100%) is the most intuitive for adjusting colors programmatically — changing lightness alone lightens or darkens without shifting hue. HSV/HSB (hue, saturation, value/brightness) is used in most desktop design tools like Photoshop and Illustrator. CMYK is used for print production.
| Format | Range | Used in |
|---|---|---|
| HEX | #000000–#ffffff | CSS, HTML, design tokens |
| RGB | 0–255 per channel | CSS rgb(), canvas, SVG |
| HSL | H:0–360, S/L:0–100% | CSS hsl(), color logic |
| HSV | H:0–360, S/V:0–100% | Photoshop, Illustrator, Figma |
| CMYK | 0–100% per channel | Print/offset production |
Using the eyedropper for screen color sampling
The EyeDropper API (supported in Chrome, Edge, and Opera) lets you sample any pixel from anywhere on your screen — including other browser tabs, desktop applications, and images. Click the eyedropper icon, then click any pixel on screen to capture its color. This is particularly useful for matching brand colors from existing screenshots, extracting palette colors from design mockups, or checking the actual rendered color of a CSS value.
Glossary
- Hue
- The pure color attribute on the color wheel, measured in degrees from 0° (red) to 360° (back to red).
- Saturation
- The intensity or purity of a color — 0% is grey, 100% is the most vivid version of that hue.
- Lightness
- In HSL: 0% is black, 50% is the pure color, 100% is white.
- Alpha
- The transparency of a color, from 0 (fully transparent) to 1 (fully opaque) in CSS notation.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Color Picker & Converter?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
Related Color & Design
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
Image Color Extractor
Extract dominant colors from any image. Upload a photo and instantly get the top colors as HEX and RGB values. Free online color palette extractor.
Color Shades & Tints Generator
Generate a full color scale from any color. Create 9 shades and 9 tints with Tailwind-style naming (50-900). Copy as CSS variables or Tailwind config.
Explore all Color & Design.