CSS Color Values

Color Format Types

color: red;
color: blue;
color: green;

color: #ff0000;
color: #00ff00;
color: #0000ff;

color: rgb(255, 0, 0);
color: rgba(0, 255, 0, 0.5);
color: rgb(0 0 255);

color: hsl(0, 100%, 50%);
color: hsla(120, 100%, 50%, 0.3);
color: hsl(240 100% 50%);

🔹 Color Names

CSS provides 147 predefined color names, offering a human‑readable and intuitive way to specify colors without memorizing complex hexadecimal or RGB values. These names range from basic primaries like red, blue, and green to more descriptive hues such as crimson, navy, and forestgreen. While convenient for prototyping and readability, for production‑grade design systems, hex, RGB, or HSL values are often preferred due to their precision and consistency. Nevertheless, color names remain a valuable part of the CSS specification for quick styling and educational purposes.

/* Basic colors */
.red-text { color: red; }
.blue-text { color: blue; }
.green-text { color: green; }

/* Extended colors */
.crimson-text { color: crimson; }
.navy-text { color: navy; }
.forestgreen-text { color: forestgreen; }

🔹 Hex Color Values

Hexadecimal color values are a compact, widely‑used notation for defining precise colors in CSS using a six‑digit combination of numbers and letters (0‑9, A‑F) prefixed by a hash (#). The format #RRGGBB represents the intensity of Red, Green, and Blue components. A shorthand three‑digit form (#RGB) is also available, where each digit is duplicated (e.g., #F0A becomes #FF00AA). Hex codes offer a high degree of control and are universally supported, making them a fundamental and reliable choice for web design, particularly for defining brand colors and creating consistent color palettes.

/* Full hex notation */
.bright-red { color: #ff0000; }
.bright-green { color: #00ff00; }
.bright-blue { color: #0000ff; }

/* Short hex notation */
.red { color: #f00; }
.green { color: #0f0; }
.blue { color: #00f; }

/* Custom colors */
.purple { color: #8a2be2; }
.orange { color: #ffa500; }

🔹 RGB and RGBA Values

The rgb() and rgba() functions define colors by specifying the intensity of their red, green, and blue components, each on a scale from 0 to 255. This model provides a more intuitive syntax for designers familiar with digital color mixing. The rgba() function adds a crucial fourth parameter: the alpha channel, which controls opacity on a scale from 0.0 (fully transparent) to 1.0 (fully opaque). This ability to create semi‑transparent colors is essential for modern UI effects like overlays, shadows, and glassmorphism, enabling sophisticated visual depth and layering directly in CSS.

/* RGB values */
.rgb-red { color: rgb(255, 0, 0); }
.rgb-green { color: rgb(0, 255, 0); }
.rgb-blue { color: rgb(0, 0, 255); }

/* RGBA with transparency */
.semi-transparent { color: rgba(255, 0, 0, 0.5); }
.very-transparent { color: rgba(0, 0, 255, 0.3); }

/* Modern space-separated syntax */
.modern-rgb { color: rgb(255 165 0); }
.modern-rgba { color: rgb(255 165 0 / 0.7); }

🔹 HSL and HSLA Values

The HSL color model represents colors using Hue (0‑360 degrees on the color wheel), Saturation (0‑100%, intensity of the color), and Lightness (0‑100%, from black to white). This cylindrical model is often considered more intuitive for designers than RGB, as it allows for easier adjustment of a color's tone and brightness. The hsla() function includes an alpha channel for transparency. HSL excels at creating harmonious color schemes; for example, you can easily generate a set of complementary or monochromatic colors by systematically adjusting the hue or lightness values while keeping other parameters constant.

/* HSL values */
.hsl-red { color: hsl(0, 100%, 50%); }
.hsl-green { color: hsl(120, 100%, 50%); }
.hsl-blue { color: hsl(240, 100%, 50%); }

/* Different saturations */
.vibrant { color: hsl(300, 100%, 50%); }
.muted { color: hsl(300, 50%, 50%); }
.desaturated { color: hsl(300, 20%, 50%); }

/* HSLA with transparency */
.transparent-purple { color: hsla(300, 100%, 50%, 0.6); }

🔹 Modern Color Functions

CSS now supports advanced color functions for better color management:

/* LCH - Lightness, Chroma, Hue */
.lch-color { color: lch(50% 50 180); }

/* OKLCH - Improved LCH */
.oklch-color { color: oklch(0.7 0.15 180); }

/* Color mixing */
.mixed-color { color: color-mix(in srgb, red 30%, blue); }

/* Relative colors */
.lighter-red { color: color(from red srgb r g b / 0.5); }

🔹 Practical Color Examples

Real-world color usage in web design:

/* Brand colors */
.primary { color: #007bff; }
.secondary { color: #6c757d; }
.success { color: #28a745; }
.danger { color: #dc3545; }
.warning { color: #ffc107; }

/* Semantic colors */
.text-primary { color: hsl(210, 100%, 50%); }
.text-muted { color: rgba(0, 0, 0, 0.6); }
.text-light { color: hsla(0, 0%, 100%, 0.8); }

/* Gradient text */
.gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}