Color Picker
Online color picker tool, HEX, RGB, HSL format conversion, generate color schemes
What is a Color Picker?
A color picker helps choose, inspect, and convert colors for design and front-end development. The same color can be written in several formats: HEX is compact and common in CSS, RGB describes red-green-blue channel values, and HSL expresses hue, saturation, and lightness in a way that is often easier for palette adjustments. It helps translate a brand color into code, compare color systems, build a small palette, or check related swatches such as complementary and analogous colors. Color choice is not only aesthetic: contrast, readability, accessibility, print output, and display calibration all matter. Always test important UI colors against the final background and accessibility requirements.
How to Use
How to use
- Click the color picker to select a color, or enter a color value in the input field
- View conversion results in HEX, RGB, and HSL formats
- Click the copy button next to a format to copy the color value
- Refer to color schemes for complementary, analogous, and other combination suggestions
- Check shades and tints for darker and lighter variants of the same color
Color Tips
- Check contrast before using a color for text, icons, or controls; visually pleasing colors can still fail accessibility requirements.
- Use HSL when adjusting lightness or saturation, and use HEX or RGB when copying values into CSS or design tokens.
Use Cases
Technical Principle
All values in this tool live in the sRGB color space defined by IEC 61966-2-1, which is the assumed default for CSS hex literals, the rgb() function, and any <canvas> readback. HEX #RRGGBB is a packed 24-bit integer (8 bits per channel, 0-255); HEX #RRGGBBAA adds an alpha byte; rgb()/rgba() expose the same channels as integers or percentages; hsl()/hsla() switch to cylindrical coordinates with hue in degrees [0, 360), saturation and lightness in [0%, 100%]. RGB-to-HSL conversion finds L = (max + min) / 2, S = (max - min) / (1 - |2L - 1|) for non-zero chroma, and H from a six-segment piecewise formula keyed on which channel is the max. The inverse HSL-to-RGB pass uses the standard t = L < 0.5 ? L(1+S) : L+S-LS algorithm before scaling each channel back to 0-255. The live picker uses the native <input type="color"> element, which on supporting browsers also exposes the EyeDropper API (Chrome 95+, Edge 95+; not yet in Safari/Firefox as of 2026). EyeDropper triggers an OS-level screen sample and returns an sRGB hex string, but it cannot sample inside cross-origin iframes or DRM-protected surfaces. Palette generation rotates the HSL hue: complementary is +180 degrees, triadic is +/-120 degrees, analogous is +/-30 degrees, split-complementary is +150 and +210 degrees. Tints and shades step lightness by fixed increments (typically +10% toward white for tints, -10% toward black for shades) while holding hue and saturation constant. Contrast follows WCAG 2.1 SC 1.4.3/1.4.6: each channel is gamma-decoded with the piecewise sRGB transfer function (linear segment below 0.03928, power 2.4 above), combined with luminance weights 0.2126R + 0.7152G + 0.0722B for relative luminance, then the ratio is (L_lighter + 0.05) / (L_darker + 0.05). The thresholds are 4.5:1 for AA normal text, 3:1 for AA large text and UI components, and 7:1 for AAA. Note that sRGB is an 8-bit per channel space, so wide-gamut displays using Display P3 (Apple) or Rec. 2020 may render the same hex code with visibly more saturated primaries; for cross-device color-critical work, tag the color with a profile rather than relying on raw RGB triplets.
- sRGB color space per IEC 61966-2-1; 8 bits per channel, total 16,777,216 representable colors.
- HSL-to-RGB uses t = L<0.5 ? L(1+S) : L+S-LS, then per-channel hue2rgb() lookup.
- EyeDropper API requires Chrome/Edge 95+ and a user gesture; cross-origin iframe surfaces are blocked.
- WCAG contrast: gamma-decode sRGB, weight luminance 0.2126R + 0.7152G + 0.0722B, then (L1+0.05)/(L2+0.05).
- Complementary = +180 deg hue, triadic = +/-120 deg, analogous = +/-30 deg, split-complementary = +150/+210 deg.
- canvas.getImageData returns Uint8ClampedArray RGBA pixels but requires the canvas to be same-origin (no tainted images).
- Display P3 / Rec. 2020 wide-gamut monitors render the same hex with stronger primaries - tag profile for color-critical work.
Examples
Pick a brand primary and copy in three formats
Picked: Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
Copy whichever form matches the surrounding code. All three values
describe the same sRGB color (IEC 61966-2-1, 8 bits per channel);
the page converts between them with the standard RGB <-> HSL math.Generate a complementary scheme
Base: #2563eb (blue)
Complement: #eb7a25 (orange) hue +180 deg
Analogous-1: #5a25eb (violet) hue +60 deg
Analogous-2: #256beb (azure) hue -30 deg
Triadic-1: #25eb56 (green) hue +120 deg
Triadic-2: #eb2525 (red) hue -120 deg
Use complementary for high-contrast accents, analogous for
harmonious backgrounds, and triadic for vibrant illustrations.
Lightness and saturation are held constant; only the hue rotates.Check WCAG contrast before publishing
Foreground: #1f2937 (gray-800, relative luminance 0.022)
Background: #ffffff (white, relative luminance 1.000)
Contrast ratio: (1.000 + 0.05) / (0.022 + 0.05) = 14.5:1
Passes WCAG AAA for normal text (>= 7:1) and large text (>= 4.5:1),
and also meets the 3:1 threshold for UI components. Run the same
check on every text/background pair that ships to production;
the page computes relative luminance with the piecewise sRGB
transfer function (gamma-decode, weight 0.2126R + 0.7152G +
0.0722B).FAQ
Which color formats does it show?
HEX (#RRGGBB), RGB (rgb(R, G, B)), and HSL (hsl(H, S%, L%)). The page also shows complementary, analogous, triadic, and split-complementary color schemes, plus tints and shades based on your selected color.
What's the difference between HSL and HSV?
Both decompose color into hue (0-360°), saturation, and a brightness-like component. HSL's third dimension is lightness (50% is most saturated, 0% is black, 100% is white). HSV's third dimension is value (100% is most saturated, 0% is black, no white). HSL is more intuitive for tints and shades; HSV closer to how artists mix paint.
How accurate are the color conversions?
HEX, RGB, and HSL are exact mathematical conversions - they all describe the same sRGB color. The page converts between them using standard formulas with no loss of precision.
Will the same hex color look identical on every screen?
No. sRGB is the default web color space; wide-gamut displays (P3, Adobe RGB) without color management can render the same hex more saturated. Calibration also varies. Test critical colors on the target device, especially for branding work.
How are the color schemes generated?
The schemes rotate the HSL hue while keeping saturation and lightness constant. Complementary is +180°, triadic is +120° / +240°, analogous is ±30°, and split-complementary is +150° / +210°. Tints step lightness toward 100% (white) and shades step toward 0% (black).
Is the color picker just for screen colors?
It works in the sRGB color space, which is the right model for web and most consumer screens. The conversions are standard and well-tested for CSS and UI design work.
Is anything uploaded?
No. The page is pure-browser JavaScript. Color values are not saved or transmitted.