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

What’s New in ECMAScript 2025

Jun 30, 2025

What’s New in ECMAScript 2025 On June 25, 2025, Ecma International officially approved ES2025, adding several useful features: 1. 📦 Import At...

Analyze Laravel Projects with Introspect

Jul 01, 2025

Analyze Laravel Codebases with Laravel Introspect If you’re doing a complex refactor or building dev tools, Laravel Introspect helps you quer...

Comparison between Scopes + Traits × UseEloquentBuilder in Laravel

Jul 13, 2025

Laravel provides multiple ways to write reusable query logic. The two most common approaches are using Scopes with Traits or the newer #[UseEloquentBu...

Efficient Reporting & Big Data Reports with Queues

Jul 07, 2025

How to cache report queries with fixed timelines How to generate large reports asynchronously using job queues 1. 🧠 Report Query Caching wi...

Laravel 12.21.0 – A Smart Update for Cleaner Queries and Stricter Validation

Aug 03, 2025

Laravel 12.21.0 introduces two game-changing features aimed at writing cleaner, more maintainable code. The update includes the new whereValueBetwe...

Is Laravel Slow? Optimize Queries & Indexes for Maximum Performance

Jul 20, 2025

A detailed, example-rich guide to avoid slowdowns in Laravel apps by optimizing data retrieval and employing indexing smartly. 1. 🧠 Fetch Only...

The Ultimate Managed Hosting Platform