Which value do I copy?
| Format | Looks like | Use it for |
|---|---|---|
| HEX | #4f46e5 | CSS, design handoff, config files. The web default. Add two digits for alpha: #4f46e5cc. |
| RGB | rgb(79 70 229) | Manipulating channels in code; rgb(… / .5) for opacity. |
| HSL | hsl(245 73% 59%) | Building palettes in CSS — hold hue, change lightness for tints and shades. |
| HSV / HSB | 245°, 69%, 90% | Matching a value shown in Figma, Photoshop, or Sketch. |
| CMYK | 65 69 0 10 | A rough starting point for print. Do the real conversion against the printer's ICC profile. |
Picking a color that isn't on this page
- From an image — the "From image" tab above. The file stays in your browser.
- From anywhere on screen — the eyedropper button uses the browser
EyeDropperAPI. It works in Chrome and Edge; Firefox and Safari have not shipped it, so on those, screenshot the area and use the image tab. - From a website's CSS — DevTools → Elements → click any color square in the Styles panel; it opens a picker with its own eyedropper.
Building a palette from one color
The shades & tints strip holds the hue and saturation fixed and walks lightness from near-black to near-white — that is how a design system generates its 50–900 scale from a single brand color. The harmony row rotates the hue: +180° for the complementary color, ±30° for analogous, ±120° for a triad. Click any swatch to load it as the active color.
Contrast and accessibility
WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text (24px, or 18.66px bold) and UI components. Contrast depends on relative luminance, not on HSL lightness, so check the real ratio with the contrast checker before shipping a text color.
Questions
How do I pick a color from an image?
Use the "From image" tab, drop an image, hover to preview, click to lock. The image is read with a canvas locally and never uploaded.
How do I grab a color from anywhere on screen?
The eyedropper button opens the OS picker in Chrome and Edge. Firefox and Safari don't support it yet — screenshot the area and use the image tab.
HSL vs HSV/HSB?
HSL's third channel is lightness (50% = pure hue, 100% = white). HSV's is value (100% = pure hue, no white). Figma and Photoshop use HSV; CSS uses HSL.
Convert HEX to RGB by hand?
Read each pair as base-16: #4f46e5 → 0x4f=79, 0x46=70, 0xe5=229.
Is the CMYK print-accurate?
No — it's a profile-less approximation. Convert against the real ICC profile in your layout tool for print.