Color generator
Pick a base color and choose an algorithm to preview an 11-step ramp, harmonized accents, and the W3C design-token tree the rest of the app consumes.
Layer 1 · Raw palette
Ramp
Tailwind · 11 steps
50#f0f6ff
100#dbe9ff
200#b7d3ff
300#8db8ff
400#5c99ff
500#246bdd
600#0652bf
700#003b92
800#002869
900#001947
950#010f2e
Layer 1b · Accents
Harmony
Complementary · primary + 1 derived
Primary#3b82f6
Accent 1#af7d00
Layer 2 · Semantic tokens
Token tree
W3C Design Tokens — primitives plus light/dark semantic role mappings.
{
"primitives": {
"color": {
"primary": {
"50": {
"$type": "color",
"$value": "oklch(0.97 0.014145171041494452 259.81452852548136)",
"$description": "primary.50"
},
"100": {
"$type": "color",
"$value": "oklch(0.93 0.03357825649102421 259.81452852548136)",
"$description": "primary.100"
},
"200": {
"$type": "color",
"$value": "oklch(0.86 0.06902288971669004 259.81452852548136)",
"$description": "primary.200"
},
"300": {
"$type": "color",
"$value": "oklch(0.78 0.11192201339257232 259.81452852548136)",
"$description": "primary.300"
},
"400": {
"$type": "color",
"$value": "oklch(0.69 0.16335157121419489 259.81452852548136)",
"$description": "primary.400"
},
"500": {
"$type": "color",
"$value": "oklch(0.55 0.18801473450792208 259.81452852548136)",
"$description": "primary.500"
},
"600": {
"$type": "color",
"$value": "oklch(0.47 0.18425443981776363 259.81452852548136)",
"$description": "primary.600"
},
"700": {
"$type": "color",
"$value": "oklch(0.38 0.153463354879308 259.81452852548136)",
"$description": "primary.700"
},
"800": {
"$type": "color",
"$value": "oklch(0.3 0.12115933887410901 259.81452852548136)",
"$description": "primary.800"
},
"900": {
"$type": "color",
"$value": "oklch(0.23 0.0928804722998181 259.81452852548136)",
"$description": "primary.900"
},
"950": {
"$type": "color",
"$value": "oklch(0.18 0.06580515707777272 259.81452852548136)",
"$description": "primary.950"
}
}
}
},
"semantics": {
"light": {
"primary": {
"background.subtle": {
"$type": "color",
"$value": "{color.primary.50}",
"$description": "background.subtle (light)"
},
"background.muted": {
"$type": "color",
"$value": "{color.primary.100}",
"$description": "background.muted (light)"
},
"border.subtle": {
"$type": "color",
"$value": "{color.primary.200}",
"$description": "border.subtle (light)"
},
"border.default": {
"$type": "color",
"$value": "{color.primary.300}",
"$description": "border.default (light)"
},
"text.tertiary": {
"$type": "color",
"$value": "{color.primary.400}",
"$description": "text.tertiary (light)"
},
"brand.primary": {
"$type": "color",
"$value": "{color.primary.500}",
"$description": "brand.primary (light)"
},
"brand.primary.hover": {
"$type": "color",
"$value": "{color.primary.600}",
"$description": "brand.primary.hover (light)"
},
"brand.primary.pressed": {
"$type": "color",
"$value": "{color.primary.700}",
"$description": "brand.primary.pressed (light)"
},
"text.on-light": {
"$type": "color",
"$value": "{color.primary.800}",
"$description": "text.on-light (light)"
},
"text.strong": {
"$type": "color",
"$value": "{color.primary.900}",
"$description": "text.strong (light)"
},
"text.emphasis": {
"$type": "color",
"$value": "{color.primary.950}",
"$description": "text.emphasis (light)"
}
}
},
"dark": {
"primary": {
"background.subtle": {
"$type": "color",
"$value": "{color.primary.900}",
"$description": "background.subtle (dark)"
},
"background.muted": {
"$type": "color",
"$value": "{color.primary.800}",
"$description": "background.muted (dark)"
},
"border.subtle": {
"$type": "color",
"$value": "{color.primary.700}",
"$description": "border.subtle (dark)"
},
"border.default": {
"$type": "color",
"$value": "{color.primary.600}",
"$description": "border.default (dark)"
},
"text.tertiary": {
"$type": "color",
"$value": "{color.primary.500}",
"$description": "text.tertiary (dark)"
},
"brand.primary": {
"$type": "color",
"$value": "{color.primary.500}",
"$description": "brand.primary (dark)"
},
"brand.primary.hover": {
"$type": "color",
"$value": "{color.primary.400}",
"$description": "brand.primary.hover (dark)"
},
"brand.primary.pressed": {
"$type": "color",
"$value": "{color.primary.300}",
"$description": "brand.primary.pressed (dark)"
},
"text.on-light": {
"$type": "color",
"$value": "{color.primary.200}",
"$description": "text.on-light (dark)"
},
"text.strong": {
"$type": "color",
"$value": "{color.primary.100}",
"$description": "text.strong (dark)"
},
"text.emphasis": {
"$type": "color",
"$value": "{color.primary.50}",
"$description": "text.emphasis (dark)"
}
}
}
}
}