The Oklab Colour Space

This tool uses the Oklab colour space to create colour scales that change more evenly to the eye than traditional RGB or HSL adjustments. With this tool you can shape the Key Colour while keeping its generated shades and related colours visually balanced. This provides a more consistent starting point for building a UI colour scheme. Cycle through the 7 accents via the top bar button and every element within the page will respond.

Key colour & system controls

The Key Colour is the starting point for the entire colour system. Change the HEX or adjust the lightness, chroma and hue sliders to define it, and the 6 connected hues below all respond. The neutral background, foreground, text balance and even the font can be tweaked to dial in UI characteristics.

Generated palette

The Key Colour generates six related hues plus a neutral Fog. Each colour is presented as a seven-step scale, progressing from darker shades through the anchor colour to lighter tints. The colours are spaced using Oklab coordinates to keep each progression visually balanced and consistent.

Export your palette

Want to use these colours elsewhere? The Export button in the top bar bundles the hex codes for whichever accent is currently selected plus its seven-step scale, background, panel and text colours that you've tuned in. Pick a format, then copy and paste the hex codes straight into your project's CSS, design tool, or style guide. Building a syntax theme usually needs more than one accent — use the Full palette tab for all six hues plus the neutral, with a suggested role mapping for keywords.

CSS components

A practical check of the active accent across common UI roles. Compare buttons, fields, borders, badges and text to make sure the colour hierarchy and contrast still work in both light and dark modes.