Jakub KrehelAn explanation of the OKLCH colour model.
Summary
OKLCH is perceptually uniform, which means equal numbers look equally different to the eye. Jakub builds up to that with the basics first, what a colour model is, what a gamut is, and where sRGB sits next to Display-P3. The three values are lightness, chroma and hue, and the payoff arrives when you build a set rather than pick one colour. Hold lightness and chroma steady, change only the hue, and every colour in the set carries the same weight. Doing the same thing in HSL gives you a row where some colours visibly shout louder than others.
View full writingGoes well with
better-colors
Move a project to OKLCH, and answer anything about colour.
Convert colours, generate palettes, check contrast, clamp to a target gamut, set up fallbacks. Semantic tokens rather than a pile of hexes.
npx skills add https://github.com/jakubkrehel/skills --skill better-colors
Gradient Border Plugin
Tailwind gradient borders via mask-composite.
Florian KiemCraftColorMirrors Tailwind's gradient utilities with from / via / to colour stops, configurable widths, and an animated variant.
https://gradient-border.floriankiem.com
OKLCH.fyi
Convert, generate and explore OKLCH colour.
Jakub KrehelColorPick a colour, convert between models, build a palette and check it against the sRGB and Display-P3 gamuts. The practical companion to Jakub's own writing on why perceptual uniformity changes how you build a set.
https://oklch.fyi