Color Converter — HEX, RGB, HSL
Convert colors between HEX, RGB, HSL, and HSB/HSV formats instantly. Includes a visual color picker.
Click to pick
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)HEX, RGB, HSL: one source of truth for design tokens
Converting between cylindrical (HSL) and cube-root models helps when a design system stores tokens in HEX but animation tweens in HSL for perceptual smoothness.
Gamut differences between displays mean on-screen matches are approximate; print workflows need CMYK profiles not covered here.
Related tools
These free tools pair well with this page — open them in a new tab to finish your workflow.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a 6-digit hexadecimal notation (e.g. #ff6600) commonly used in CSS and design tools. RGB specifies red, green, and blue channels as integers 0–255. HSL describes a color by hue (0–360°), saturation (0–100%), and lightness (0–100%), which is more intuitive for humans when adjusting colors.
How do I convert HEX to RGB?
Split the HEX value into three pairs: the first pair is red, the second is green, the third is blue. Convert each pair from hexadecimal to decimal. For example, #1a2b3c → R=0x1a=26, G=0x2b=43, B=0x3c=60, so RGB(26, 43, 60).
What does opacity / alpha mean?
Alpha is a fourth channel (0–1 or 0–100%) that controls transparency. An alpha of 0 is fully transparent, 1 (or 100%) is fully opaque. In CSS this is expressed as rgba() or hsla(), or as an 8-digit HEX like #rrggbbaa.
Why does my color look different on screen vs print?
Screens use additive RGB light — red + green + blue = white. Printers use subtractive CMYK ink — cyan + magenta + yellow + black = black. The same HEX value can appear different across devices because of different color profiles and gamuts.
What is color gamut?
A color gamut is the range of colors a device can reproduce. sRGB is the most common web standard. Wide-gamut displays (DCI-P3, Rec. 2020) can show more vivid colors. Colors outside the display's gamut are clipped or tone-mapped.
How do I find a color's complement?
The complementary color is directly opposite on the color wheel. In HSL, simply add (or subtract) 180° to the hue value. For example, if your color has hue 60° (yellow), its complement has hue 240° (blue).
Are HEX color codes case-sensitive?
No. #FF6600 and #ff6600 are identical. CSS treats HEX color codes as case-insensitive. However, many developers and style guides prefer lowercase for consistency.