Skip to main content

Colors

Open in ChatGPT

webforJ provides a color system built on CSS custom properties. These color variables keep consistent visual style across your app while giving you full control to customize palettes according to your design needs.

You can reference any color using the --dwc-color-{palette}-{step} syntax, where {palette} is the name of the color group (e.g., primary, danger, ..) and {step} is a number from 5 to 95 in increments of 5, representing the color's lightness.

.element {
  background-color: var(--dwc-color-primary-50);
  color: var(--dwc-color-on-primary-text-50);
}
Shade Step Scale

Step values range from 5 (darkest) to 95 (lightest), increasing in steps of 5. Step 5 is always the darkest and step 95 is always the lightest, regardless of light or dark mode.

Color palettes​

DWC configures seven palettes plus the black/white palette where each palette is a set of variations (shades and tints) of a semantic color.

Available palettes​

  • default: A neutral palette tinted with the primary hue, used for most component backgrounds, borders, and neutral UI elements.
  • primary: Typically represents your brand's primary color.
  • success, warning, danger: Semantic palettes used for appropriate status indicators.
  • info: A complementary palette for secondary emphasis.
  • gray: A pure gray-scale palette, untinted.
  • black/white: Dynamic mode-aware colors that adapt to the current theme. Near-black in light mode becomes near-white in dark mode, and vice versa.

Palette seeds​

Each palette is generated from two seed variables: hue and saturation. Setting these two values generates all 19 steps automatically.

Seed VariableDescription
--dwc-color-{name}-hThe hue angle of the seed color (0-360).
--dwc-color-{name}-sThe saturation percentage. 100% is fully saturated, 0% is completely unsaturated (gray).

You can adjust a palette by redefining these variables in your root styles. For example, to modify the primary palette:

:root {
  --dwc-color-primary-h: 225;
  --dwc-color-primary-s: 100%;
}
VariableDefault Value
--dwc-color-primary-h223
--dwc-color-primary-s91%

Direct seed override​

Each palette also exposes a --dwc-color-{name}-seed variable. By default this is constructed from the hue and saturation values, but you can override it directly with any valid CSS color to bypass the hue/saturation system entirely.

:root {
  --dwc-color-primary-seed: #6366f1;
}

Hue rotation​

The palette generator applies a subtle hue rotation across steps to create more natural-looking palettes. Darker shades shift slightly warm while lighter shades shift slightly cool. This mimics how real pigments behave and prevents palettes from looking flat or synthetic.

VariableDefault ValueDescription
--dwc-color-hue-rotate3Degrees of hue shift across the palette. Set to 0 to disable.

Generated variables per step​

Each palette generates 19 steps (5 through 95). For each step, the following variables are produced:

Variable PatternDescription
--dwc-color-{name}-{step}The palette shade at that step.
--dwc-color-{name}-text-{step}A surface-safe text color derived from that step (WCAG AA compliant).
--dwc-color-on-{name}-text-{step}Text color for use ON the shade as a background (auto-flips light/dark).
Accessibility

All generated text colors meet WCAG AA contrast requirements automatically. You don't need to calculate contrast ratios yourself.

The top row shows the shade with its on-text color (for text placed directly on that shade). The bottom row shows the text color on a surface background:

Additional generated variables​

Variable PatternDescription
--dwc-color-{name}-tintThe seed color at 12% opacity, for subtle highlight backgrounds.
--dwc-border-color-{name}Mode-aware border color tinted with the palette hue.
--dwc-border-color-{name}-emphasisStronger mode-aware border color for hover, focus, and active states.
--dwc-focus-ring-{name}Focus ring shadow for the palette.

Global colors​

These are mode-aware colors that adapt automatically to light and dark themes.

VariableDescription
--dwc-color-blackNear-black in light mode, near-white in dark mode.
--dwc-color-whiteNear-white in light mode, near-black in dark mode.
--dwc-color-body-textDefault body text color (uses --dwc-color-black).

Component themes​

DWC abstracts the usage of the available palettes with a higher-level set of semantic variation variables. Components use these variations rather than raw step numbers, because variations adapt automatically to light and dark modes.

The variations are divided into three groups: normal, dark, and light.

  1. normal variables are the base color, used for backgrounds and primary UI elements.
  2. dark variables are used mainly for active/pressed states.
  3. light variables are used mainly for hover/focus states.
--dwc-color-primary-dark: var(--dwc-color-primary-45)
--dwc-color-primary: var(--dwc-color-primary-50)
--dwc-color-primary-light: var(--dwc-color-primary-55)
--dwc-color-primary-alt: var(--dwc-color-primary-tint)

--dwc-color-primary-text-dark: var(--dwc-color-primary-text-40)
--dwc-color-primary-text: var(--dwc-color-primary-text-45)
--dwc-color-primary-text-light: var(--dwc-color-primary-text-50)

--dwc-color-on-primary-text-dark: var(--dwc-color-on-primary-text-45)
--dwc-color-on-primary-text: var(--dwc-color-on-primary-text-50)
--dwc-color-on-primary-text-light: var(--dwc-color-on-primary-text-55)
--dwc-color-on-primary-text-alt: var(--dwc-color-primary-text)

Variation reference​

VariableDescription
--dwc-color-{name}The base color. Used for backgrounds, fills, and borders.
--dwc-color-{name}-darkA darker version. Used for active/pressed states.
--dwc-color-{name}-lightA lighter version. Used for hover/focus states.
--dwc-color-{name}-altThe seed at 12% opacity. Used for subtle highlight states.
--dwc-color-{name}-textText color safe on app surfaces (WCAG AA).
--dwc-color-{name}-text-darkDarker text variation.
--dwc-color-{name}-text-lightLighter text variation.
--dwc-color-on-{name}-textText color for use ON --dwc-color-{name} as background.
--dwc-color-on-{name}-text-darkText color for use ON --dwc-color-{name}-dark.
--dwc-color-on-{name}-text-lightText color for use ON --dwc-color-{name}-light.
--dwc-color-on-{name}-text-altText color for use ON --dwc-color-{name}-alt.
--dwc-border-color-{name}Mode-aware border color.
--dwc-border-color-{name}-emphasisStronger mode-aware border color.
--dwc-focus-ring-{name}Focus ring shadow.