Color Everything in CSS – Simple Guide

June 26, 2025

Color Everything in CSS – Simple Guide

Today we’re diving into CSS colors: how to define them, especially with modern methods like lab() and oklch().

1. What’s a “color”?

Color isn’t a physical property. It’s a perception created by our brain when light hits our eyes.

2. Color Spaces

These are 3D mappings of color. Some examples:

sRGB: The default space on most screens.
CIELAB & Oklab: Offer more perceptually uniform color transitions.
color(display-p3 ...): Supports a wider variety of colors on modern displays.

3. Color Models

Like RGB or HSL—numeric representations. They need a color space to mean anything.

4. Color Gamuts

It’s the range of colors a space can represent. If a display can’t show a color, it's “out of gamut”.

5. CSS Color Functions

rgb(), hsl(), hwb(): For basic sRGB colors.
lab(), lch(): For CIELAB space.
oklab(), oklch(): For Oklab space.
color(), color-mix(): To tap into spaces like display‑p3, rec2020, etc.

Code examples:

.box-srgb {
  background: rgb(255, 100, 50);
}
.box-oklab {
  background: oklab(70% 0.05 -0.10);
}
.box-display-p3 {
  background: color(display-p3 1 0.2 0.3);
}

TL;DR

Color space = how colors are mapped.
Color model = numeric representation, needs a space.
Color gamut = available color range.
Modern CSS lets us use all these with proper functions.

Blog

React Labs: View Transitions & Activity

Jun 17, 2025

React Labs: View Transitions & Activity Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental featu...

Essential React Native UI & Interaction Components

Jul 01, 2025

Essential React Native UI & Interaction Components React Native provides a powerful set of built-in components for creating native mobile apps....

CSS Specificity: Layers vs BEM vs Utility Classes

Jun 26, 2025

CSS Specificity: Cascade Layers vs BEM vs Utility Classes This article compares three approaches to managing CSS specificity — BEM, utility‑f...

Laravel 12.16.0 - New Features for Developers

Jun 03, 2025

Laravel 12.16.0 - New Features for Developers 1. New Validation Rule: in_array_keys You can now validate that an array contains at least one of the...

How OAuth Works

Jun 29, 2025

How OAuth Works OAuth is a protocol that allows third-party applications to access user data without sharing passwords. It's the backbone of secure a...

Supercharge Your PHP Enums with archtechx/enums

Jul 01, 2025

Supercharge Your PHP Enums with archtechx/enums PHP 8.1 introduced native enums—type‑safe sets of named values like statuses or roles. The arch...