Colors

Kelp’s color system is split across three files.

Color Palette

The /css/theme/palette.css file defines a full rainbow of colors, assigned to CSS variables.

• --color-red-*
• --color-orange-*
• --color-yellow-*
• --color-green-*
• --color-blue-*
• --color-indigo-*
• --color-purple-*
• --color-cyan-*
• --color-pink-*
• --color-gray-*

Each color defines 11 shades, named with a numbering system that goes from very dark (*-05) to very light (*-95).

Under-the-hood, Kelp uses the oklch() function to create the shades. Each color also has a --color-*-chroma setting you can use to adjust the saturation of color.

The --color-*-hue variable defines the color. A --color-*-base is also included for reference purposes only.

:where(:root) {

	--color-red-base: #e50000;
	--color-red-hue: 29.23;
	--color-red-chroma: 1;

	--color-red-05: oklch(18.5% calc(.08 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-10: oklch(24% calc(.1 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-20: oklch(32.5% calc(.135 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-30: oklch(40% calc(.16 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-40: oklch(47% calc(.185 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-50: oklch(57% calc(.2 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-60: oklch(67% calc(.175 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-70: oklch(75% calc(.13 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-80: oklch(83.5% calc(.085 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-90: oklch(92% calc(.04 * var(--color-red-chroma)) var(--color-red-hue));
	--color-red-95: oklch(96% calc(.02 * var(--color-red-chroma)) var(--color-red-hue));

}

The default color palette uses the Progress Pride Flag for its base colors, because they’re gorgeous, and LGBTQ+ people are an integral part of the web community.

You can manually override the palette by adjusting the *-hue and *-chroma variables, or use the Theme Builder tool to create one that uses an accessible range of shades.

Semantic Colors

The /css/theme/colors.css file defines CSS variables that map colors from palette.css to semantic color variables we can use everywhere else.

This makes it easy to update the colors you use for a category, without having to change named colors across all of your CSS files.

For example, if you build a site for a client whose brand color is orange, you can change a small handful of --color-primary-* variables to --color-orange-* in colors.css, and they’ll automatically update across all of the components in Kelp.

Color Uses & Variants

Every color has three uses…

• fill - background colors
• border - borders and accents
• on - text color

And four variations…

• muted - subtle and close in lightness to normal page color
• vivid - bright and vibrant compared to the normal page color
• accent - slightly more vibrant than muted, but not much
• outline - for components where the border and text color are the same

:where(:root) {

	--color-primary-fill-muted: var(--color-blue-95);
	--color-primary-fill-accent: var(--color-blue-90);
	--color-primary-fill-vivid: var(--color-blue-50);
	--color-primary-border-muted: var(--color-blue-90);
	--color-primary-border-accent: var(--color-blue-80);
	--color-primary-border-vivid: var(--color-blue-60);
	--color-primary-on-muted: var(--color-blue-30);
	--color-primary-on-accent: var(--color-blue-20);
	--color-primary-on-vivid: white;
	--color-primary-outline: var(--color-blue-50);

}

Other Colors

The /css/theme/colors.css file also defines some other CSS color variables for things like…

• The page background and text color
• Focus
• Checked state on form checkboxes and radio buttons
• Mixes for lightening and darkening other values

The Theme Builder tool can handle updating these automatically if you update the color palette.

:where(:root) {

	/* Page & Text  */
	--color-background: white;
	--color-text-normal: var(--color-gray-10);
	--color-text-muted: var(--color-gray-50);
	--color-text-input: var(--color-gray-30);
	--color-text-code: var(--color-pink-50);
	--color-highlight: #fbf9c9;
	--color-fill-highlight: var(--color-highlight);
	--color-on-highlight: inherit;
	--color-text-link: var(--color-blue-50);
	--color-text-link-hover: var(--color-blue-40);
	--decoration-text-link: underline dotted;
	--decoration-text-link-hover: underline;

	/* State */
	--color-checked: var(--color-blue-50);
	--color-checked-icon: white;

	/* Mixes */
	--color-mix-hover: black 10%;
	--color-mix-active: black 20%;
	--color-mix-transparent: transparent 20%;
	--color-mix-deleted: transparent 40%;

	/* Focus */
	--focus-ring-color: var(--color-blue-50);
	--focus-ring-style: solid;
	--focus-ring-width: var(--size-6xs);
	--focus-ring-offset: var(--size-6xs);

}

Accessibility

The default colors (and palettes created with the Theme Builder tool) are designed to meet WCAG color contrast guidelines by following a simple formula:

• Colors with a number difference of 50 or more pass WCAG AA.
• Colors with a a number difference of 60 or more pass WCAG AAA.

Kelp’s default theme is built to meet WCAG AAA compliance.

For example, looking at the --color-primary-* colors, you’ll notice that the *-on-muted text color has a shade of 30, which is 65 away from the *-fill-muted background color shade of 95.

:where(:root) {

	--color-primary-fill-muted: var(--color-blue-95);
	--color-primary-border-muted: var(--color-blue-90);
	--color-primary-on-muted: var(--color-blue-30);

}

If you use the theme builder and stick to this guideline, you’ll increase the likelihood that your colors are accessible to users with a range of visual impairments.

Color Modes

Kelp includes a default light mode and optional dark mode.

In the /css/theme/colors.css file, CSS variables are assigned to :where(:root) and .kelp-theme-light. This makes them the default value, but also means they can explicitly override the dark theme where needed.

/* Light Theme (default) */
:where(:root),
.kelp-theme-light {
	/* ... */
}

In that same file, a smaller subset of variables are reassigned under the .kelp-theme-dark class, to adjust their value in dark mode.

/* Dark Theme */
.kelp-theme-dark {
	/* ... */
}

Cascade Layer

Color customizations are best done in the kelp.theme cascade layer.

@layer kelp.theme {
	:where(:root) {

		--color-blue-base: #0088cc;
		--color-blue-hue: 241;
		--color-blue-chroma: 0.71;

	}
}