Bryntum Color system

Bryntum CSS includes a basic color system used throughout the UI. It is based on CSS variables and can be easily customized to fit your design. It consists of three major parts:

  • A set of colors
  • Two main color scales
  • Two "utility" color scales used for border colors and text colors

Color set

Bryntum CSS defines a set of colors as CSS variables. These are used throughout the UI for various purposes, but can also be used directly in your own CSS for consistent coloring. The colors are:

Red, --b-color-red
Pink, --b-color-pink
Magenta, --b-color-magenta
Purple, --b-color-purple
Violet, --b-color-violet
Deep Purple, --b-color-deep-purple
Indigo, --b-color-indigo
Blue, --b-color-blue
Light Blue, --b-color-light-blue
Cyan, --b-color-cyan
Teal, --b-color-teal
Green, --b-color-green
Light Green, --b-color-light-green
Lime, --b-color-lime
Yellow, --b-color-yellow
Amber, --b-color-amber
Orange, --b-color-orange
Deep Orange, --b-color-deep-orange
Brown, --b-color-brown
Lighter Gray, --b-color-lighter-gray
Light Gray, --b-color-light-gray
Gray, --b-color-gray
Black, --b-color-black

You can easily override a color you want to change in your own CSS:

:root {
    --b-color-blue : #123456;
}

Main color scales

Starting from v7, Bryntum CSS includes two main color scales that are used throughout the refreshed UI:

  • A neutral color scale for backgrounds, borders, text and similar - --b-neutral-xx
  • A primary color scale for highlights, accents and similar - --b-primary-xx

Both scales range from --b-*-0 to --b-*-100, in steps of 5 with more steps (in 1) towards the higher extreme. In a light theme, 0 will be the darkest color and 100 the lightest, while in a dark theme it is the opposite.

Neutral color scale

These squares show the neutral color scale in the theme currently used in this documentation (you can flip between light and dark themes using the button in the top right corner):

Neutral 0, --b-neutral-0
Neutral 1, --b-neutral-1
Neutral 2, --b-neutral-2
Neutral 5, --b-neutral-5
Neutral 10, --b-neutral-10
Neutral 15, --b-neutral-15
Neutral 20, --b-neutral-20
Neutral 25, --b-neutral-25
Neutral 30, --b-neutral-30
Neutral 35, --b-neutral-35
Neutral 40, --b-neutral-40
Neutral 45, --b-neutral-45
Neutral 50, --b-neutral-50
Neutral 55, --b-neutral-55
Neutral 60, --b-neutral-60
Neutral 65, --b-neutral-65
Neutral 70, --b-neutral-70
Neutral 75, --b-neutral-75
Neutral 80, --b-neutral-80
Neutral 85, --b-neutral-85
Neutral 90, --b-neutral-90
Neutral 91, --b-neutral-91
Neutral 92, --b-neutral-92
Neutral 93, --b-neutral-93
Neutral 94, --b-neutral-94
Neutral 95, --b-neutral-95
Neutral 96, --b-neutral-96
Neutral 97, --b-neutral-97
Neutral 98, --b-neutral-98
Neutral 99, --b-neutral-99
Neutral 100, --b-neutral-100

The neutral color scale is "hard coded" for performance reasons, it is defined something like this (depending on theme):

:root {
    --b-neutral-100 : hsl(0 0 100%);
    --b-neutral-99  : hsl(0 0 99%);
    --b-neutral-98  : hsl(0 0 98%);
    ...
}

The scale can be overridden by changing the values of the variables (see the source for any dark theme).

Primary color scale

And this is the primary color scale (using the primary color used here in the documentation):

Primary 0, --b-primary-0
Primary 1, --b-primary-1
Primary 2, --b-primary-2
Primary 5, --b-primary-5
Primary 10, --b-primary-10
Primary 15, --b-primary-15
Primary 20, --b-primary-20
Primary 25, --b-primary-25
Primary 30, --b-primary-30
Primary 35, --b-primary-35
Primary 40, --b-primary-40
Primary 45, --b-primary-45
Primary 50, --b-primary-50
Primary 55, --b-primary-55
Primary 60, --b-primary-60
Primary 65, --b-primary-65
Primary 70, --b-primary-70
Primary 75, --b-primary-75
Primary 80, --b-primary-80
Primary 85, --b-primary-85
Primary 90, --b-primary-90
Primary 91, --b-primary-91
Primary 92, --b-primary-92
Primary 93, --b-primary-93
Primary 94, --b-primary-94
Primary 95, --b-primary-95
Primary 96, --b-primary-96
Primary 97, --b-primary-97
Primary 98, --b-primary-98
Primary 99, --b-primary-99
Primary 100, --b-primary-100

