Color Selector Online
Interactive color picker with palette and multiple format support
Click swatch to open native picker
Runs in your browserPreview & Output
Fine-tune Color
Saved Colors
Pick a color and copy its code
Click the big swatch to open the color picker, choose a color, and copy it as HEX, RGB, RGBA, HSL or HSV. The R, G, B and A sliders change one channel at a time, and every value updates while you drag.
It is a hex color picker and an RGB color picker in one: the same orange reads #FF8800, rgb(255, 136, 0), hsl(32, 100%, 50%) and hsv(32, 100%, 100%). Save the colors you want to keep, and they wait in Saved Colors the next time you open this color selector.
Which color format to copy
| Format | #FF8800 as | Use it for |
|---|---|---|
| HEX | #FF8800 |
CSS, HTML attributes and design tools; the shortest way to write a solid color |
| RGB | rgb(255, 136, 0) |
CSS, and code that wants three numbers from 0 to 255 |
| RGBA | rgba(255, 136, 0, 1) |
CSS when the color needs transparency: lower the A slider |
| HSL | hsl(32, 100%, 50%) |
CSS when you want to change lightness or saturation by hand |
| HSV | hsv(32, 100%, 100%) |
Photoshop, Figma and other editors that call it HSB; CSS has no hsv() |
HSL and HSV share the hue, 32 degrees here, but measure the rest differently: pure orange is 50% lightness and 100% value. Why HSL is easier to work with in a stylesheet is explained in why developers switch from RGB to HSL.
Transparency and saved colors
Alpha
- Drag A down to make the color see-through; the swatch shows it over a checkerboard
- At 50, RGBA reads
rgba(255, 136, 0, 0.5) - HEX, RGB, HSL and HSV stay solid: only RGBA carries the alpha
Saved Colors
- Save Current Color adds the color at the front, up to 20 colors
- A color that is already saved isn't added twice
- Click a saved color to load it again, or the bin icon to remove it; the HEX value is kept, the alpha is not
Need colors that go with it?
The color explorer turns one color into a palette: a ramp of tints and seven harmony colors from the color wheel.
Color picker questions
Click the swatch. Chrome and Edge open a picker with an eyedropper that samples any pixel on your screen; other browsers show the system color dialog.
CSS has no hsv() function. Use HEX, RGB or HSL in stylesheets, and HSV in editors that call it HSB.
In your browser's local storage on this device. Clearing the site's data removes them, and they don't sync to other browsers or devices.
Yes. Tapping the swatch opens the phone's own color picker, and the sliders and number boxes work by touch.
No. Picking, converting and saving all happen in your browser.