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

Explore the Most Powerful Modern Laravel Tools: Inertia.js, View Creators, and HLS — Step by Step

Jul 27, 2025

Here’s a complete breakdown of essential tools to level up your Laravel development: Inertia.js v2, View Creators, and the Laravel HLS package...

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

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

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

Redux Toolkit 2.9.0 - Deep Dive into RTK Query Enhancements & Updates

Feb 05, 2026

Understanding Redux Toolkit 2.9.0 Update The Redux Toolkit 2.9.0 release focuses primarily on optimizing RTK Query performance, streamlining asyn...

Object-Oriented Programming (OOP) – Core Concepts

Aug 09, 2025

Object-Oriented Programming (OOP) is a modern software development approach that divides an application into units called Objects that interact with...