About this tool
HEX ↔ RGB ↔ HSL colour conversion.
The Color Converter translates colour values between the four most-used web colour formats: HEX (#RRGGBB), RGB (red 0–255, green 0–255, blue 0–255), HSL (hue 0–360°, saturation 0–100%, lightness 0–100%) and HSB/HSV (hue, saturation, brightness). Enter a value in any format and all others update. A colour swatch shows the result visually.
Example
Input HEX: #0052ff
RGB: rgb(0, 82, 255) · HSL: hsl(221°, 100%, 50%)
How to use
- Enter a colour in any format (HEX, RGB, HSL or HSB).
- All other format values update simultaneously.
- See the live colour swatch.
- Copy any format with one click.
Features
- HEX (#RRGGBB and 3-char shorthand)
- RGB (0–255)
- HSL (hue, saturation, lightness)
- HSB/HSV (hue, saturation, brightness)
- Live colour swatch
When to use this
Frontend developers translating Figma design specs (given in HEX) into CSS HSL values for hsl() functions used in animations.
Designers checking whether a brand colour feels warm or cool by looking at its hue angle on the colour wheel.
Accessibility reviewers finding the HEX value of a colour shown visually, before checking its contrast ratio with the Contrast Checker.
CSS authors converting legacy RGB values from an older stylesheet into HEX format to match a new design system.
Frequently Asked Questions
What is the difference between HSL and HSB?+
Both use Hue (0–360°) and Saturation (0–100%). HSL Lightness is 50% for a pure colour, 0% for black, 100% for white. HSB Brightness is 100% for a pure colour, 0% for black.
How do I convert a CSS hex colour?+
Paste the hex value (e.g. #0052ff) in the HEX field. RGB and HSL values appear instantly.
What is RGB?+
RGB defines a colour by its red, green and blue channel intensities — each from 0 (none) to 255 (full). Pure red: rgb(255, 0, 0).
Are CSS named colours supported?+
Yes. Type a named colour like "tomato", "steelblue" or "darkgreen" to get its HEX and RGB values.
Why does CSS support so many colour formats?+
Different formats suit different workflows. HEX is compact and traditional. RGB maps directly to display hardware. HSL is human-intuitive for colour manipulation. All three produce identical rendered colours.
What is the difference between RGB and HSL?+
RGB describes a colour as red, green, blue channel intensities (0–255 each). HSL describes it as hue (0–360° on the colour wheel), saturation (0–100%), and lightness (0–100%). Same colour, different mental model.
Can I use this tool to find accessible colour combinations?+
Use the Contrast Checker tool after finding your HEX value here — it calculates the WCAG contrast ratio between any two colours and tells you whether it passes AA or AAA.