GUIDE深度 · Deep dive
HEX vs RGB vs HSL
HEX and RGB are two encodings of the same red, green and blue values; HSL is another coordinate system. Design handoff often uses HEX, CSS variables may use RGB components, and HSL is easier for tuning.
Where each fits
HEX: #RRGGBB, common in design and CSS.
RGB: rgb(r,g,b), convenient per channel.
HSL: hsl(h,s%,l%), intuitive for lightness and saturation.
Conversion
Each HEX pair is a 0 to 255 red, green or blue value.
HSL hue is an angle and S/L are percentages; it is a representation, not a different color.
FAQ
Why do design tools and browsers differ?
Color profiles or display settings may differ; compare the same HEX value.
Is HSL better for editing?
It is more intuitive for lightness and saturation, but brands usually hand off HEX.