Skillversitas

Color in CSS

Color is the most fundamental design element in CSS. CSS supports various color formats, each with its own uses and advantages. Understanding color formats allows you to create designs that are consistent and accessible.

1. Named Colors

CSS supports 148 named colors that are defined by the standard. These colors are easy to remember and read.

/* Example named colors */
h1 {
    color: blue;
}

p {
    color: gray;
}

.error {
    color: red;
}

.success {
    color: green;
}

a {
    color: tomato;
    text-decoration: underline;
}

.highlight {
    background-color: lightyellow;
    color: darkslategray;
}

.btn-primary {
    background-color: dodgerblue;
    color: white;
    border: 2px solid navy;
}

Commonly Used Named Colors

Category Colors
Red red, crimson, darkred, firebrick, indianred, lightcoral
Blue blue, navy, darkblue, cornflowerblue, dodgerblue, skyblue, steelblue
Green green, darkgreen, forestgreen, limegreen, mediumseagreen, seagreen
Yellow yellow, gold, khaki, lightgoldenrodyellow, palegoldenrod
Orange orange, darkorange, coral, tomato, sandybrown
Purple purple, darkviolet, blueviolet, mediumpurple, plum
Brown brown, chocolate, sienna, saddlebrown, peru
Gray gray, dimgray, dimgrey, lightgray, silver, gainsboro
White/Pink white, snow, whitesmoke, pink, hotpink, palevioletred

2. HEX (Hexadecimal)

The HEX format uses hexadecimal codes (0-9, A-F) to represent colors. Format: #RRGGBB or shorthand #RGB.

/* Full 6-digit HEX */
h1 {
    color: #2c3e50;    /* Dark blue */
}

p {
    color: #555555;    /* Gray */
}

/* 3-digit HEX shorthand */
.btn {
    background-color: #f00;    /* Same as #ff0000 (red) */
    color: #fff;               /* Same as #ffffff (white) */
    border: 1px solid #000;    /* Same as #000000 (black) */
}

