About the Color Converter
The same colour can be written many ways: as a HEX code (#00bfff), as RGB values (0, 191, 255) or as HSL (hue, saturation, lightness). Designers and developers constantly need to move between these formats — a design tool gives you one, but your CSS or code needs another. This converter translates a colour between all three instantly.
Pick a colour with the visual picker or type a value in any format, and see the matching HEX, RGB and HSL at once. Everything runs in your browser.
How to use it
- 1Use the colour picker to choose a colour visually, or type a HEX, RGB or HSL value.
- 2The other formats update automatically to match.
- 3Copy the format you need for your CSS or design tool.
- 4Fine-tune the colour until it's exactly right.
- 5Reuse the values across your project for consistency.
Common uses
- →Converting a HEX code from a design into RGB or HSL for CSS.
- →Matching a brand colour across different tools.
- →Grabbing the exact value of a colour you picked visually.
- →Adjusting lightness or saturation using HSL.
- →Building a consistent colour system for a website.
Tips & good to know
- HSL makes it easy to create lighter or darker shades by changing only the lightness value.
- HEX and RGB describe the same colour — use whichever your codebase prefers.
- Keep a note of your core brand colours in one format to avoid drift.
Frequently asked questions
- Which formats does it convert between?
- HEX, RGB and HSL — change any one and the others update to match.
- Can I pick a colour visually?
- Yes. Use the built-in colour picker, or type a value directly in any supported format.
- Is anything uploaded?
- No. All conversion happens locally in your browser.