Color Converter
Convert colors between HEX, RGB and HSL instantly. Pick a color or type any value — all formats update in real time. CSS-ready output included. Everything runs in your browser.
Color Picker
Related Tools
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL color formats?▾
HEX (#3b82f6) is a compact hexadecimal representation of RGB values, widely used in CSS and design tools. RGB (rgb(59, 130, 246)) expresses a color as red, green and blue components each ranging 0–255, closer to how screens physically emit light. HSL (hsl(217, 91%, 60%)) describes a color as hue (0–360°, the color wheel angle), saturation (0–100%, how vivid), and lightness (0–100%, how light or dark). HSL is the most intuitive for humans — to make a color lighter, just increase L; to desaturate it, decrease S.
Which color format should I use in CSS?▾
All three are valid in CSS. HEX is the most common for static colors and is the shortest to type. RGB is useful when you need to manipulate channels programmatically or add opacity (rgba()). HSL is best when you need to create color variations — for example, generating a hover state by adjusting lightness: hsl(217, 91%, 50%) → hsl(217, 91%, 40%). Modern CSS also supports color-mix() and oklch() for more perceptually uniform manipulation, but HEX/RGB/HSL cover the vast majority of real-world use cases.
Why do some HEX colors use 3 digits and others use 6?▾
3-digit HEX is a shorthand where each digit is doubled: #3bf is equivalent to #33bbff. It only works when both digits of each color channel are identical. 3-digit HEX reduces file size slightly but is only applicable to a subset of colors. 6-digit HEX can represent all 16,777,216 possible RGB colors. An 8-digit HEX (#RRGGBBAA) adds an alpha channel for transparency, supported in all modern browsers.
What does HSL hue 0° and 360° both mean red?▾
Hue represents an angle on the color wheel, which is circular — so 0° and 360° are the same point (red). The wheel goes: 0°/360° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta. This circularity is what makes HSL useful for generating color harmonies: complementary colors are 180° apart, triadic colors are 120° apart, and you can rotate the hue to create analogous palettes without touching saturation or lightness.
Why does converting HEX → HSL → HEX sometimes produce a slightly different HEX value?▾
Rounding. The conversion from RGB to HSL involves floating-point arithmetic, and rounding the HSL values to integers (e.g., H=217, S=91, L=60) loses some precision. Converting back from those rounded integers to RGB and then to HEX can produce a result 1 unit off in one channel. This is normal and the color difference is imperceptible to the human eye. If you need lossless round-tripping, keep the full floating-point HSL values without rounding.