Color guides
Short, practical guides on color for screens: formats, contrast, palettes, dark mode and CSS. Every number is calculated, every example can be copied.
- OKLCH explained: the color format that finally matches your eyesOKLCH describes a color by how light it looks, how colorful it is and which hue it has. Unlike HSL, the same lightness value really looks equally light for every hue, which makes palettes, hover states and accessible contrast predictable.September 28, 20263 min read
- APCA vs WCAG 2: which contrast check to trustWCAG 2 contrast ratios are what the law asks for. APCA is a newer model that predicts readability much better, especially for dark themes and saturated colors. Checking both gives you text that is compliant and actually easy to read.September 28, 20263 min read
- Color gamut explained: sRGB, Display P3 and out-of-gamut colorsA gamut is the set of colors a screen or color space can show. The web was built on sRGB, but most phones and many laptops now show Display P3, which has noticeably more vivid reds, greens and oranges.September 28, 20262 min read
- Color formats explained: HEX, RGB, HSL, OKLCH and the restThe same color can be written a dozen ways. Here is what each format means, when to use it and how the same color looks in all of them.September 28, 20262 min read
- Hex color codes explained: how #RRGGBB worksA hex color code like #1e90ff is three pairs of hexadecimal digits: the amount of red, green and blue light, each from 00 (none) to ff (full, 255). Add a fourth pair to set opacity: 80 means about 50%, ff means fully solid.September 28, 20266 min read
- How to choose a color palette for a website or appStart from one brand color, generate a 50 to 950 scale from it, add slightly tinted grays and four semantic colors, then test every text pair for contrast and color blindness. Choose steps by their OKLCH lightness, not by eye: on a white background, text passes WCAG AA once lightness drops to about 0.55, whatever the hue.September 28, 20267 min read
- Dark mode colors: how to pick backgrounds, text and accentsUse a dark gray background such as #121212 instead of pure black, off-white text such as #e5e5e5 instead of pure white, and lighter, less saturated versions of your brand colors. Check text with APCA as well as WCAG 2, because WCAG 2 overrates contrast on dark backgrounds.September 28, 20266 min read
- Color harmonies: complementary, analogous, triadic and moreA color harmony picks hues at fixed angles on a color wheel: 180° apart for complementary, 30° apart for analogous, 120° apart for triadic. Rotate the hue in OKLCH rather than HSL, and the colors stay equally light, so no single hue jumps out by accident.September 28, 20265 min read
- CSS color-mix() and relative colors: tints, hovers and transparencycolor-mix() blends two colors in a color space you choose, and relative color syntax lets you edit one channel of an existing color, such as oklch(from var(--brand) calc(l - 0.1) c h). Both run in the browser, work with CSS variables and replace most Sass color functions. Mix in oklab for tints and hovers, in srgb for transparency.September 28, 20266 min read
- Color-blind friendly palettes: how to check and fix your colorsA color-blind friendly palette keeps every pair of colors distinguishable under protanopia, deuteranopia, tritanopia and grayscale. The most reliable fix is not a special hue but a lightness gap: colors about 0.2 apart in OKLCH lightness stayed distinct under every simulation we ran. Pair that with icons or labels, since color alone always fails someone.September 28, 20266 min read
- Tailwind CSS colors: the v4 OKLCH palette, custom colors and shadesTailwind CSS v4 ships 26 color scales with 11 shades each, from 50 to 950, for 286 colors defined in OKLCH as CSS variables like --color-blue-500. You add your own with @theme { --color-brand-500: oklch(...) }. The same step number does not mean the same lightness: blue-600 is the lightest blue that passes 4.5:1 on white, while yellow needs 700.September 28, 20266 min read