Skip to main content

Colors

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}-{shade} syntax, where {palette} is the name of the color group (e.g., primary, danger, ..) and {shade} is a number from 5 to 95 in increments of 5, representing the color’s lightness.

.element {
  background-color: var(--dwc-color-primary-40);
  color: var(--dwc-color-primary-text-40);
}
Shade Value Scale

Shade values range from 5 (darkest) to 95 (lightest), increasing in steps of 5.

Color palettes​

There are several built-in color palettes, each designed for semantic use cases such as branding, success messages, warnings, and more. Each palette is composed of dynamically generated tints and shades based on three key properties: hue, saturation, and contrast-threshold.

Available palettes​

  • default: A neutral gray-based palette tinted with the primary color, used for most components.
  • primary: Typically represents your brand’s primary color.
  • success, warning, danger: Semantic palettes used for appropriate status indicators.
  • info: An optional complementary palette for secondary emphasis.
  • gray: A true gray-scale palette, untinted.
  • black/white: Static color values

Primary

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Success

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Warning

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Danger

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Info

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Gray

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Default

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

BlackWhite

Black
White

DWC HueCraft

To simplify the process of generating WCAG-compliant palettes for your webforJ applications, you can use the DWC HueCraft tool. It supports palette creation based on brand colors or logos and allows quick CSS export.

Dark mode behavior​

webforJ supports a flipped color strategy in dark mode. Rather than using entirely separate color palettes, it inverts the way lightness values are interpreted.

This means that in dark themes, lower shade values (e.g., --dwc-color-primary-5) become light and higher values (e.g., --dwc-color-primary-95) become dark. The logic is reversed to ensure optimal contrast and readability across backgrounds.

Your component code stays the same, regardless of the theme. For example:

.button {
  background-color: var(--dwc-color-primary-40);
  color: var(--dwc-color-primary-text-40);
}

In light mode, this gives a mid-tone background. In dark mode, it still gives a mid-tone, but flipped visually to work on dark surfaces. This approach avoids duplication, keeps your styles consistent, and keeps visual transitions smooth when switching between light and dark themes.

Palette configuration variables​

Each palette is generated based on the following variables:

VariableDescription
hueThe angle (in degrees) on the color wheel. Unitless values are interpreted as degrees.
saturationA percentage indicating color intensity. 100% is fully saturated; 0% is grayscale.
contrast-thresholdA value between 0 and 100 that determines whether text should be light or dark based on background lightness.

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%;
  --dwc-color-primary-c: 60;
}

Theming components with abstract variables​

To simplify styling and consistency across components, webforJ introduces an abstraction layer over the base color palettes. This layer is built on abstract theme variables - CSS custom properties that refer to specific shades within a color palette.

These variables make it easier to apply themes across all components without directly referencing raw color values or swatches. You can think of them as semantic styling shortcuts that reflect your app's intent rather than its implementation details.

Variable groups​

Abstract theme variables are organized into four groups:

  1. Normal Used for the default appearance, such as backgrounds and text on inactive components.
  2. Dark Used for active or selected states.
  3. Light Used for hover and focus states.
  4. Alt Used for secondary highlights, such as keyboard focus or subtle UI accents.

Each group defines:

  • A background color
  • A foreground (text) color
  • A border color (for focused/hovered/active states)
  • A focus ring (used when the component receives visible focus)

Each tab below shows the abstract variables defined for a specific palette (primary, success, danger, etc.). These variables pull values from the underlying palette (e.g., --dwc-color-primary-40) and make them reusable across your app.

For example, instead of directly using --dwc-color-primary-40, you can apply --dwc-color-primary, which abstracts the role of that color as the default background for a primary-styled component.

Changing the palette values in one place will update the look of all components that rely on these abstract variables.

Normal state​

Used for the base, neutral appearance of a component—when it’s idle and not being interacted with.

VariableDescription
--dwc-color-${name}The default background color. Also used for borders in many components.
--dwc-color-on-${name}-textThe text color shown on top of the default background.
--dwc-color-${name}-textThe text color when the component is placed on the surface background.
--dwc-border-color-${name}Border color, mainly used for hover, focus, and active states.
--dwc-focus-ring-${name}Focus ring shadow when the component receives focus-visible styling.

Darker variant​

Used for selected or active states—usually a deeper tone for stronger contrast and emphasis.

VariableDescription
--dwc-color-${name}-darkA darker version of the base color. Often used for pressed or selected states.
--dwc-color-on-${name}-text-darkText color when used on a dark background.
--dwc-color-${name}-text-darkA slightly darker text alternative when shown on the surface.

Lighter variant​

Used for hover, focus, and less dominant visual cues. These are soft tones designed for subtle interaction feedback.

VariableDescription
--dwc-color-${name}-lightA lighter version of the base color. Typically used for hover/focus backgrounds.
--dwc-color-on-${name}-text-lightText color when shown on a light background.
--dwc-color-${name}-text-lightA lighter text tone for use in less prominent states.

Alt variant​

Used for secondary emphasis or UI highlights—such as keyboard navigation focus outlines or auxiliary indicators.

VariableDescription
--dwc-color-${name}-altA very light version of the color, mainly used for highlights or background glows.
--dwc-color-on-${name}-text-altText color when the background is the alternate (alt) color.
--dwc-color-default-dark: var(--dwc-color-default-85);
--dwc-color-on-default-text-dark: var(--dwc-color-default-text-85);
--dwc-color-default-text-dark: var(--dwc-color-default-35);

--dwc-color-default: var(--dwc-color-default-90);
--dwc-color-on-default-text: var(--dwc-color-default-text-90);
--dwc-color-default-text: var(--dwc-color-default-40);

--dwc-color-default-light: var(--dwc-color-default-95);
--dwc-color-on-default-text-light: var(--dwc-color-default-text-95);
--dwc-color-default-text-light: var(--dwc-color-default-45);

--dwc-color-default-alt: var(--dwc-color-primary-alt);
--dwc-color-on-default-text-alt: var(--dwc-color-on-primary-text-alt);

--dwc-border-color-default: var(--dwc-border-color-primary);
--dwc-focus-ring-default: var(--dwc-focus-ring-primary);