CSS Colors & Gradients:
A Frontend Developer's Guide

The Three CSS Color Formats

CSS supports multiple ways to specify colors. Each has strengths, and the best choice depends on what you're doing.

HEX: Compact and Universal

HEX uses a six-character code: #RRGGBB. Each pair represents red, green, and blue as 00 to FF (0–255). It's the most compact format and the most widely used.

/* All the same color */
color: #3b82f6;       /* Standard 6-digit hex */
color: #3B82F6;       /* Case-insensitive */
color: #38f;           /* 3-digit shorthand → #3388ff */

HEX is great for static colors, design tokens, and copy-paste from Figma. The downside: you can't easily make a HEX color lighter or darker without a converter.

RGB: Programmatic Friendly

RGB specifies each channel as a number from 0–255. It's easier to manipulate programmatically.

/* Same color in RGB */
color: rgb(59, 130, 246);
color: rgba(59, 130, 246, 0.5);  /* With alpha */
color: rgb(59 130 246 / 0.5);     /* Modern syntax */

RGB is the natural choice when generating colors dynamically in JavaScript. The modern syntax supports alpha without the rgba() variant.

HSL: Human-Friendly

HSL represents colors as hue (0–360°), saturation (0–100%), and lightness (0–100%). This maps directly to how humans think about color.

/* Same blue in HSL */
color: hsl(217, 91%, 60%);
color: hsla(217, 91%, 60%, 0.5);  /* With alpha */

HSL shines when creating color variations. Want a lighter version? Increase lightness. Want a muted version? Decrease saturation. Creating a palette in HSL is a matter of adjusting two numbers.

When to Use Each

Format	Best For	Example
HEX	Design tokens, static colors, copy-paste	#3b82f6
RGB	Dynamic colors, JS manipulation	rgb(59,130,246)
HSL	Color palettes, variations, theming	hsl(217,91%,60%)

Use the Color Picker to convert between HEX, RGB, and HSL in real-time. Pick any color visually and get all three formats instantly.

Building Color Palettes with HSL

The real power of HSL is in creating color scales. Here's how to build a palette for a brand color:

/* Primary blue: hsl(217, 91%, 60%) */
/* Create a full scale by adjusting only lightness */

--color-50:  hsl(217, 91%, 95%);  /* Very light — backgrounds */
--color-100: hsl(217, 91%, 90%);
--color-200: hsl(217, 91%, 80%);
--color-300: hsl(217, 91%, 70%);
--color-400: hsl(217, 91%, 65%);
--color-500: hsl(217, 91%, 60%);  /* Base */
--color-600: hsl(217, 91%, 50%);
--color-700: hsl(217, 91%, 40%);
--color-800: hsl(217, 91%, 30%);
--color-900: hsl(217, 91%, 20%);  /* Very dark — text on light bg */

Only the lightness value changes. The hue and saturation stay the same, so all shades feel like one family. This technique is used by Tailwind CSS, Chakra UI, and other design systems. You can also adjust saturation to create muted variants.

CSS Gradients: Beyond Flat Colors

Gradients create smooth transitions between colors. They're rendered by the browser, resolution-independent, and can be animated.

Linear Gradients

A linear gradient transitions along a straight line. You specify a direction and color stops.

/* Top-left to bottom-right */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Multiple color stops */
background: linear-gradient(to right, #ff7e5f, #feb47b, #ff7e5f);

/* With exact positions */
background: linear-gradient(180deg, #a8edea 0%, #fed6e3 100%);

Radial Gradients

A radial gradient transitions from a center point outward.

/* Circular from center */
background: radial-gradient(circle, #ff9a9e, #fecfef);

/* Elliptical, positioned top-left */
background: radial-gradient(ellipse at top left, #667eea, #764ba2);

Gradient Best Practices

• Choose colors close on the color wheel for subtle, professional gradients. High-contrast combinations (blue to red) can look garish.
• Always provide a solid fallback with background-color for older browsers.
• Use gradients sparingly. A subtle gradient on a hero section has impact. Every element with a gradient looks chaotic.
• Test on different screens. Color accuracy varies between displays.

Use the CSS Gradient Generator to create gradients visually. Pick colors, adjust the angle, and copy the CSS directly.

Modern CSS Color Features

CSS Color Level 4 introduced powerful features available in all modern browsers:

• OKLCH color space — perceptually uniform. Colors with the same lightness actually appear equally bright to the human eye (unlike HSL).
• color-mix() — mix two colors in CSS: color-mix(in srgb, blue 30%, white) gives you a lighter blue without preprocessors.
• Relative color syntax — create variants from existing colors: rgb(from var(--primary) r g b / 0.5) for semi-transparent versions.

If you're starting a new project, consider OKLCH over HSL — it produces more predictable results.

Color Accessibility

WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. If you're squinting to read text on your background, the contrast is too low. Use a contrast checker to verify your combinations. And never rely solely on color to convey information — add icons, patterns, or text labels as backup.

Quick Reference

Task	Tool
Pick a color and get HEX/RGB/HSL	Color Picker
Create a CSS gradient and copy code	CSS Gradient Generator

Gradient Performance and Browser Compatibility

CSS gradients are rendered by the browser engine, not loaded as images. This makes them resolution-independent — they look sharp on any screen density without additional HTTP requests. However, complex gradients with many color stops can impact rendering performance on low-powered mobile devices. Each color stop requires the browser to calculate a color transition, and animating gradients (changing the angle, shifting color stops) triggers repaints. For performance-critical pages, limit gradients to two or three stops and avoid animating them on elements that cover large portions of the viewport.

Browser support for CSS gradients is universal in modern browsers. Linear gradients have been supported since IE10. The modern syntax has been supported everywhere since roughly 2015. If you need to support very old browsers, provide a solid background-color fallback before the gradient declaration. Browsers that do not understand gradients will ignore the declaration and use the fallback.