Palette Configurator
Pick your brand colors and preview the generated OKLCH palette. Copy the config to use in your project.
Brand Colors
Choices persist in your browser via localStorage .
brand
primary
secondary
blue
ultralight
lightest
light
default
medium
darker
darkest
accent
light
medium
default
dark
darker
deepBlue
neutral
lightest
lighter
light
default
dark
darker
slate
light
default
dark
darkest
system
success
warning
error
info
state
overlay
disabled
uno.config.ts
createSdsConfig({
primary: '#0040c5',
secondary: '#00b0f0',
})