CSS Color Codes Explained: HEX, RGB, HSL, and When to Use Each

HEX color codes

HEX (hexadecimal) colors are the most widely used format in CSS — the familiar #FF6B6B format. Each pair of hex digits represents one color channel: Red, Green, Blue.

color: #FF6B6B; /* Red=FF (255), Green=6B (107), Blue=6B (107) */
color: #000000; /* Black */
color: #FFFFFF; /* White */
color: #000;  /* Shorthand for #000000 */
color: #F60;  /* Shorthand for #FF6600 */

The 3-digit shorthand works when both digits of each channel are the same: #F60 expands to #FF6600. If they're different (like #F67 expanding to #FF6677), the shorthand doesn't exist.

When to use HEX:Design-to-code handoffs (Figma, Sketch export hex by default), brand color specifications in style guides, any context where you're copying a color from a tool.

Convert HEX to RGB and HSL with the free color picker.

RGB and RGBA

RGB specifies colors as three numbers from 0–255 — the same values as HEX, just in decimal:

color: rgb(255, 107, 107);  /* Same as #FF6B6B */
color: rgb(0, 0, 0);     /* Black */
color: rgb(255, 255, 255);   /* White */

/* RGBA adds a fourth value: alpha (0=transparent, 1=opaque) */
color: rgba(255, 107, 107, 0.5); /* 50% transparent red */
color: rgba(0, 0, 0, 0.8);    /* 80% opaque black overlay */

When to use RGB/RGBA: Any time you need transparency — semi-transparent overlays, shadows with opacity, dimmed backgrounds. The alpha channel (rgba) is the reason to choose this format over HEX.

Note: Modern CSS also supports 8-digit HEX for transparency: #FF6B6B80 (the last two digits are the alpha). But RGBA is more readable.

HSL and HSLA

HSL stands for Hue, Saturation, Lightness — a more intuitive way to think about colors:

/* hsl(hue, saturation, lightness) */
color: hsl(0, 100%, 50%);   /* Pure red */
color: hsl(120, 100%, 50%); /* Pure green */
color: hsl(240, 100%, 50%); /* Pure blue */

/* Adjusting lightness: easy to create shades */
color: hsl(0, 100%, 70%);   /* Lighter red */
color: hsl(0, 100%, 30%);   /* Darker red */

/* HSLA adds transparency */
color: hsla(0, 100%, 50%, 0.5);  /* 50% transparent red */

Hue is a degree on the color wheel (0–360): 0/360 = red, 120 = green, 240 = blue. Saturation is how vivid the color is (0% = grey, 100% = full color). Lightness is how light or dark it is (0% = black, 100% = white, 50% = the "pure" color).

When to use HSL: When you want to programmatically create color variations — lighter/darker versions of the same hue, color palettes from a single base color, hover states and focus rings that are predictably related to the base color.

The practical guide: which format for what

CSS color keywords

CSS also supports 140+ named color keywords — red, blue, tomato, rebeccapurple, cornflowerblue. These are fine for quick prototyping but not for production — the actual RGB values behind keywords aren't always intuitive, and they don't convey the same precision as a specific hex code.

One special keyword: transparent = rgba(0,0,0,0). Use it for fully transparent colors (e.g., transparent button backgrounds, transparent borders for focus ring tricks).

Modern CSS: color-mix() and oklch

CSS is evolving with two new color capabilities in 2026:

• color-mix(in srgb, red 50%, blue) — mix two colors in CSS without JavaScript. Supported in Chrome 111+, Firefox 113+, Safari 16.2+.
• OKLCH — a perceptually uniform color space where equal steps in lightness look equally different to the human eye (unlike HSL, where equal steps in lightness can look uneven). Good for generating accessible color palettes.

Related tools

• Free Color Picker — pick colors and convert between HEX, RGB, and HSL
• Color Contrast Checker — verify any color combination meets WCAG accessibility requirements
• CSS Gradient Generator — create gradients using any color format
• Changing SVG Icon Colors with currentColor & CSS — plus encoding #HEX colors safely in SVG CSS Data URIs

Written by Achraf A., founder of TheFreeAITools.