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

React History – A Professional Developer’s Perspective

Jul 26, 2025

1. Origins: Born Inside Facebook In 2011, Facebook engineers faced the increasing complexity of building interactive UIs at scale. They developed...

ECMAScript 2025 Detailed Update Guide for Frontend Developers

Jul 06, 2025

🔍 ECMAScript 2025 – Detailed Feature Guide All new ECMAScript 2025 features with code examples and explanation of their importance for front...

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

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

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