Skip to content
beginnerPhase 31 · CSS

CSS Colors

Use hex, RGB, HSL, opacity, and CSS custom properties for color management.

30m
0 problems
Topic Progress0%

Color Formats

Color Formats

Named Colors

p { color: red; }
.nav { background: navy; }

148 named colors in CSS.

Hex Colors

p { color: #ff0000; }      /* Full hex */
p { color: #f00; }         /* Short hex */
p { color: #ff000080; }    /* With alpha */

RGB

p { color: rgb(255, 0, 0); }
p { color: rgb(255 0 0); }  /* Modern syntax */
p { color: rgb(255 0 0 / 0.5); } /* With alpha */

HSL (Hue, Saturation, Lightness)

p { color: hsl(0, 100%, 50%); }
p { color: hsl(0 100% 50%); }  /* Modern syntax */
p { color: hsl(0 100% 50% / 0.5); } /* With alpha */

HSL advantages:

  • More intuitive to adjust
  • Easy to create variations
  • Better for color palettes
/* Color palette from one hue */
.primary-100: hsl(220 100% 95%);
.primary-200: hsl(220 100% 85%);
.primary-300: hsl(220 100% 75%);
.primary-400: hsl(220 100% 65%);
.primary-500: hsl(220 100% 55%);

transparent

.overlay {
  background: transparent;
}

Color Functions

Color Functions

color-mix()

Mix two colors:

/* Mix 50% red and 50% blue */
.mixed {
  color: color-mix(in srgb, red, blue);
}

/* Custom ratio */
.primary-light {
  background: color-mix(in srgb, var(--primary) 20%, white);
}

oklch() (Modern)

Perceptually uniform color space:

/* Lightness, Chroma, Hue */
.primary {
  color: oklch(70% 0.15 250);
}

/* With alpha */
.overlay {
  background: oklch(0% 0 0 / 0.5);
}

oklab() (Modern)

Another perceptually uniform space:

.color {
  color: oklab(0.6 0.1 -0.1);
}

contrast-color() (Proposed)

Auto contrast for readability:

/* Not widely supported yet */
.button {
  color: contrast-color(var(--bg));
}

Using Color Functions

:root {
  --primary: #3b82f6;
  --primary-light: color-mix(in srgb, var(--primary), white 30%);
  --primary-dark: color-mix(in srgb, var(--primary), black 30%);
}

CSS Custom Properties

CSS Custom Properties

Basic Usage

:root {
  --primary: #3b82f6;
  --secondary: #10b981;
  --text: #1f2937;
  --bg: #ffffff;
}

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

.dark {
  --text: #f9fafb;
  --bg: #1f2937;
}

Fallback Values

.element {
  color: var(--primary, #3b82f6);
  padding: var(--spacing, 1rem);
}

Dynamic Theming

:root {
  --hue: 220;
  --primary: hsl(var(--hue) 80% 50%);
  --primary-light: hsl(var(--hue) 80% 70%);
  --primary-dark: hsl(var(--hue) 80% 30%);
}

/* Theme toggle */
.theme-red { --hue: 0; }
.theme-green { --hue: 120; }
.theme-blue { --hue: 220; }

Dark Mode

:root {
  --bg: #ffffff;
  --text: #1f2937;
  --border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f2937;
    --text: #f9fafb;
    --border: #374151;
  }
}

/* Manual toggle */
[data-theme="dark"] {
  --bg: #1f2937;
  --text: #f9fafb;
}

JavaScript Control

// Read value
const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary');

// Set value
document.documentElement.style.setProperty('--primary', '#10b981');

Practice Problems

0/3solved
Build CSS Colors Component

Create a reusable React component implementing CSS Colors. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
CSS Colors Testing

Write unit and integration tests for CSS Colors using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
CSS Colors Performance

Optimize CSS Colors for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is the advantage of HSL over RGB?

Question 1 options

2. How do you define a CSS custom property?

Question 2 options

3. What does color-mix() do?

Question 3 options

4. How do you set a fallback for a custom property?

Question 4 options

5. Which color format includes an alpha channel?

Question 5 options

Flashcards

Question

What is the difference between hex and rgb?

Click to reveal answer

Answer

Both represent colors. Hex uses # followed by 6 or 3 digits. rgb uses rgb() function with 3 values.

Question

What is HSL?

Click to reveal answer

Answer

Hue, Saturation, Lightness. A color format that's more intuitive for adjusting colors.

Question

How do you use a CSS custom property?

Click to reveal answer

Answer

Define with --name: value; Use with var(--name) or var(--name, fallback).

Question

What is color-mix()?

Click to reveal answer

Answer

A CSS function that mixes two colors in a specified color space.

Question

How do you create a dark mode with CSS?

Click to reveal answer

Answer

Use @media (prefers-color-scheme: dark) or data attributes to toggle custom property values.

Revision Notes

Key Takeaways

  • 1.HSL is more intuitive for adjusting colors
  • 2.CSS custom properties enable dynamic theming
  • 3.color-mix() creates new colors from existing ones
  • 4.Dark mode can use prefers-color-scheme or data attributes
  • 5.Custom properties have fallback values in var()

Interview Tips

  • •Know the difference between color formats (hex, rgb, hsl)
  • •Understand how CSS custom properties work
  • •Be able to implement dark mode with CSS
  • •Explain color-mix() and its use cases

Cheat Sheet

CSS Colors Cheat Sheet

Color Formats

  • Named: red, navy
  • Hex: #ff0000, #f00
  • RGB: rgb(255, 0, 0)
  • HSL: hsl(0, 100%, 50%)
  • Modern: rgb(255 0 0 / 0.5)

Color Functions

color-mix(in srgb, red, blue);
oklch(70% 0.15 250);

Custom Properties

:root {
  --primary: #3b82f6;
  --text: #1f2937;
}

.element {
  color: var(--primary, fallback);
}

Dark Mode

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f2937;
  }
}