Color Picker

A color picker is a visual tool that lets you choose a color from a palette, eyedropper, or numeric input and read the same color back in the notations CSS supports: HEX (#3b82f6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)). All three notations describe a color in the sRGB color space defined by IEC 61966-2-1, the default working space for web browsers.

This color picker shows a native browser color swatch, a live preview chip, and three cards that recompute the same value in HEX, RGB, and HSL whenever you change the source color. Frontend developers, designers, and brand teams use a color picker to extract a value from a mock-up, to sample a brand color from a design system, to convert between notations without doing the math, or to confirm that the value in a CSS file matches the value in a Figma swatch.

Why use a color picker?

• Read the same color in every CSS notation at once. Change the swatch and HEX, RGB, and HSL update in lockstep, so you can paste whichever form your codebase prefers without manual conversion.
• Sample colors from a mock-up. Use the native browser eyedropper (where supported) to pull the exact color of a pixel in a Figma export or a screenshot.
• Verify token values against a design system. Confirm that #3b82f6 in your tailwind.config.ts resolves to the same HSL your designer specified.
• Choose accessible contrast pairs. Adjust lightness in HSL while keeping hue stable to find a darker variant that meets WCAG contrast ratios.
• Build CSS custom property palettes. Pick a base color and read off the HSL channels to derive --primary-h, --primary-s, and --primary-l tokens.

How to use the Color Picker

1. Click the native color swatch on the left and pick any color, or paste a HEX into the OS color dialog.
2. Watch the preview chip on the right update to confirm the new color.
3. Read the three result cards: HEX, RGB, and HSL.
4. Click the copy icon on any card to put that notation on your clipboard.
5. Drop the value into a CSS file, a design token, or a style= attribute.

Color models compared

Browsers accept the same color in several notations. The table below covers the four most common forms and when to pick each.

HEX and RGB describe the same color two different ways: HEX is base-16, RGB is base-10. HSL describes the color by where it sits on a color wheel (hue), how vivid it is (saturation), and how light or dark it is (lightness), which is far easier to reason about when generating tints and shades.

How color conversion works

The picker reads the HEX string, parses the red, green, and blue bytes, then converts to HSL using the standard formula from the CSS Color Module Level 3 specification.

// HEX → RGB
const r = parseInt(hex.slice(1, 3), 16); // "3b" → 59
const g = parseInt(hex.slice(3, 5), 16); // "82" → 130
const b = parseInt(hex.slice(5, 7), 16); // "f6" → 246
 
// RGB → HSL
const max = Math.max(r, g, b) / 255;
const min = Math.min(r, g, b) / 255;
const l = (max + min) / 2;
const s = l > 0.5
  ? (max - min) / (2 - max - min)
  : (max - min) / (max + min);
// h is computed from which of r/g/b is the max

All math runs in your browser. Nothing about the color you pick is sent to a server, which matters when you are sampling pre-release brand assets or product screenshots. The conversion is lossless: the same HEX always produces the same RGB and HSL, and vice versa, with rounding only at display time.

Common use cases

• Frontend developers translating Figma colors to CSS. Pick the swatch from a screenshot, copy the HEX into a Tailwind config, and copy the HSL into a :root token block.
• Designers verifying implementation. Open the live site, run the picker against a screenshot, and confirm the rendered color matches the spec.
• Brand teams documenting a palette. Pick each brand color and record the HEX, RGB, and HSL forms together in a style guide.
• Accessibility reviewers tuning contrast. Hold hue and saturation steady in HSL and walk lightness up or down until the pair clears 4.5:1 against the background.
• Marketing teams matching email colors to a website. Pull HEX values directly so the same color renders identically in HTML email and the production site.

Frequently asked questions

How do I pick a color from any pixel on my screen?

Use Chrome or Edge’s EyeDropper API by clicking the eyedropper icon in the native color dialog. The OS sampling tool then lets you click any pixel on the screen and returns its HEX. Safari and Firefox have not shipped EyeDropper yet, so they rely on the native color picker only.

What is the difference between HEX and RGB?

HEX and RGB describe the same red, green, and blue channels. HEX uses two hex characters per channel (#ff5733) and is compact and copy-friendly. RGB writes the same numbers in decimal (rgb(255, 87, 51)) and supports alpha as rgba(). Browsers treat both as identical sRGB colors.

Why use HSL instead of HEX?

HSL separates hue from lightness, which makes it easier to generate a darker or lighter variant of the same color without changing its character. Designers and CSS variable systems often use HSL for theming because adjusting one channel produces predictable results.

Are these colors accessible?

The picker shows raw color values, not contrast ratios. To verify accessibility, pass the foreground and background HEX values into a WCAG contrast checker. The minimum ratio for normal text is 4.5:1 (AA) or 7:1 (AAA).

What is alpha or transparency?

Alpha is the opacity channel, written as a decimal from 0 (fully transparent) to 1 (fully opaque) in rgba() and hsla(), or as a two-character hex suffix (#3b82f680 for 50% opacity). This picker shows opaque values; add alpha manually for translucency.

Does this picker support P3 or HDR colors?

No. The output is plain sRGB HEX, RGB, and HSL, which covers what every browser renders consistently today. Wider gamuts use color(display-p3 r g b) syntax and require explicit browser opt-in for now.

How do I convert a HEX color to RGB manually?

Split the HEX into three two-character chunks after the #, then read each chunk as a base-16 number. #ff5733 becomes r = 0xff = 255, g = 0x57 = 87, b = 0x33 = 51, so the RGB form is rgb(255, 87, 51).

Why does my browser show a slightly different color than my design tool?

Browsers render in sRGB by default. Design tools sometimes work in a wider color space and convert on export. If the screen color does not match, confirm that the design tool exported the swatch as sRGB and that no extension or display profile is shifting the rendered color.

Related tools

• HAR Viewer: Open and inspect HTTP Archive files captured from DevTools.
• User-Agent Parser: Decode any user agent string into browser, OS, and engine.
• Browser Info: Show your current browser, OS, language, and hardware capabilities.
• HEX ↔ RGB Converter: Convert color values between HEX and RGB notation.