Color Picker
Pick any color and copy it in HEX, RGB, HSL or CMYK format.
About the Color Picker
The Color Picker uses the browser's native <input type='color'> widget to let you choose any color from the system color wheel or type a HEX code directly. Once selected, the picker shows the color as a swatch and converts it simultaneously to HEX, RGB, and HSL with copy-to-clipboard buttons next to each format. This is the fastest way to nail down the exact color you want without juggling three separate converter tools.
Most online color pickers are limited to HEX only or force you to convert between formats manually. Designers and developers usually need at least three representations of the same color: HEX for CSS, RGB for JavaScript canvas operations, and HSL for generating harmonious palette variations. This tool exposes all three with one click, plus the individual channel values for debugging.
The picker uses the OS-native color chooser, so on macOS you get the system-wide color picker (with saved swatches synchronized across apps), on Windows you get the standard Windows color dialog, and on mobile browsers you get a touch-optimized picker. Whatever you choose is converted instantly without a network round-trip.
How It Works
The HTML5 input type='color' element opens the operating system's native color picker, which is generally more accurate and ergonomic than a custom JavaScript widget. The browser returns the chosen color as a 7-character string in the form #RRGGBB, always lowercased and always 6 digits — you cannot directly pick transparency or use HSL through this input.
To convert the chosen HEX to RGB, the picker parses each two-character hex pair with parseInt(pair, 16). To convert to HSL it normalizes each channel to 0-1, finds the max and min channels, and applies the standard formula: lightness is the average of max and min; saturation is the chroma (max-min) divided by 1 - |2L-1| (when chroma is nonzero); and hue depends on which channel is the maximum, scaled to 0-360 degrees.
The output uses showOutput() rather than showResult() because the picker needs to render an inline swatch and three copy buttons — not a simple key/value list. The buttons call copyText() with the pre-formatted string so you can paste it directly into CSS, Figma, or a JavaScript file. All conversion happens client-side; the color you pick is never transmitted.
Worked Examples
Click the default swatch and the picker opens with #0A4F3A preloaded — a deep forest green. The output panel shows the swatch, three copy buttons, and the channel breakdown: RGB(10, 79, 58), HSL(164°, 78%, 17%), with hue 164° placing it in the green-cyan band. Clicking “Copy HSL” puts hsl(164, 78%, 17%) on your clipboard, ready to paste into a CSS file.
Now drag the picker to a vivid coral and watch the values update. A color around #FF6B6B reads as RGB(255, 107, 107), HSL(0°, 100%, 71%). The 0° hue marks it as pure red and 100% saturation means maximum chroma — useful if you want to generate an analogous palette by varying hue by ±30 degrees.
Pick pure black #000000 and notice the saturation reads 0% with hue 0° — the formula has no meaningful hue when chroma is zero. The same applies to pure white and all grays. This is normal and matches how CSS itself treats hsl(0, 0%, 50%) as equivalent to hsl(180, 0%, 50%) — both render as the same gray.
When to Use This Tool
- Picking a brand color from a designer's mood board and grabbing HEX/RGB/HSL in one click for the project's design tokens file.
- Sampling colors from a screenshot using the OS picker (on macOS, the system picker has an eyedropper that can grab any pixel on screen).
- Generating HSL variations of a chosen color by tweaking hue/saturation/lightness in your CSS, with the picker providing the source values.
- Verifying that a color you remember as ‘brand red’ is actually
#E63946rather than#FF0000before pushing it to production. - Picking accessible colors: choose a hue, then nudge lightness up or down to find a variant that passes WCAG contrast against your background.
- Coordinating colors across a small UI: pick the primary, then derive a 5-step monochromatic ramp by holding hue and saturation constant while varying lightness.
- Sampling a color from a Figma file and pasting it into a Tailwind config or a CSS custom property block.
Limitations & Disclaimer
The picker uses the native HTML5 input type='color' element, which is limited to opaque sRGB colors and does not support alpha, HSL input, named CSS colors, or wide-gamut color spaces (P3, Adobe RGB). The OS-native color picker UI varies by platform and may have its own limitations. HSL saturation is mathematically correct but not perceptually uniform — colors with the same saturation value may not appear equally vivid. For print work, convert the picked HEX to CMYK using a profile-aware tool. See our disclaimer for full terms.
Frequently Asked Questions
Why can't I pick transparent colors?
The native HTML5 color input supports only opaque sRGB colors. For RGBA or HSLA with alpha, pick the closest opaque color here and add the alpha channel manually (e.g., <code>rgba(255, 107, 107, 0.5)</code>). A future version may add an alpha slider.
Is the color I pick saved anywhere?
No. The picker runs entirely in your browser. Nothing is transmitted, logged, or stored on a server. If you refresh the page, the picker resets to its default value.
Why does the color look slightly different in my image editor?
Image editors often use color-managed workflows with ICC profiles. This picker works in plain sRGB. If your editor is set to Display P3 or Adobe RGB, the same HEX code will render with slightly different actual chromaticity. Convert the document's color space if exact match is required.
Can I paste a color name like 'rebeccapurple'?
The native picker accepts only HEX values, so pasting a named color won't work directly. Use the <a href='/tools/hex-to-rgb.php'>HEX to RGB converter</a> if you need to convert named CSS colors — or look up the named color's HEX value first (rebeccapurple is <code>#663399</code>) and paste it here.
Does this work on mobile?
Yes. On iOS Safari and Android Chrome, the color input opens a touch-friendly color picker. The copy buttons use the modern Clipboard API, which works on all current mobile browsers but may prompt for permission on first use.
Why does HSL saturation say 100% for very different reds?
Saturation in HSL is relative to lightness, so any color at maximum chroma for its lightness band reads 100%. A pastel pink and a vivid crimson can both be 100% saturation if they are the most saturated versions of their respective lightness levels. Use OKLCH if you need perceptually uniform saturation.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team