Color collection
Open Color
An open-source color scheme built for UI design — 13 palettes, each with 10 carefully calibrated shades.
What is Open Color?
Open Color is a color scheme by Heeyoung Jang, released under the MIT license. It was designed specifically for UI design — each palette is tuned so that shades can be used predictably for backgrounds, borders, text, and accents without manual contrast checking at every step.
The 13 palettes cover the full spectrum from neutral grays to vivid oranges. Within each palette, shade 0 is the lightest and shade 9 is the darkest, giving designers a consistent mental model across colors. Open Color is used in Mantine, Radix UI themes, and dozens of design systems.
Using Open Color in CSS
Open Color ships as a set of CSS custom properties. After installing the package, every shade is available as --oc-[palette]-[shade]:
@import 'open-color/open-color.css';
.button {
background: var(--oc-blue-6);
color: var(--oc-gray-0);
}