HEX, RGB, HSL Explained: A Guide to Color Codes
September 3, 2026 · 5 min read
Every color on your screen is defined by a code. Whether you are designing a website, building a brand, or just trying to match a color you saw somewhere, understanding color code formats — HEX, RGB, and HSL — is essential. Each format represents the same colors but in different ways, and each has specific advantages depending on what you are doing.
HEX Colors
HEX is the most widely used format in web design. It is a 6-character code preceded by a hash sign — like #0D9488 (the teal color used on this site). The six characters represent three pairs: the first two for red, the middle two for green, and the last two for blue, each ranging from 00 (none) to FF (maximum).
HEX is compact and easy to copy-paste, which makes it the default choice for CSS, design tools, and brand guidelines. The main limitation is that it is not intuitive — you cannot easily guess what #7C3AED looks like without a tool.
RGB Colors
RGB defines colors using three numbers from 0 to 255 — one for red, one for green, one for blue. The same teal would be rgb(13, 148, 136). RGB is more readable than HEX because the numbers directly represent the intensity of each channel.
RGBA adds a fourth value — alpha — for transparency. rgba(13, 148, 136, 0.5) gives you the same teal at 50% opacity. This is extremely useful for overlays, shadows, and layered designs.
HSL Colors
HSL stands for Hue, Saturation, Lightness. Hue is the color itself (0-360 degrees on the color wheel), saturation is the intensity (0% gray to 100% vivid), and lightness is the brightness (0% black to 100% white). The teal example would be approximately hsl(175, 84%, 32%).
HSL is the most intuitive format for humans. Want a darker version of your color? Reduce lightness. Want a muted version? Reduce saturation. Want a complementary color? Add 180 to the hue. These adjustments are trivial in HSL but require complex calculations in HEX or RGB.
When to Use Each Format
| Format | Best For |
|---|---|
| HEX | CSS, design tools, brand guidelines, sharing colors |
| RGB / RGBA | CSS with transparency, programmatic color manipulation, canvas |
| HSL / HSLA | Creating color variations, building palettes, accessibility adjustments |
| CMYK | Print design only — not used on screens |
Building a Color Palette
A good color palette typically includes a primary color, a secondary color, a neutral (gray) scale, and an accent for calls to action. Start with your primary color in HSL, then create variations by adjusting lightness (for hover states, backgrounds, and borders) and find complementary or analogous hues by shifting the hue value.
Accessibility and Contrast
Color contrast is not just a design preference — it is an accessibility requirement. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Low contrast makes text difficult to read for people with visual impairments and for everyone in bright sunlight.
Convert Colors Now
Use our free Hex to RGB Converter to convert between HEX, RGB, HSL, and CMYK instantly. Includes a visual color picker and contrast checker.
Open Hex to RGB Converter →Need a complete palette? Our Color Palette Generator creates harmonious color schemes from any starting color.