About Color Picker
Pick a colour and instantly get its HEX, RGB, and HSL values. Convert between formats and copy the code you need for CSS, design, or development.
How to Use
- Pick a colour from the picker, or enter a value.
- See the HEX, RGB, and HSL equivalents.
- Copy the format you need.
- Use it in your CSS or design tool.
Why Use This Tool?
- Accurate — built on precise, well-tested mathematical formulas.
- Instant — all calculations happen client-side for zero latency.
- Private — no data is sent to any server; your information stays on your device.
- Free — no sign-up, no limits, no hidden costs.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
They describe the same colour differently: HEX (#2563eb) is a compact code, RGB (37, 99, 235) gives red/green/blue amounts, and HSL (hue, saturation, lightness) is more intuitive for adjusting a colour.
How do I add transparency to a colour?
Use an 8-digit HEX (#2563eb80) or the rgba()/hsla() functions in CSS, where the last value is the alpha (opacity) from 0 to 1.
What makes a good colour combination?
Adjusting the hue in HSL helps find complementary or analogous colours, while keeping consistent saturation and lightness gives a harmonious palette.