This scale uses the color-mix() CSS function to dynamically create the scale steps based on the primary color used (can be any color you want). To specify which primary color to use, set the --b-primary variable where you want it to apply from (it will cascade):

/* Make all buttons use Bryntum orange as their primary color */
.b-button {
    --b-primary : var(--b-color-orange);
}
Note that you can use any color, it does not have to be a color from the Bryntum color set.

These boxes show the same scale as above, but with the primary color changed to --b-color-orange:

Primary 0, --b-primary-0
Primary 1, --b-primary-1
Primary 2, --b-primary-2
Primary 5, --b-primary-5
Primary 10, --b-primary-10
Primary 15, --b-primary-15
Primary 20, --b-primary-20
Primary 25, --b-primary-25
Primary 30, --b-primary-30
Primary 35, --b-primary-35
Primary 40, --b-primary-40
Primary 45, --b-primary-45
Primary 50, --b-primary-50
Primary 55, --b-primary-55
Primary 60, --b-primary-60
Primary 65, --b-primary-65
Primary 70, --b-primary-70
Primary 75, --b-primary-75
Primary 80, --b-primary-80
Primary 85, --b-primary-85
Primary 90, --b-primary-90
Primary 91, --b-primary-91
Primary 92, --b-primary-92
Primary 93, --b-primary-93
Primary 94, --b-primary-94
Primary 95, --b-primary-95
Primary 96, --b-primary-96
Primary 97, --b-primary-97
Primary 98, --b-primary-98
Primary 99, --b-primary-99
Primary 100, --b-primary-100

Explainer for a color-mix quirk

Because of how color-mix() works, the scale has to be defined where it is used. Consider this example:

<body>
<style>
    :root {
        --color       : red;
        --mixed-color : color-mix(in srgb, var(--color), #fff 50%);
    }
</style>
<div style="background: var(--mixed-color)"></div>
<div style="--color: blue; background: var(--mixed-color)"></div>
</body>

In the example, although counter-intuitive, both divs will have the same (pale red) background color, because --mixed-color is defined in :root where --color is red. To make the second div blue, we need to define --mixed-color there:

<body>
<style>
    :root {
        --color       : red;
        --mixed-color : color-mix(in srgb, var(--color), #fff 50%);
    }
</style>
<div style="background: var(--mixed-color)"></div>
<div style="--color: blue; --mixed-color: color-mix(in srgb, var(--color), #fff 50%); background: var(--mixed-color)"></div>
</body>

A bit unfortunate, but that is how CSS variables and color-mix() works. To work around this, we define the color mixes in a .b-colorize class, that you can use to wrap any element where you want to use a different primary color:

<div class="b-colorize" style="--b-primary: red">
    <div style="background: var(--b-primary-50)"></div>
    <div style="background: var(--b-primary-80)"></div>
</div>

These boxes use a lime primary color, but are not wrapped in a .b-colorize:

These are wrapped:

Utility color scales

To keep text colors and border colors consistent, Bryntum CSS includes two utility color scales:

  • A text color scale - --b-text-xx
  • A border color scale - --b-border-xx

Both scales use a limited set of steps, taken from the neutral color scale.

Text color scale

These lines show the text color scale, which ranges from --b-text-1 (most prominent text) to --b-text-5 (least prominent text):

Text 1, --b-text-1
Text 2, --b-text-2
Text 3, --b-text-3
Text 4, --b-text-4
Text 5, --b-text-5

Border color scale

These boxes show the border color scale, which ranges from --b-border-1 (most prominent borders) to --b-border-10 (least prominent borders):

Border 1, --b-border-1
Border 2, --b-border-2
Border 3, --b-border-3
Border 4, --b-border-4
Border 5, --b-border-5
Border 6, --b-border-6
Border 7, --b-border-7
Border 8, --b-border-8
Border 9, --b-border-9
Border 10, --b-border-10