blue
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
UXDSL builds on standard CSS. Colors define the available color values; Palette assigns colors to interface roles. Both are configured in the theme JSON. Prefer palette() when a component expresses a role such as primary action or surface. Use color() when a specific color token is intentional, and standard CSS when finer control is needed.
Colors are a collection of reusable color values. You can organize them into families and shades, or define individual named entries. The shade number is a key, not a computed brightness or a guarantee of contrast.
This reference excerpt defines a color collection and connects palette roles to it using CSS variable references:
{
"colors": {
"blue": { "500": "#3b82f6", "700": "#1d4ed8" },
"white": "#ffffff",
"ink": "#0f172a"
},
"palette": {
"primary": {
"main": "var(--uxdsl__color__blue-700)",
"contrast": "var(--uxdsl__color__white)"
},
"surface": {
"main": "var(--uxdsl__color__white)",
"contrast": "var(--uxdsl__color__ink)"
}
}
}The nested entry colors.blue["700"] produces --uxdsl__color__blue-700. The nested role palette.primary.main produces --uxdsl__palette__primary-main.
References preserve the connection. In this JSON, primary.main references blue-700. Changing that color updates the role once the theme is compiled or applied. A literal hex value in a palette is also valid, but copying a color’s hex value does not create a reference to that color token.
.primary-action {
background: palette(primary.main);
color: palette(primary.contrast);
}
/* Deliberately use a specific color token */
.blue-swatch {
background: color(blue-700);
}:root {
--uxdsl__color__blue-700: #1d4ed8;
--uxdsl__color__white: #ffffff;
--uxdsl__palette__primary-main: var(--uxdsl__color__blue-700);
--uxdsl__palette__primary-contrast: var(--uxdsl__color__white);
}
.primary-action {
background: var(--uxdsl__palette__primary-main);
color: var(--uxdsl__palette__primary-contrast);
}
.blue-swatch {
background: var(--uxdsl__color__blue-700);
}The CSS shows only the variables used by these two selectors. Plain CSS custom properties provide the same reference mechanism; UXDSL connects component syntax to the theme’s shared definitions.
colors.blue["700"] to update direct consumers and palette roles that reference it.palette.primary.main to reference blue-500. Primary actions follow that role; direct color(blue-700) consumers keep their token.Apply changes through the theme build or supported runtime API. Existing overrides and active modes can affect the final value. A variant named contrast is a configured foreground color, not proof of accessible contrast; check the actual foreground/background pair in each relevant state and theme.
The swatches and examples below show the playground’s color collection. Edit a color to inspect its direct consumers and any explicitly linked palette roles. The reference JSON above stays unchanged. Editor changes update the playground’s theme/runtime state; some controls persist browser overrides. They do not write to your source JSON file.
Full spectrum of generated color scales. Click any swatch to adjust the global theme variable.
Usage example: background: color(blue-500)
.my-element {
background-color: color(blue-600);
color: color(gray-50);
}Click on any color swatch to update the UX-DSL token.
AI implementation guide
UXDSL builds on standard CSS. Colors define the available color values; Palette assigns colors to interface roles. Both are configured in the theme JSON. Prefer palette() when a component expresses a role such as primary action or surface. Use color() when a specific color token is intentional, and standard CSS when finer control is needed.
Responsibility: maintain the foundational color collection. Colors supply values to direct consumers and linked palette roles. Normally, semantic UI components consume Palette rather than selecting Colors directly.
colors and its families, shades and named entries. Treat shade numbers as keys, not calculated brightness or contrast guarantees.color(token) directly only when a specific color identity is intentional, such as a swatch representing that token.color() consumers, CSS variable references and runtime links from Palette. Equal hex values alone do not establish a dependency.Decision rule: Prefer Palette for semantic component styling. Use Colors directly only when a specific color identity is intentional. Modify a Color token only when its direct and linked consumers are intended to receive the change.
Preserve intent, not just the current computed value. A Palette role and a Color token can look identical today while responding differently to tomorrow’s theme changes.
{
"colors": {
"blue": { "500": "#3b82f6", "700": "#1d4ed8" },
"white": "#ffffff",
"ink": "#0f172a"
},
"palette": {
"primary": {
"main": "var(--uxdsl__color__blue-700)",
"contrast": "var(--uxdsl__color__white)"
},
"surface": {
"main": "var(--uxdsl__color__white)",
"contrast": "var(--uxdsl__color__ink)"
}
}
}/* A swatch intentionally represents this Color token */
.blue-swatch {
background: color(blue-700);
}The swatch intentionally consumes blue-700 directly. In the JSON, primary.main also references that Color. Updating the Color changes both; reassigning the Palette role changes its consumers while the swatch keeps representing blue-700.
Update blue-700 across the theme, including palette roles linked to it.
colors.blue["700"], its direct consumers, and palette references to it.Colors define the values. Palette defines their roles. Components express the intended use.