Blog
In-depth articles on color for the web — perceptual color spaces, design tokens, accessibility, and CSS color features in production.
Chat and Game Color Codes: Discord, Minecraft, and Roblox
Minecraft § codes, Roblox BrickColor and rich text, and what Discord actually supports—embeds yes, arbitrary message color no.
Fixing Color Fringing on AI Background Removals
AI matting leaves halos and background spill on edges. Defringe in Photoshop, sample pixels, or re-shoot when the fix costs more than the asset.
Generative AI and Brand Palettes: A Production Workflow
Use Midjourney and Firefly for mood boards, not final tokens. Extract palettes, run legal review, map to OKLCH after clearance.
Using AI to Document Color Tokens (Without Lying)
LLMs draft tables and guidelines. Humans verify hex. Never trust AI for contrast math.
Rebranding Without Breaking WCAG: A Color QA Workflow
Token migration, contrast regression matrices, stakeholder sign-off, APCA review, and phased deploy for safe rebrands.
Duotone Heroes With CSS Blend Modes
Linear-gradient overlays plus multiply and screen. OKLCH duotone without Photoshop exports.
AI Recoloring Product Photos Without Breaking Brand
Generative recolor shifts pixels fast. Brand compliance still needs OKLCH sampling, edge checks, and license diligence.
AI-Generated Images and Commercial Web Use
Midjourney, DALL·E, and Adobe Firefly each treat ownership differently. Read the terms before the hero goes live.
AI Color Palette Tools: What They Get Wrong
Khroma, Coolors, and Firefly generate beautiful swatches. They still cannot ship your design system without human verification.
Tailwind v4 Theme Colors in CSS
@theme moves color tokens into CSS. Fewer JavaScript config files, same discipline about naming.
W3C Design Tokens 2025.10: Color Finally Has a Standard
DTCG's stable 2025.10 release defines OKLCH, Display P3, aliases, and JSON color tokens tools can finally agree on.
Why Your Brand Blue Looks Wrong on Screen
CMYK and Pantone live in different gamuts than sRGB. Translate print specs into digital tokens.
Material Design 3 Dynamic Color on the Web
Seed color to tonal palettes in HCT—not Android-only. Ship Material You themes with CSS variables.
Dominant Color Extraction: k-Means, Median Cut, and ML
How palette-from-photo tools cluster pixels—k-means vs median cut, RGB pitfalls, OKLCH upgrades, and what ML adds.
How Image Color Pickers Work: Canvas, Pixels, and Gamut
The browser pipeline behind sampling hex from a photo—drawImage, getImageData, CORS taint, averaging, and OKLCH conversion.
Steal a Palette From a Photograph
Sample colors from a reference image, then build a token set that survives hover states and dark mode.
Animating Color in OKLCH Without the Flash
RGB color transitions muddy through gray. Interpolate OKLCH with @property, respect prefers-reduced-motion, and stop the flash.
forced-colors Mode: When Windows Takes Your Palette
High Contrast and forced-colors strip your brand colors. System colors, forced-color-adjust, and what still works.
Building Color Ramps With color-mix()
One OKLCH anchor plus color-mix() can produce a 50–950 ramp in CSS—if you mix in the right space and plan fallbacks.
Relative Colors in CSS: The from Keyword
Derive hovers, borders, and semantic variants from one token without a preprocessor.
Gradients Without the Gray Dead Zone
Blue-to-red in sRGB muds through gray. Interpolate in OKLCH instead.
Why Oklab Won: The Science Behind Your CSS Palettes
Björn Ottosson built Oklab in 2020 to fix HSL's perceptual lies. Photoshop, browsers, and W3C tokens followed.
P3 and Wide-Gamut CSS on Real Screens
sRGB is not the ceiling on modern hardware. Specify richer colors with fallbacks.
Your HSL Palette Lies to You
Equal HSL lightness is not equal brightness. OKLCH fixes the math your design system depends on.
accent-color: The One-Line Form Theme
One property tints native checkboxes, radios, ranges, and progress bars—where it works, where it stops, and dark mode pairing.
Focus Ring Colors That Pass WCAG 2.2
SC 2.4.7, 2.4.11, and 2.4.13 define different jobs. Token focus rings for all three.
Success, Warning, Error: Semantic Status Colors That Work
Red and green alone fail WCAG 1.4.1. Build OKLCH status ramps with icons, text, and dark mode pairs that work globally.
SVG Icons and currentColor
One token updates text and icons together—if you stop hard-coding fills.
Checking Color Before You Ship
Simulation and contrast checks catch problems mockups hide.
APCA and WCAG: Two Ways to Measure Readability
WCAG 2.x contrast ratios are the legal baseline. APCA models perceived lightness differently. Know which to use when.
Figma Variables to CSS Custom Properties
A naming contract both teams can sign before the first export.
Dark Mode Tokens That Fail Quietly
Inverted hex is not a theme. Separate surfaces, text, and borders or pay in QA.
Sass and @theme: Build-Time and Runtime Tokens
Sass still compiles design JSON. Tailwind v4 and custom properties own the browser.
When the OS Overrides Your Colors
forced-colors and prefers-contrast break custom palettes. Plan for them.
Background Colors With color-mix()
Tinted panels without alpha. Hovers without a preprocessor.
Styling Links Without Losing Affordance
Custom link color is fine. Custom link affordance is not optional.
Naming Color Tokens Semantically
gray-500 dies on rebrand day. surface-raised does not.
Link Color in HTML Email
Underline plus hex. No pseudo-classes in the inbox.
Text Color in HTML Email
Inline color when stylesheets do not survive. Hex, Outlook, and contrast on tinted cells.
Background Colors in HTML Email
Table cells, solid hex, pre-computed tints.
Storing Color in CSS: A Format Decision Tree
Hex for paste. OKLCH for math. Custom properties for runtime. Pick one layer per job.