Color
Color Picker
Pick a color and explore hue and lightness ramps around it — with live hex, RGB, and HSL values.
Pick a color
Lighter / Darker
- 100%#ffffff
- 95%#ffe5e5
- 90%#ffcccc
- 85%#ffb3b3
- 80%#ff9999
- 75%#ff8080
- 70%#ff6666
- 65%#ff4d4d
- 60%#ff3333
- 55%#ff1a1a
- 50%#ff0000
- 45%#e60000
- 40%#cc0000
- 35%#b30000
- 30%#990000
- 25%#800000
- 20%#660000
- 15%#4d0000
- 10%#330000
- 5%#190000
- 0%#000000
Enter a color name or code
Selected color:
Text black
Text black shadow
Text white
Text white shadow
Best contrast: #ffffff
Hue
| Sample | Hue | Hex | RGB | HSL |
|---|---|---|---|---|
| 0 | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| 15 | #ff4000 | rgb(255, 64, 0) | hsl(15, 100%, 50%) | |
| 30 | #ff8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) | |
| 45 | #ffbf00 | rgb(255, 191, 0) | hsl(45, 100%, 50%) | |
| 60 | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| 75 | #bfff00 | rgb(191, 255, 0) | hsl(75, 100%, 50%) | |
| 90 | #80ff00 | rgb(128, 255, 0) | hsl(90, 100%, 50%) | |
| 105 | #40ff00 | rgb(64, 255, 0) | hsl(105, 100%, 50%) | |
| 120 | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| 135 | #00ff40 | rgb(0, 255, 64) | hsl(135, 100%, 50%) | |
| 150 | #00ff80 | rgb(0, 255, 128) | hsl(150, 100%, 50%) | |
| 165 | #00ffbf | rgb(0, 255, 191) | hsl(165, 100%, 50%) | |
| 180 | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| 195 | #00bfff | rgb(0, 191, 255) | hsl(195, 100%, 50%) | |
| 210 | #0080ff | rgb(0, 128, 255) | hsl(210, 100%, 50%) | |
| 225 | #0040ff | rgb(0, 64, 255) | hsl(225, 100%, 50%) | |
| 240 | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| 255 | #4000ff | rgb(64, 0, 255) | hsl(255, 100%, 50%) | |
| 270 | #8000ff | rgb(128, 0, 255) | hsl(270, 100%, 50%) | |
| 285 | #bf00ff | rgb(191, 0, 255) | hsl(285, 100%, 50%) | |
| 300 | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| 315 | #ff00bf | rgb(255, 0, 191) | hsl(315, 100%, 50%) | |
| 330 | #ff0080 | rgb(255, 0, 128) | hsl(330, 100%, 50%) | |
| 345 | #ff0040 | rgb(255, 0, 64) | hsl(345, 100%, 50%) | |
| 360 | #ff0000 | rgb(255, 0, 0) | hsl(360, 100%, 50%) |
RGB (Red, Green, Blue)
| Red (255) | Green (0) | Blue (0) |
|---|---|---|
About the color picker
This picker centers on one working color, which you can set four ways: drag the native <input type="color"> swatch, type a value into the search box, click a swatch in one of the reference tables, or drag one of the three RGB sliders. Whichever way you set it, the page immediately shows the equivalent hex, rgb(), and hsl() strings with one-click copy buttons, plus a live preview of black and white sample text (with and without a shadow) over that background so you can eyeball legibility before committing to it in CSS.
Every conversion happens client-side in plain JavaScript, with no canvas pixel-sampling or image assets involved. The search box runs your input through a small parser that recognizes hex (#3498db or the 3-digit #39d), rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), and CSS named colors like coral, converts whatever it finds to RGB, and derives HSL from that using the standard formulas from the CSS Color spec. The current color is also written to the URL's hash on every change, so the address bar always reflects, and can share, exactly what's on screen.
Reach for the two reference tables when one swatch isn't enough context. The Hue table holds saturation and lightness fixed and steps through 25 hues, useful for picking a family of related colors; the Lighter / Darker list holds hue and saturation fixed and steps through 21 lightness values spanning black to white, exactly the range you need for hover, active, and disabled states of one brand color. The "best contrast" readout under the sample text is a fast approximation, not a WCAG calculation; use the Contrast Ratio tool when you need a certified AA/AAA number.
Examples
Search box: coral
Hex #ff7f50
RGB rgb(255, 127, 80)
HSL hsl(16, 100%, 66%)The search box accepts hex, rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), or any of the ~140 CSS named colors the tool recognizes; press Enter or click OK to jump the swatch, tables, and sliders to that color. It's displayed uppercase via CSS, but the value actually copied to your clipboard is lowercase, as shown above.
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
const l = (max + min) / 2;
if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
const d = max - min;
const s = d / (1 - Math.abs(2 * l - 1));
let h = max === r ? ((g - b) / d) % 6
: max === g ? (b - r) / d + 2
: (r - g) / d + 4;
h = Math.round(h < 0 ? h * 60 + 360 : h * 60);
return { h, s: Math.round(s * 100), l: Math.round(l * 100) };
}
rgbToHsl(255, 127, 80); // { h: 16, s: 100, l: 66 }Textbook RGB-to-HSL conversion — the same formula the picker uses internally to build the Hue and Lighter/Darker tables from whatever color you set.
/color/color-picker?color=3498db
/color/color-picker#3498dbEither form pre-loads that color (the leading # is optional in both). After that, the hash keeps updating live as you pick, so copying the address bar always shares your current color.
Frequently asked questions
What color formats can I type into the search box?
Hex (#3498db or the shorthand #39d), rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), or a CSS named color such as coral or rebeccapurple. Alpha values in rgba()/hsla() are accepted but discarded — the tool only tracks opaque RGB.
Can I link directly to a specific color?
Yes — open /color/color-picker#3498db or /color/color-picker?color=3498db (the # is optional in both) and the picker loads with that color. The address bar's hash also updates automatically as you pick, so copying the URL always shares exactly what's on screen.
Does this tool send my color anywhere?
No. Every conversion — hex, RGB, HSL, and the two reference tables — runs in plain JavaScript in your browser, and nothing is sent to a server. The only network-adjacent action is writing the copied value to your clipboard when you click Copy.
How is the "best contrast" text color decided?
It picks whichever of pure black or white has the greater plain RGB (Euclidean) distance from your background color — a fast approximation, not the WCAG relative-luminance formula. If you need a certified AA/AAA contrast ratio, use the Contrast Ratio tool instead.
Can I pick a color directly from an image or my screen?
Not through this tool's own interface. Clicking "Or use native picker" opens your browser's built-in <input type="color"> dialog, and some browsers build a screen eyedropper into that dialog — but that's a browser feature, not something this page implements, so availability depends on your browser and OS.