Color Picker

How to Use the Color Picker

1. Open the native color swatch to pick visually from your operating system\'s color UI, or paste a value in HEX, RGB, or HSL.
2. Drag the opacity slider (0-100%) to set the alpha channel. A checkerboard background appears behind the preview swatch so you can judge the resulting transparency.
3. Read every synced output format to the right: #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), and hsla().
4. Click Copy next to any row to send that format to your clipboard. The matching CSS named color, if any, is also shown.

What the Picker Computes Under the Hood

The picker accepts any CSS Color Level 4 syntax for input. When you type or pick a new value the component parses it into a canonical RGB triplet in the sRGB color space, runs the RGB-to-HSL conversion described in CSS Color Module Level 4 § 7 (which is the Smith 1978 formula: lightness as the average of the max and min channels, saturation and hue derived from the chroma), and generates every output format from that canonical source. The alpha channel is kept as a floating-point number between 0 and 1 and appended to the output when non-100%. The native color input uses the browser\'s <input type="color"> element, which under the hood calls into the OS color picker - macOS\'s NSColorPanel, Windows\'s color dialog, or GTK\'s color chooser on Linux - so the visual picking experience matches the rest of your OS. The hex-to-rgb parser accepts 3-, 4-, 6-, and 8-digit hex with or without a leading hash, and lenient RGB and HSL parsers accept both the comma syntax (rgb(255, 0, 0)) and the newer space-separated syntax (rgb(255 0 0 / 0.5)) introduced in CSS Color Module Level 4.

When the Picker Earns Its Place in a Workflow

• Translating a brand color between a Figma design (HEX with alpha), a Tailwind config (HSL), and a legacy stylesheet (rgba).
• Dialing in a specific transparency for a toast notification or overlay where a designer handed off rgba(31, 41, 55, 0.65) and you want to visualize what 65% alpha actually looks like.
• Finding the CSS named color closest to a hex - useful for writing readable tutorials or documentation where crimson beats #dc143c for human scanning.
• Testing a color against a checkerboard to judge whether transparent UI chrome will be legible against a variable backdrop.
• Getting the 8-digit hex (#RRGGBBAA) form that Flutter, Android XML, and SwiftUI all accept for designing cross-platform UI.

Edge Cases the Picker Handles

Short-form hex (#f00) expands to #ff0000, and 4-digit hex (#f00a) to #ff0000aa. HSL lightness of exactly 0% or 100% yields a hue-independent result (black or white). Hue values modulo 360, so hsl(-30 100% 50%) resolves to hsl(330 100% 50%). One real gotcha is that HSL is not perceptual: pure yellow at hsl(60 100% 50%) and pure blue at hsl(240 100% 50%) have identical HSL lightness but look wildly different in apparent brightness. For perceptual work you should pair this tool with OKLCH, which solves that problem per Bjorn Ottosson\'s 2020 Oklab paper. The CSS named-color match also requires exact equality on all three channels, so #ff0001 does not report as red.

The CSS Color Module Spec Landscape

CSS Color Module Level 3 (2011) codified the classic HEX, RGB, HSL, and the 148 named colors. Level 4 (published 2022 as a Candidate Recommendation, widely implemented by 2023) added color() for non-sRGB color spaces, the space-separated rgb(R G B / A) syntax, hwb(), and - most importantly for modern design - the OKLCH and Oklab functions derived from the 2020 Ottosson paper. Level 5 is adding color-mix() and relative color syntax (oklch(from var(--primary) calc(l + 0.1) c h)). The picker currently operates in sRGB because that is the color space every display reliably renders; OKLCH conversions are surfaced by the companion converter tool for design tokens that need perceptual uniformity. The WCAG 2.1 contrast formula operates on sRGB luminance, so even when you author in OKLCH, the picker\'s RGB output is the ground truth for accessibility calculations.

Comparison to Coolors, Adobe Color, and DevTools

Coolors.co and Adobe Color are palette generators first and color editors second - they help you find a set of colors but they do not excel at inspecting a single hex with its alpha channel and nearby format conversions. Chrome DevTools has a built-in color picker that pops up when you click a color swatch in the Styles panel; it is the best tool for sampling a color from an existing page via the eyedropper feature, but it does not give you the full side-by-side format grid this picker does. macOS has its own Digital Color Meter system utility for sampling pixels from the screen. Use this picker when you are authoring a color from a brand spec and need every format at once; use DevTools when you are reverse-engineering a color on a live page; use Digital Color Meter when the source is a native app or image.