Playground

This simulated example shows how okcolor transforms legacy CSS colors into OKLCH. The real engine runs at build time in pure JavaScript with sub-millisecond latency.

Input CSS

.hero {
color: #ff6b6b;
background: linear-gradient(#4ecdc4, #45b7d1);
}

.btn {
border: 2px solid hsl(145, 63%, 49%);
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

Output CSS

.hero {
color: oklch(67.05% 0.19255 24.67);
background: linear-gradient(in oklch, oklch(76.68% 0.11253 192.72), oklch(72.56% 0.10187 226.86));
}

.btn {
border: 2px solid oklch(67.72% 0.18951 152.54);
box-shadow: 0 2px 4px oklch(0% 0 0 / 0.2);
}