Asset Utilities

Hex → OKLCH Brand Token Exporter

Turn brand hex colors into OKLCH design tokens. Export as CSS variables, Tailwind theme, or JSON.

Tokens are step one. Xeli locks every creative to your brand tokens — automatically.

Try Xeli
:root {
  --primary: oklch(62.31% 0.1880 259.8);
  --background: oklch(20.77% 0.0398 265.8);
  --foreground: oklch(98.42% 0.0034 247.9);
}

Tokens exported. Xeli locks every creative to your brand tokens — colors, fonts, and safe zones — automatically.

Try Xeli

How to use Hex → OKLCH Brand Token Exporter

  1. 1
    Add your brand colors

    Name + hex.

  2. 2
    Pick a format

    CSS, Tailwind, or JSON.

  3. 3
    Copy the output

    Drop into your codebase.

Who this is for

  • Design system teams shipping OKLCH tokens
  • Brand teams standardising design language
  • Agencies exporting a client's token file

Frequently asked questions

Why OKLCH?

OKLCH is perceptually uniform — you can shift lightness without hue drift. Better for design systems than HSL.

Xeli locks every generated creative to your brand tokens — colors, fonts, safe zones.

Get early access