/* Other examples */
.card {
    background-color: #ffffff;  /* White */
    border: 1px solid #e0e0e0;  /* Light gray */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.primary { color: #3498db; }    /* Blue */
.secondary { color: #95a5a6; }  /* Gray */
.success { color: #27ae60; }    /* Green */
.warning { color: #f39c12; }    /* Yellow */
.danger { color: #e74c3c; }     /* Red */
.info { color: #17a2b8; }       /* Cyan */

How to Read HEX

#RRGGBB
 ││││││
 │││││└─ Blue (00-FF)
 ││││└── Blue (00-FF)
 │││└─── Green (00-FF)
 ││└──── Green (00-FF)
 │└───── Red (00-FF)
 └────── Red (00-FF)

#RGB (shorthand)
 │││
 ││└── Blue (0- F)
 │└─── Green (0- F)
 └──── Red (0- F)

3. RGB (Red Green Blue)

The RGB format uses decimal values for the red, green, and blue components. Value range: 0-255.

/* RGB */
h1 {
    color: rgb(52, 152, 219);    /* Blue */
}

p {
    color: rgb(127, 127, 127);   /* Gray */
}

.btn {
    background-color: rgb(46, 204, 113);  /* Green */
    color: rgb(255, 255, 255);             /* White */
}

/* Minimum and maximum values */
.white { color: rgb(255, 255, 255); }
.black { color: rgb(0, 0, 0); }
.red { color: rgb(255, 0, 0); }
.green { color: rgb(0, 128, 0); }
.blue { color: rgb(0, 0, 255); }

4. RGBA (Red Green Blue Alpha)

RGBA is like RGB but with an added alpha channel to control transparency. Alpha range: 0 (fully transparent) to 1 (fully opaque).

/* Transparent overlay */
.overlay {
    background-color: rgba(0, 0, 0, 0.7);  /* 70% opaque black */
    color: white;
    padding: 40px;
}

/* Transparent shadow */
.card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Semi-transparent background */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Gradient with transparency */
.gradient {
    background: linear-gradient(
        135deg,
        rgba(52, 152, 219, 0.8),
        rgba(155, 89, 182, 0.8)
    );
}

/* Hover state with transparency */
.btn:hover {
    background-color: rgba(52, 152, 219, 0.9);
}

/* Transparent text shadow */
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Transparent border */
.border {
    border: 2px solid rgba(52, 152, 219, 0.5);
}

5. HSL (Hue Saturation Lightness)

The HSL format uses Hue (color), Saturation, and Lightness. It is more intuitive for adjusting shades and tones.

  • Hue (H): 0-360 degrees on the color wheel (0=red, 120=green, 240=blue)
  • Saturation (S): 0%-100% (0%=gray, 100%=full color)
  • Lightness (L): 0%-100% (0%=black, 50%=normal, 100%=white)
/* HSL */
h1 {
    color: hsl(210, 100%, 50%);    /* Blue */
}

p {
    color: hsl(0, 0%, 50%);        /* Gray */
}

/* Blue variations with HSL */
.blue-darker { color: hsl(210, 100%, 30%); }   /* Darker blue */
.blue-dark { color: hsl(210, 100%, 40%); }      /* Dark blue */
.blue { color: hsl(210, 100%, 50%); }           /* Normal blue */
.blue-light { color: hsl(210, 100%, 60%); }     /* Light blue */
.blue-lighter { color: hsl(210, 100%, 70%); }   /* Lighter blue */
.blue-lightest { color: hsl(210, 100%, 85%); }  /* Lightest blue */

/* Variations by changing saturation */
.saturated { color: hsl(210, 100%, 50%); }      /* Full saturation */
.medium { color: hsl(210, 70%, 50%); }          /* Medium */
.desaturated { color: hsl(210, 30%, 50%); }     /* Low */
.grayish { color: hsl(210, 10%, 50%); }         /* Nearly gray */

/* Variations by changing lightness */
.dark { color: hsl(210, 100%, 20%); }           /* Very dark */
.normal { color: hsl(210, 100%, 50%); }         /* Normal */
.light { color: hsl(210, 100%, 80%); }          /* Light */
.pastel { color: hsl(210, 100%, 90%); }         /* Pastel */

6. HSLA

HSLA is like HSL with an added alpha channel for transparency.

/* HSLA */
.overlay {
    background-color: hsla(0, 0%, 0%, 0.7);     /* 70% opaque black */
}

/* Gradient with HSLA */
.gradient {
    background: linear-gradient(
        135deg,
        hsla(210, 100%, 50%, 0.8),
        hsla(270, 100%, 50%, 0.8)
    );
}

/* Card shadow */
.card {
    box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.15);
}

/* Transparent background */
.glass {
    background-color: hsla(0, 0%, 100%, 0.9);
    backdrop-filter: blur(10px);
}

7. Opacity Property

The opacity property controls the transparency of the entire element (including its content).

/* Full opacity (default) */
.full {
    opacity: 1;
}

/* Semi-transparent */
.semi {
    opacity: 0.5;
}

/* Transparent */
.transparent {
    opacity: 0;
}

/* Hover effect */
.card {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.card:hover {
    opacity: 0.8;
}

/* Loading effect */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Transparent image */
.watermark {
    opacity: 0.3;
}

Difference between opacity and rgba/hsla

/* opacity: transparent for the ENTIRE element (including text) */
.transparent-box {
    background-color: red;
    opacity: 0.5;   /* The text becomes transparent too */
}

/* rgba/hsla: transparent for the BACKGROUND only */
.semi-transparent-box {
    background-color: rgba(255, 0, 0, 0.5);  /* Text stays opaque */
    color: black;  /* Text is unaffected */
}

8. Color Contrast and Accessibility

Adequate color contrast is very important for accessibility. The WCAG (Web Content Accessibility Guidelines) standard defines minimum contrast ratios:

  • Level AA: Minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text
  • Level AAA: Minimum contrast ratio of 7:1 for normal text, 4.5:1 for large text
/* Color combinations safe for accessibility */
.text-on-white {
    color: #333333;  /* High contrast against a white background */
    background-color: #ffffff;
}

.text-on-dark {
    color: #ffffff;  /* High contrast against a dark background */
    background-color: #1a1a1a;
}

/* Avoid this combination */
.bad-contrast {
    color: #aaaaaa;  /* Low contrast against white */
    background-color: #ffffff;
}

/* Use tools to check contrast */
.accessible-link {
    color: #0066cc;
    text-decoration: underline;
}

.accessible-link:hover {
    color: #004499;
}

9. CSS Color Level 4 (Modern Color Functions)

CSS Color Level 4 introduces new, more advanced color formats.

oklch() - Oklch Color

/* oklch(lightness chroma hue) */
h1 {
    color: oklch(0.5 0.2 260);     /* Vivid blue */
}

p {
    color: oklch(0.3 0.1 0);       /* Dark red */
}

.card {
    background-color: oklch(0.95 0.02 260);  /* Very light blue */
}

/* oklch with alpha */
.overlay {
    background-color: oklch(0 0 0 / 0.7);  /* Transparent black */
}

color-mix() - Mixing Colors

/* Mixing two colors */
.mixed {
    color: color-mix(in srgb, #3498db 50%, #e74c3c 50%);
    /* Result: purple (a mix of blue and red) */
}

/* 70% blue, 30% red */
.more-blue {
    color: color-mix(in srgb, #3498db 70%, #e74c3c 30%);
}

/* Mixing with oklch */
.mixed-oklch {
    color: color-mix(in oklch, oklch(0.6 0.2 260) 50%, oklch(0.6 0.2 20) 50%);
}

color() - Wide Gamut Colors

/* display-p3 - more vivid colors than sRGB */
.vivid {
    color: color(display-p3 0.2 0.5 0.9);
}

/* a98-rgb */
.wide {
    color: color(a98-rgb 0.5 0.3 0.8);
}

/* ProPhoto RGB */
.prophoto {
    color: color(prophoto-rgb 0.4 0.6 0.2);
}

Relative Color Syntax

:root {
    --base-hue: 210;
    --primary: hsl(var(--base-hue), 80%, 50%);
}

/* Creating color variations from a base */
.primary-50 {
    color: hsl(var(--base-hue) 80% 95%);
}

.primary-100 {
    color: hsl(var(--base-hue) 80% 90%);
}

.primary-500 {
    color: hsl(var(--base-hue) 80% 50%);
}

.primary-900 {
    color: hsl(var(--base-hue) 80% 10%);
}

10. Gradients (Introduction)

Gradients enable smooth color transitions. They are explained in more detail in the background tutorial.

/* Linear gradient */
.gradient-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
}

/* Radial gradient */
.radial {
    background: radial-gradient(circle at center, #3498db, #2c3e50);
}

/* Conic gradient */
.conic {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Practice: Theme Colors

:root {
    /* Primary colors */
    --primary: #3498db;
    --primary-dark: #2980b9;
    --primary-light: #5dade2;

    /* Secondary colors */
    --secondary: #95a5a6;
    --secondary-dark: #7f8c8d;
    --secondary-light: #bdc3c7;

    /* Semantic colors */
    --success: #27ae60;
    --warning: #f39c12;
    --danger: #e74c3c;
    --info: #17a2b8;

    /* Neutral colors */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* Background */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;

    /* Text */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;

    /* Border */
    --border-color: #dee2e6;
    --border-radius: 8px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #404040;

        --text-primary: #f8f9fa;
        --text-secondary: #adb5bd;
        --text-muted: #6c757d;

        --border-color: #404040;
    }
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Card with theme colors */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Button variations */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-success {
    background-color: var(--success);
    color: white;
}

.btn-danger {
    background-color: var(--danger);
    color: white;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background-color: var(--primary);
    color: white;
}

/* Alert variations */
.alert {
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    border-left: 4px solid;
}

.alert-success {
    background-color: rgba(39, 174, 96, 0.1);
    border-left-color: var(--success);
    color: var(--success);
}

.alert-warning {
    background-color: rgba(243, 156, 18, 0.1);
    border-left-color: var(--warning);
    color: var(--warning);
}

.alert-danger {
    background-color: rgba(231, 76, 60, 0.1);
    border-left-color: var(--danger);
    color: var(--danger);
}

<body>
    <div class="container">
        <div class="card">
            <h2>Card with Theme Colors</h2>
            <p>Background and text use CSS custom properties.</p>
        </div>

        <div class="alert alert-success">Operation successful!</div>
        <div class="alert alert-warning">Warning: something needs attention.</div>
        <div class="alert alert-danger">Error: something went wrong.</div>

        <button class="btn btn-primary">Primary Button</button>
        <button class="btn btn-success">Success Button</button>
        <button class="btn btn-danger">Danger Button</button>
        <button class="btn btn-outline">Outline Button</button>
    </div>
</body>

Summary

CSS supports various color formats: named colors, HEX, RGB, RGBA, HSL, HSLA, and modern formats such as oklch() and color-mix(). Each format has its own use case. HSL is more intuitive for shade/tone variations, HEX is compact for design, and RGBA/HSLA are for transparency. Use adequate color contrast for accessibility, and leverage CSS custom properties for a consistent theme.