Color codes show up in CSS, Figma, Tailwind configs, and design handoffs. Converting between HEX, RGB, and HSL helps when one tool uses a different format.
Convert a color (step by step)
- Open Color Converter.
- Paste a HEX value like
#7C3AED, or enter RGB or HSL values. - Copy the converted format you need.
When to use each format
- HEX: common in CSS and design specs
- RGB: useful when you need transparency via
rgba() - HSL: useful for tweaking lightness and saturation
Common mistakes
- Forgetting the
#in HEX - Mixing 0 to 255 RGB values with 0 to 100 percentages
Related tools
- JSON Formatter: clean config files that include colors