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.
Worked examples
Tomato to RGB and HSL
Inputs: #ff6347
Result: rgb(255, 99, 71) · hsl(9, 100%, 64%)
Sky blue to RGB and HSL
Inputs: #3498db
Result: rgb(52, 152, 219) · hsl(204, 70%, 53%)
Color harmony types from a base hue
| Harmony | Hue angles | Typical use |
|---|---|---|
| Complementary | Base + 180° | High-contrast accent pairs |
| Analogous | Base ± 30° | Calm, cohesive schemes |
| Triadic | Base + 120° + 240° | Balanced, vibrant trios |
| Split-complementary | Base + 150° + 210° | Contrast with less tension |
| Tetradic | Base + 90°/180°/270° | Rich four-color schemes |
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
Why use Color Picker & Converter?
- Outputs all five color formats simultaneously so you never need a separate converter
- EyeDropper API samples pixels from any on-screen application or browser tab directly
- Adjustable opacity slider produces rgba and hsla values for semi-transparent UI elements
- HSL readout makes it trivial to find analogous colors by stepping the hue in degrees
Common use cases
- Sampling a brand color from a client logo screenshot to capture the exact HEX code
- Picking a button background and immediately reading its RGB value for a CSS variable
- Building a dark-mode palette by selecting base hues and exporting their HSL values
- Matching a CSS color token to a Figma fill by cross-referencing HSL readouts side-by-side
- Extracting the exact color from a competitor's UI element using the screen eyedropper
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
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 linear, radial, and conic CSS gradients with live preview controls. Copy production-ready gradient code instantly online.
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 Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
Color Name Finder
Find the name of any color by hex code or color picker. Get the closest CSS color name, Tailwind color name, and nearby alternatives.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
Explore all Color & Design.