Color Picker & HEX / RGB / HSL Converter
Choose a color visually and get its HEX, RGB and HSL values instantly — click any value to copy it straight into your CSS, Figma or design tool.
#0B7A55
rgb(11, 122, 85)
hsl(158, 84%, 26%)
How to use
- Pick a color with the color picker, or click a preset swatch.
- Read the HEX, RGB and HSL values below.
- Click Copy next to any value to use it in your project.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
HEX and RGB describe colors as red/green/blue amounts for screens; HSL describes hue, saturation and lightness, which many designers find more intuitive to adjust.
How do I copy a color value?
Click the Copy button next to any value — it goes straight to your clipboard.
Can I use these colors in my designs?
Yes. The values work in CSS, Figma, Photoshop, Canva and any other design tool.
Are the preset swatches free to use?
Yes — click any swatch to load it into the picker and copy its values.