Home›Color Tools› Color converterBrowser
Convert a color between HEX, RGB and HSL
Shows a color in every common notation at the same time. There is no direction to choose — pick or paste a color and read whichever format you need.
- HEX
- #2F6FEB
- RGB
- rgb(47, 111, 235)
- HSL
- hsl(220, 82%, 55%)
- CSS variable
- --brand: #2f6feb;
Common presets
Each one has its own page explaining where that requirement comes from and what to expect.
How to use it
- 1Pick a color with the swatch, or paste a value like #3b82f6.
- 2Read whichever notation you need — they are all shown at once.
- 3Copy the CSS variable line if you are putting the color into a stylesheet.
Frequently asked questions
- Why is there no direction to choose?
- Because HEX, RGB and HSL are three ways of writing the same color, not three formats you convert between. Showing all of them at once removes a click and the question of which way round you are going.
- When should I use HSL instead of HEX?
- When you are building variations. HSL separates hue, saturation and lightness, so a hover state is the same color with the lightness dropped ten points — an edit you can reason about. In HEX the same change is three unrelated numbers.
- Are HEX and RGB exactly equivalent?
- Yes, for the eight-bit values both notations use: #3b82f6 and rgb(59, 130, 246) are the same 24 bits written differently. HSL is a different coordinate system over the same space, so a converted value can land a fraction off when it is rounded back.
- What is a three-digit hex code?
- Shorthand: #f00 expands to #ff0000 by doubling each digit. It can only express colors whose channel pairs repeat, so it covers 4,096 of the 16.7 million — fine for a quick red, not for a brand color.