Code & tokens
Export any palette into production-ready code for web, mobile, and design systems. Pick colors by hand or generate a random harmony, then copy tokens instantly.
Choose a target and open a dedicated generator with the palette builder.
CSS custom properties and utility declarations.
Open generatorSass variables and maps for design tokens.
Open generatorLESS variables for stylesheet systems.
Open generatorStylus variables for expressive CSS.
Open generatorTailwind theme extension snippets.
Open generatorBootstrap SCSS variable overrides.
Open generatorMUI palette object for createTheme.
Open generatorChakra theme color tokens.
Open generatorReact theme constants and CSS-in-JS objects.
Open generatorReact Native StyleSheet color map.
Open generatorFlutter Color constants.
Open generatorSwiftUI Color extensions.
Open generatorAndroid colors.xml resources.
Open generatorPortable JSON design tokens.
Open generatorYAML tokens for pipelines and configs.
Open generatorLive playground
Palette builder
Export
:root {
--brand-1: #e11d48;
--brand-2: #db2777;
--brand-3: #c026d3;
--brand-4: #f59e0b;
--brand-5: #111827;
}