Codebase 6 Colors

Codebase 6’s color utility class system is based on using the modern CSS oklch() function and a series of interpolated lightness variables that enable the lightness level utility classes to work.

The lightnsses for color each class are not pre-created, unlike with other CSS frameworks. E.g. if you want a light green background color, there's no bg-green-100. Instead you choose the color and lightness level separately, as bg-green bg-100. Handled this way, the stylesheet doesn’t need to be loaded with lighness classes for every color — most of which you’d never use.

The oklch() function has been baseline: widely available since March 2023. All “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability to use it (see Can I use).

In setting up the lightness utility classes, Codebase’s oklch() formulas take the hue (h) and chroma (c) values out of the base color variables, and adjusts the lightness level (l) to 50% (matching Codebase’s built-in middle lightness, i.e. --l500). This enables a perceptually uniform system of lightness levels.

The seven Codebase built-in theme colors are set using Hex # codes). But if/when you add your own in all other color system, the oklch() formulas can handle it.

Example using background bg-* utility classes (the background lightness is declared separately):

Also available: black, white, and transparent (background only) — see other Codebase color utilities.

Color and shade utility classes

All colors and lightness levels are declared in variables.css.

Color utility classes (declared in @layer color in colors.css) are prefixed acording to where the color will be applied — border b-* text t-* or background bg-*. I have named the colors according to their common names (blue, green, amber, red, gray). You can modify the root variables of these colors, and you can add your own colors.

Example border, text and background utilities:

<div class="b-heavy b-green"></div>

<div class="t-heavy t-green t-700"></div>

<div class="t-black bg-green bg-300"></div>

Example usage:

<div aria-label="Note" class="popout my-3 bl-heavy b-blue b-400 p-2 bg-blue bg-100">
  &star; Note (information) panel.
</div>

The lighness modifiers *-100 through *-900, if used alone, do not provide color. But if you use them to supplement one of the base colors above, then that color class will provide the color, and the modifier will set its lightness level.

Colors and accessibility

In any color model, color combinations must be chosen with care so that there is sufficient contrast between text and background colors for purposes of assessibility.

In your text and background color combinations, be careful to ensure that the text is readable — there needs to be an adequate contrast. Most organizations should to aim for WCAG level AA for accessibility requirements.

For WCAG level AA conformance, most user interface colors need to be mid-level (i.e. use *-500 up) if the text color is white, or lighter than the mid-level (i.e. use *-400 down) if the text color is black.

Background reading on colors and accessibility:

• Useful blog posts from The Accessibility (A11Y) Project:
  • A primer to visual impairment
  • Understanding color blindness
  • How I deal with colorblindness as a digital product designer
• Web Content Accessibility Guidelines (WCAG) 2
• Contrast and Color Accessibility (WEB AIM)
• The Coolors contrast checker
• Web Accessibility: Understanding Colors and Luminance (Mozilla Developer Network Docs)

How Codebase CSS handles color

If you want to incorporate your own colors alongside Codebase 6, to use the same lightness modifier classes, then you first need to understand how Codebase handles color. It’s a 4-step process:

1. The 7 baselayer colors are first declared as CSS variables:

   :root {
     /* Codebase 6 theme base colors */
     --blue: #0074d9;
     --green: #2ecc40;
     --amber: #ffdc00;
     --red: #ff4136;
     --purple: #b10dc9;
     --teal: #39cccc;
     --gray: #767676;
   }

2. The utility class lightness level suffixes go up in hundreds, from -100 to -900. The lower the number, the lighter the color, although the higher % lightness.

   :root {
     --l100: 97%; /* in gray, this gives ~ #f5f5f5 */
     --l200: 86.1%;
     --l300: 77.75%;
     --l400: 67.35%;
     --l500: 57.5%;
     --l600: 47.65%;
     --l700: 37.75%;
     --l800: 27.85%;
     --l900: 21%; /* in gray, this gives ~ #f181818 */
   }

3. In the variables file, Codebase colors are set up using the formula. For example, in the base text color:

   :root {
     --tc-base: oklch(from var(--gray) var(--l900) c h);
   }

4. Finally, the variable is used in a style rule:

   body {
     color: var(--tc-base);
   }

Adding your own colors the Codebase way

You can, of course, add any colors you want, and in any format you want. But if you want to add colors in a way that integrates with the Codebase system, do this:

1. You need to declare your colors first as CSS variables (preferably in the :root{}), so that they are available for the lightness utility classes.
2. You need to insert your colors before the Codebase colors CSS so that your colors can make use of the Codebase color shades. There are different ways you can do that; one of which is to use CSS @layer>s.

Other Codebase color utilities

Other color utilities included in Codebase cover black, white, and transparent (for background only, as an override).

Black and white

Black and white are explicitly named colors in baselayer. They do not have lightness levels.

• *-black / hover:*-black — named color black
• *-white / hover:*-white — named color white

<div class="t-white bg-black">...</div>

<div class="t-black bg-white">...</div>

If you want “lightness levels” between white and black, then use grays.

Transparent

• b-transparent / bg-transparent

Note: there are no text or hover states of *-transparent.

Example usage: transparent (“ghost”) buttons.

Button

Glass blurs and filters

• bg-glass (alias bg-blur) — mid opacity, blurred backround (no color)
• bg-filter — mid opacity background (no color; bg-filter has no effect by itself)

You will see no effect from these classes unless you place them on a panel in front of a photo or complex pattern. Intended for use in conjunction with background colors and shades.

Examples: