Color Picker
HEX, RGB & HSL
Pick a color visually and copy matching HEX, RGB, and HSL values for CSS, design systems, and UI specs.
What is this tool?
This color picker converts a selected color between HEX, RGB, and HSL values. These formats describe the same color in different coordinate systems used by CSS, design tools, and documentation.
HEX is compact and common in design tokens. RGB exposes red, green, and blue channels from 0 to 255. HSL expresses hue, saturation, and lightness, which can be easier when adjusting related colors programmatically.
Use it to copy CSS-ready color values, tune UI states, document tokens, compare design specs, and move between visual selection and implementation-friendly formats.
How to use
- Pick a color with the color input or adjust the RGB sliders.
- Optionally type a full six-digit HEX value.
- Review the live color preview.
- Copy the HEX, RGB, or HSL value for CSS or design documentation.
Examples
| Input / setting | Output | Notes |
|---|---|---|
#3b82f6 | rgb(59, 130, 246); hsl(217, 91%, 60%) | Default blue converted into CSS color formats. |
#000000 | rgb(0, 0, 0); hsl(0, 0%, 0%) | Black in RGB and HSL. |
#ffffff | rgb(255, 255, 255); hsl(0, 0%, 100%) | White in RGB and HSL. |
Related tools & concepts
Last reviewed: 2026-05-08