Color Picker

About the Color Picker

The Color Picker is the front door to color work on the web. It uses the native HTML <input type="color"> element, which opens the operating system color picker and returns a 7-character hex string like #0A4F3A. The W3C HTML Living Standard requires the value to be lowercase 6-digit hex in sRGB; alpha is not supported on the native picker, so for translucent colors you need the Gradient Palette tool with an alpha channel or CSS oklch().

The picker’s value lives in sRGB (IEC 61966-2-1), the same color space CSS uses by default. That means a color chosen here matches what every modern browser paints to the screen, no conversion needed. Wide-gamut color spaces like Display P3 and Adobe RGB are not exposed through the native picker; if you need them, write the color() or oklch() function directly in CSS.

The output panel shows the color in three forms: HEX (the canonical web form), RGB (the form canvas APIs expect), and HSL (the form designers reach for when adjusting hue, saturation, and lightness). HSL is also what the Color Palette Generator uses internally to compute complementary, analogous, and triadic harmonies.

One under-appreciated feature of <input type="color"> is that the browser remembers the last picked color in the page session. If a visitor picks brand red and then navigates back, the picker still shows that color. This is why the default here is a deep green rather than black — a thoughtful default invites interaction.

How It Works

The browser’s color input returns a 7-character string beginning with #, followed by 6 hex digits encoding three 8-bit channels (red, green, blue). The picker converts that into RGB by parsing each 2-character hex pair as base-16 integer via parseInt(pair, 16).

The RGB-to-HSL conversion is the same algorithm published by the W3C in the CSS Color Module Level 4 specification. Normalize each channel to [0, 1] by dividing by 255. Find the maximum and minimum channel; lightness is the average of those two. If max equals min, the color is a gray and hue and saturation are both zero. Otherwise saturation is (max-min) / (2 - max - min) when L > 0.5, or (max-min) / (max + min) when L ≤ 0.5. Hue depends on which channel was max: red gives ((g-b)/d) % 6, green gives (b-r)/d + 2, blue gives (r-g)/d + 4; multiply by 60 to land in the 0-360 degree range.

The 3-digit shorthand (e.g. #0F4 expands to #00FF44) is shown only when each channel’s two digits are identical, since the shorthand format cannot represent any other value. #0A4F3A has no shorthand because the red channel is 0A, not 00 or 11 — the digits differ.

The preview swatch is rendered inline using CSS background. This is a faithful preview only in sRGB. Wide-gamut monitors that have ICC profiles applied by the OS may show subtle shifts.

Worked Examples

Default color #0A4F3A parses to R=10, G=79, B=58. HSL: H = 164 degrees (a green with a slight cyan lean), S = 77%, L = 17%. This is a dark, saturated forest green suitable for the primary call-to-action button on a light background.

Picking pure red #FF0000: R=255, G=0, B=0. HSL: H = 0 degrees, S = 100%, L = 50%. The maximum saturation and midpoint lightness are why pure red is so visually loud.

Picking white #FFFFFF: all channels maxed. HSL: H undefined (gray), S = 0%, L = 100%. The CSS keyword white maps to this exact value.

Picking #3366CC (a common link blue): R=51, G=102, B=204. HSL: H = 220 degrees, S = 60%, L = 50%. This sits in the WCAG AA range against white for normal-sized body text with a contrast ratio near 5.4:1.

When to Use This Tool

• Choosing a brand accent color and reading off its HEX, RGB, and HSL values for design-system documentation.
• Verifying that a color from a designer’s Figma file matches what the browser will actually paint (sRGB parity).
• Sampling the exact value of an on-screen swatch to copy into CSS or Sketch.
• Generating the HSL breakdown needed to plan an accessible color palette using hue shifts.
• Quick lookup of the per-channel decimal values required for canvas fillStyle and WebGL shaders.
• Sanity-checking a default color across the three formats before committing it to a style guide.
• Getting a 3-digit shorthand when one is available, to shave a few bytes from inline styles in performance-critical CSS.

Limitations & Disclaimer

The picker returns sRGB hex only; wide-gamut color spaces (Display P3, Adobe RGB, ProPhoto) are not exposed through the native HTML color input. The HSL conversion matches the W3C CSS Color Module Level 4 algorithm but is not perceptually uniform — for accurate perceptual steps use OKLCH. The preview swatch renders in the browser’s current color profile, which may differ slightly from print or other devices. For print work, convert to CMYK using an ICC profile from your printer; the naive RGB-to-CMYK formula here is only approximate. See our disclaimer for full terms.

Frequently Asked Questions

Last updated: September 9, 2026  ·  Author: HT99 Tools Editorial Team