Colors

Color Format

OKLCH by Default

All colors in Shilp CSS are defined in the oklch color format.

oklch works better, because it matches how people actually see color. When you change lightness, the color really gets lighter or darker. Gradients look smooth, not muddy, and tweaking color feels natural instead of guessy.

Compared to hex, rgb, or hsl, oklch simply produces colors that look right, not just mathematically calculated right.

To know more, see:

• OKLCH color format
• Shilp CSS Colors Dataset

Native HTML Colors

Shilp CSS also includes OKLCH equivalents for all native HTML named colors, such as orange, white, green, blue, gold, etc.

This allows you to use familiar color names. They behave like the rest of the system, predictable, themeable, and token-driven.

HTML colors names are split into words and organized as nested objects.

To know more, see:

• Shilp CSS Colors Dataset
• Native HTML Colors by MDN

Build-Time Conversion & Fallbacks

While most modern browsers began supporting the oklch color format around May 2023, Shilp CSS’s compatibility baseline starts slightly earlier January 31, 2023.

To ensure predictable behavior across all supported browsers, at build time, Shilp CSS uses Lightning CSS to transforms these values.

This means:

1. oklch to lab format conversion for internal processing

   • lab is a simpler Cartesian form, easier to clamp and serialize, and more widely supported by tooling

2. A hex format fallback is generated to ensure broad browser compatibility

This allows oklch to remain the authoring format, while the output stays safe and compatible.

To know more, check:

• Browser Support
• OKLCH Color Format
• LAB Color Format

Color Scales

Same as Tailiwind CSS, Every color in the default palette includes 11 steps, with 50 being the lightest, and 950 being the darkest.

The scale gives you enough range to express hierarchy without inventing custom values.

See:

• Tailwind CSS Color Palette
• Shilp CSS Colors Dataset

Adjusting The Opacity

You can adjust a color’s opacity using a variant.

The additional /50 is known as variant. which is to be appended to the color utility.

Built For Theming

Colors are the most visible part of theming.

Brand And Semantic Colors

Shilp CSS strongly recommends styling with brand and semantic design tokens, not just raw color values.

Instead of writing:

• color: orange;
• color: oklch(70.5% 0.213 47.604);
• color: oklch(theme(colors-orange));
• @text color-orange;

You use tokens like like primary, secondary, accent, base (neutral), success, info, warning, and danger.

Each color group provides:

• a full 50–950 scale
• a default value (without the scale)
• a matching contrast text color for darker scales
• an alternate contrast text color for lighter scales

This keeps color usage consistent, intentional, easy to theme and refactor.

See: Brand and Semantic Color Reference

Color Roles

Brand and semantic colors (primary, base, success etc.) define your palette.

Color role tokens define how your application uses that palette.

They are more of a usage-level tokens, not palette-level tokens.

Background Color + Contrast Text Color = Safe Contrast

See: Color Roles Reference

The Layering Model

Shilp CSS theming works in layers:

1. Raw palette tokens (color scales + html named colors)
2. Brand and semantic tokens (primary, success, etc)
3. Color roles tokens (--surface, --border, etc)
4. Utilities consuming tokens

Each layer depends on the previous layer (order: 1 to 4).

You rarely touch layer 1. You theme mostly at layers 2 and 3.

How Color Tokens Work

Shilp CSS maps color tokens to CSS variables.

shilp.config.jscopy to clipboard
const shilpConfig = {
	source: "react",

	extend: {
		theme: {
			colors: {
				primary: {
					//
					DEFAULT: "var(--primary)",

					fg: {
						DEFAULT: "var(--primary-fg)",
						alt: "var(--primary-fg-alt)",
					},

					50: "var(--primary-50)",
					100: "var(--primary-100)",
					...
					950: "var(--primary-950)",
				}
			},
		},
	},
};

export default shilpConfig;

The actual values are defined in CSS:

colors.csscopy to clipboard
html,
:host {
	--primary: var(--primary-600);

	--primary-fg: var(--white);
	--primary-fg-alt: var(--black);

	--primary-50: theme(colors-orange-50);
	--primary-100: theme(colors-orange-100);
	--primary-200: theme(colors-orange-200);
	...
	--primary-900: theme(colors-orange-900);
	--primary-950: theme(colors-orange-950);
}

This separation allows runtime theme switching and safe refactors.

Inline Theme Function

Shilp CSS exposes all color tokens through the inline theme(...) function. You can use it anywhere a value is expected.

.any-class {
	background-image: linear-gradient(
		in oklch to top left,
		oklch(theme(colors-primary)) 20%,
		oklch(theme(colors-accent-700) / 0.9) 50%,
		oklch(theme(colors-base-100)) 70%
	);
}

See: Inline Theme Function Configuration

Customization

You can extend / override default colors in shilp.config.js.

Colors are defined using nested objects. Each level of nesting adds an extra step when accessing the color via @intent-name utilty; or theme(...).

shilp.config.jscopy to clipboard
const shilpConfig = {
	source: "react",

	extend: {
		theme: {
			colors: {
				// you can add/override your colors here
				orange: {
					600: "64.6% 0.222 41.116",
				},
			};
		},
	},
};

export default shilpConfig;

Default Color Palette Reference