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

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

Guide to Scroll‑Driven Animations with CSS

Jun 26, 2025

Guide to Scroll‑Driven Animations with CSS CSS animations can now be linked to user scrolling without any JavaScript — just pure CSS. 1. Thr...

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

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

React Native 0.80 & ExecuTorch: A Powerful Leap into Offline AI for Mobile Apps

Jul 28, 2025

🚀 What’s New in React Native 0.80? The React Native 0.80 release marks a pivotal moment in mobile development. This update not only enhances...