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

Laravel 12.18.0 Update

Jun 17, 2025

Laravel 12.18.0 Update The Laravel team released version 12.18.0 with several cool updates: String encrypt() & decrypt() helpers are...

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...

Task Reminder with Laravel & MongoDB

Jun 30, 2025

📌 Building a Task Reminder App This guide shows how to set up a Laravel app using MongoDB to implement a task reminder system with authentication,...

Laravel Queue & Job System: From Table Creation to Production Deployment

Jul 01, 2025

🚀 Laravel Queue & Job System We’re gonna walk you through Laravel queues from setup to deploying in production using Supervisor. Step 1...

Laravel 12.19: Elegant Query Builders with PHP Attributes

Jul 07, 2025

Laravel 12.19: Elegant Query Builders with PHP Attributes In Laravel 12.19, you can now use the #[UseEloquentBuilder] PHP attribute to assign a cus...

Using Web Components the Smart Way

Jul 06, 2025

Using Web Components the Smart Way A lot of developers assume Web Components are meant to replace full SPA frameworks like React or Vue. But in rea...