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: #2563eb;
     --green: #16a34a;
     --amber: #d97706;
     --red: #dc2626;
     --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%; /* if gray, this gives #f5f5f5 */
     --l200: 87.5%;
     --l300: 78%;
     --l400: 68.5%;
     --l500: 59%;
     --l600: 49.5%;
     --l700: 40%;
     --l800: 30.5%;
     --l900: 21%; /* if gray, this gives #181818 */
   }

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 @layers.

Hover states and color changes

Links and buttons have built-in hover states: link text-color (usually) darkens on hover, and button background-color darkens on hover. The exceptions are blacks and whites (see below: other Codebase color utilities: black and white):

• Links colored white will stay white on hover. There is also a hover-state hover:t-white that turns a link white on hover.
• Links colored black will stay white on hover. There is also a hover-state hover:t-black that turns a link black on hover.
• Buttons that have a white background that stays white on hover. There is also a hover-state hover:bg-white that turns a background white on hover.
• Buttons that have a white background that stays black on hover. There is also a hover-state hover:bg-black that turns a background black on hover.

(Buttons includes pseudo link buttons i.e. links styled with the btn utility.)

Link text-color examples:

➡ This is an ordinary link.

<a href="">link</a>

➡This is a link that’s colored green.

➡ This is a link that’s colored black.

➡ This is a link that’s colored gray, turning to black on hover.

<a class="t-green" href="">link</a>

<a class="t-white" href="">link</a>

<a class="t-blue t-200 hover:t-white" href="">link</a>

<a class="t-black" href="">link</a>

<a class="t-gray hover:t-black" href="">link</a>

Button (and pseudo link button) examples:

➡ This is a button with default coloring.

<button type="button">button</button>

➡ This is a button with light green coloring.

➡ This is a button. See user interface colors.

<button class="bg-green bg-200 type="button">button</button>

<button class="success" type="button">button</button>

<button class="bg-white" type="button">button</button>

<button class="bg-blue bg-200 hover:bg-white" type="button">button</button>

<button class="t-white bg-black" type="button">button</button>

<button class="t-white bg-blue bg-700 hover:bg-black" type="button">button</button>

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

<button class="b-thin b-green bg-transparent t-green t-600 hover:t-white hover:bg-green bg-500" type="button" name="button">Button</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)

Notes:

1. 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.
2. The [black and white](#black-and-white) colors don’t come with a built-in middle shade. Therefore, when being used with bg-filter or bg-filter they must always be accompanied with one of the background shades bg-100 though bg-900.

Examples: