🎨 HEX ↔ RGB Colour Converter

The HEX ↔ RGB Colour Converter translates between the three common ways CSS names a colour: hex (#0EA5E9), rgb() (rgb(14, 165, 233)), and hsl() (hsl(199, 89%, 48%)). Designers picking a colour from a mockup often need it in a different form than the file uses; developers implementing a spec often need to translate between all three when writing code, computing variants, or checking accessibility.

How to Use This Tool

Enter a colour in any of the three formats and the tool fills in the other two, along with a live swatch so you can confirm you typed the value you meant. Both 6-digit (#0EA5E9) and 3-digit (#0EA) hex are accepted.

SEO Best Practices

For dynamic colour work in JavaScript, HSL is usually the easiest to reason about: rotating the hue produces a colour wheel, adjusting lightness produces tints and shades of the same hue. For static colour palettes stored in code, hex is the most compact. RGB is the most literal about which pixels you're asking for, which makes it the easiest to interpolate mathematically.

Example

Entering #0EA5E9 fills in rgb(14, 165, 233) and hsl(199, 89%, 48%) — a bright sky blue. Adjusting the H component up or down changes the hue while preserving that same brightness and saturation.

Common Mistakes to Avoid

Don't confuse HSL with HSV/HSB — they're related but not identical, and Photoshop's HSB values will not round-trip through a CSS HSL converter. Don't rely on hex for colours with alpha transparency — use rgba() or 8-digit hex (#RRGGBBAA) instead.