Colors

Kelp includes a robust color system that can be easily customized to your theme or brand identity.

Named Colors

The base of Kelp’s color system is a palette of 10 colors based on the gorgeous Progress Pride Flag.

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

Each color is defined by two CSS variables, one for it’s --color-*-hue and one for it’s --color-*-chroma (how vivid or saturated it is).

@layer kelp.theme {
	:root {
		--color-red-hue: 29.23;
		--color-red-chroma: 1;
	}
}

The theme builder tool can generate these variables for you from hex colors.

For each color, Kelp automatically generates a palette of 11 shades, named with a numbering system that goes from very dark (*-05) to very light (*-95), using the CSS oklch() function.

• --color-*-05 (darkest)
• --color-*-10
• --color-*-20
• --color-*-30
• --color-*-40
• --color-*-50
• --color-*-60
• --color-*-70
• --color-*-80
• --color-*-90
• --color-*-95 (lightest)

Semantic Colors

A select number of named colors get mapped to semantic color variables.

This makes it easy to update the colors you use for a category or purpose, 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-*, and they’ll automatically update across all of the components in Kelp.

Uses & Variants

Every semantic 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

@layer kelp.theme {
	: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);

	}
}

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.

Modes

Kelp includes a default light mode and optional dark mode.

CSS variables are assigned to the :root element and the .light class. This makes them the default value, and also allows you to override the dark theme when desired

/* Light Theme (default) */
:root,
.light {
	/* ... */
}

A smaller subset of variables are reassigned under the .dark class to adjust their value in dark mode.

/* Dark Theme */
.dark {
	/* ... */
}