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

Essential React Native UI & Interaction Components

Jul 01, 2025

Essential React Native UI & Interaction Components React Native provides a powerful set of built-in components for creating native mobile apps....

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

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

Mastering Laravel Context: Advanced Logging and Contextual Job Tracing

Jul 20, 2025

Laravel Context is one of the most powerful new features in Laravel 12. It allows you to attach contextual data (like user ID, IP address, request pat...

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

Color Everything in CSS – Simple Guide

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