CSS Color Formats Explained: HEX, RGB, and HSL
CSS lets you write the same color in several formats — HEX, RGB, and HSL — and each has strengths. This guide explains what they mean, when to use each, and how converting between them makes building palettes easier.
2026年7月2日
HEX and RGB: the same color, two notations
A HEX code like #3B82F6 encodes red, green, and blue as three two-digit hexadecimal values. RGB writes the same channels in decimal: rgb(59, 130, 246). They are interchangeable — HEX is compact, RGB is readable and supports an alpha channel with rgba().
HEX is the most common format in design tools, so you will often paste a HEX code and convert it to RGB when you need transparency or want to tweak a single channel.
HSL: the format built for adjusting color
HSL describes a color as hue (0-360° around the color wheel), saturation (how vivid), and lightness (how light or dark): hsl(217, 91%, 60%). This maps to how designers think about color.
That makes HSL ideal for building systematic palettes: keep the hue fixed and step the lightness to generate tints and shades, or nudge the hue for an analogous scheme — all without recalculating raw channels the way HEX and RGB require.
Converting between formats
In practice you move between formats constantly: paste a HEX brand color, convert it to HSL to build lighter and darker variants, then export back to HEX or RGB for your stylesheet. A HEX to HSL converter does this instantly with a live preview.
To blend two colors — say, to find a midpoint or create a tint — a color mixer combines them and returns the result in all three formats, ready to copy.
Tools mentioned in this guide
- HEX to HSLConvert HEX color codes to HSL and HSLA values with hue, saturation, lightness, and a live preview.
- HEX to RGBConvert HEX color codes to RGB and RGBA values with a live color preview.
- RGB to HEXConvert RGB and RGBA channel values into HEX color codes with a live preview.
- Color MixerBlend two or more HEX colors with adjustable weights using RGB or HSL mixing and copy the mixed result.
よくある質問
- Should I use HEX, RGB, or HSL in CSS?
- All three are valid and render identically. Use HEX for compact static colors, RGB/RGBA when you need transparency, and HSL when you want to adjust hue, saturation, or lightness to build palettes and states.
- How do I make a lighter or darker version of a color?
- Convert it to HSL and change only the lightness value — raise it for a tint, lower it for a shade. This keeps the hue consistent, which is why HSL is preferred for palettes.