What this color picker does
A web color goes by three common names — HEX, RGB and HSL — and this tool keeps all three in sync, live. Pick a color visually or paste any value (the format is auto-detected) and copy whichever notation you need. You also get a palette of 5 tints and 5 shades, the complementary color, and a large preview with automatic black or white contrast text. Everything runs locally in your browser.
How to use it
- Click the swatch and pick a tone, or type a value such as
#FF6B35,rgb(255, 107, 53)orhsl(16, 100%, 60%). - Read the live outputs: full HEX, RGB and HSL strings, plus raw channel values for CSS variables.
- Hit Copy next to any output.
- Click any tint or shade in the palette to copy its HEX instantly.
- The complementary color sits at the bottom with its own copy button.
HEX, RGB and HSL in plain terms
HEX packs three bytes into six hexadecimal digits after # — the compact form CSS and design tools favor. RGB spells out how much red, green and blue light the screen mixes, each channel 0 to 255; screens are additive, so all channels at 255 give white. HSL describes the color the way a person would: a hue angle on the color wheel (0 to 359), saturation, and lightness. Need a darker hover state? Lower the lightness and leave hue and saturation alone.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Mid gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Worked example
Take the orange #FF6B35. Splitting the pairs: FF = 255, 6B = 107, 35 = 53, so it is rgb(255, 107, 53). Normalize each channel by 255: red 1.0, green 0.42, blue 0.208. Lightness is the average of max and min: (1.0 + 0.208) ÷ 2 = 0.604, so 60%. Saturation (lightness above 0.5) is the spread divided by 2 minus the sum: 0.792 ÷ 0.792 = 1.0, a full 100%. Red dominates, so hue = ((green − blue) ÷ 0.792) × 60 ≈ 16 degrees. Final answer: hsl(16, 100%, 60%) — paste #FF6B35 into the tool and you will see exactly that.
Building palettes that work
The complementary color sits directly across the wheel: hue + 180. Complements deliver maximum chromatic contrast, which is why orange buttons pop on blue sites. Analogous colors are the neighbors at hue ± 30: low tension, great for backgrounds and gradients. The tint and shade rows keep hue and saturation fixed and only step the lightness — exactly how design systems build their color scales.
Contrast and WCAG accessibility
A palette can look gorgeous and still be unreadable. WCAG requires a contrast ratio of at least 4.5:1 for normal text (3:1 for large text), computed from the relative luminance of both colors. The classic benchmark: gray #767676 on white scores 4.54:1 — the lightest gray that still passes. The preview here applies the same luminance formula to pick black or white text.
Frequently asked questions
What is the difference between 3-digit and 6-digit HEX?
The 3-digit form is shorthand where each digit is doubled: #F00 expands to #FF0000. It only exists for colors whose channel pairs repeat, so most brand colors need all six digits. Both are valid CSS.
What is the alpha channel in RGBA and #RRGGBBAA?
Opacity. In rgba(255, 107, 53, 0.5) the fourth number runs from 0 (transparent) to 1 (opaque). Eight-digit HEX works too: #FF6B3580 is the same orange at about 50% opacity, since hex 80 is 128 out of 255. This tool ignores any alpha you paste.
Are HSL and HSB (HSV) the same thing?
No. Hue matches, but the third axis differs: HSL lightness at 100% is always pure white, while HSB brightness at 100% gives the most vivid version of the hue — white requires also dropping saturation. Photoshop speaks HSB; CSS speaks HSL — the same color gets different numbers in each.
How do I grab a color from an image?
Use an eyedropper. In Chrome and Edge, any color value in DevTools opens a picker whose eyedropper samples pixels on the page, and web apps can use the native EyeDropper API. A palette-from-image extractor is planned as a separate tool.