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

Top Laravel & PHP Updates for Cleaner, Faster Code

Aug 17, 2025

Laravel Global Scopes: Automatic Query Filtering Eloquent Importance: Enforce consistent filters across all model queries (e.g., Soft Del...

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

How to Make Your Website Blazing Fast – Step by Step

Jul 30, 2025

Why Performance Is Non-Negotiable In today’s fast-paced world, no one has time to wait for a slow-loading website. On mobile, users abandon...

Mastering Laravel 12 Conditional Validation

Jul 07, 2025

Mastering Laravel 12 Conditional Validation Laravel 12's validation system is super powerful, and conditional validation makes your forms...

React Hooks Complete Guide

Jul 01, 2025

🎣 Complete React Hooks Guide with Practical Examples 🧠 useState What it does: Adds local state to a function component. Code Example: impo...

Load JavaScript on Demand to Boost Site Performance

Jul 24, 2025

🧠 What is Dynamic Import? Dynamic import allows you to load JavaScript modules at runtime—only when needed. This approach is fantastic for r...