[Note] CSS Color Options: Why is OKLCH better ?

Mon, 04 Aug 2025 00:00:00 +0000

TLDR;

Use OKLCH over HSL/HSV/RGB/HEX because:

Readable and Predictable: OKLCH is human-readable and offers predictable results for color transformations, unlike RGB or hex.
Perceptual Lightness: OKLCH provides consistent perceived lightness, unlike HSL, which improves color modifications and accessibility.
Palette Generation: Designers can define formulas to automatically generate color palettes, simplifying design systems.

Why is OKLCH better than other colours?

Readable and Predictable (OKLCH vs HEX, RGB, OKLAB)

Compared to other colour options such as RGB and Hexadecimal, OKLCH, HSL (and OKLAB, HSV) is much more readable and predictable by the human brain if you are familiar with the cylindrical colour model, hence making it convenient for colour modification.

Emmet Syntax and Wrap with Abbreviation

Mon, 28 Jul 2025 00:00:00 +0000

Introduction

Emmet is a common built-in software for text editors that dramatically speeds up coding in HTML (or XML, XSLT, and other structured formats) by using CSS-like abbreviations and shortcuts that expand into full code blocks. It essentially allows developers to write less code while still achieving the same output.

– Wikipedia Emmet

Expand Abbreciation

You may use emmet to write very short abbreviated snippet that will expand to a proper HTML element(s), listed below are some of the very common use cases: