Modern CSS Color Spaces: A Practical Guide to oklch and lab
RGB and HSL are not perceptually uniform. oklch fixes that, and it changed how I build color palettes. Here is my workflow. I used to pick colors by eyeballing hex values in a picker. A client would ask for a more vibrant version of a button, and I would nudge the hex from #3b82f6 to #2563eb and hope it looked right. Then I discovered oklch, and color picking became a precise, predictable process instead of guesswork. The Problem with RGB and HSL RGB and HSL are the color spaces most web developers know. Both have a fundamental flaw: they are not perceptually uniform. A fifty percent brightness in HSL does not look the same across different hues. Blue at fifty percent lightness looks noticeably darker than yellow at fifty percent lightness. This means if you build a color palette by keeping lightness constant and rotating hue, the colors will look uneven to the human eye. I ran into this when building a chart library with six category colors. I picked six hues at fifty percent lightness and saturation in HSL. The yellow looked like a highlighter, the blue looked like a shadow,…