[ @sdxc/u/color ]

colorMix

Builds a color-mix(...) value string for any color-accepting property.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { colorMix } from "@sdxc/u/color";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.colorMix("oklab", { color: "currentcolor", weight: 70 }, "transparent")`	`"color-mix(in oklab, currentcolor 70%, transparent)"`

Examples

Basic example

Use colorMix to build a color-mix() value from a color space and its stops, and pass it to any color utility:

20%

50%

80%

<div mix={[...]}>
	<div
		mix={[
			bg(colorMix("oklab", { color: "var(--ui-brand-bg-solid)", weight: 20 }, "transparent")),
			fg(),
			...,
		]}
	>
		20%
	</div>
	<div
		mix={[
			bg(colorMix("oklab", { color: "var(--ui-brand-bg-solid)", weight: 50 }, "transparent")),
			fg(),
			...,
		]}
	>
		50%
	</div>
	<div
		mix={[
			bg(colorMix("oklab", { color: "var(--ui-brand-bg-solid)", weight: 80 }, "transparent")),
			fg("brand.onSolid"),
			...,
		]}
	>
		80%
	</div>
</div>

Mixing two colors

Mix two colors by passing both as stops; the color space, like oklch or srgb, decides the hue halfway between them:

srgb

oklab

oklch

<div mix={[...]}>
	<div
		mix={[
			bg(colorMix("srgb", "var(--ui-brand-bg-solid)", "var(--ui-success-bg-solid)")),
			fg("brand.onSolid"),
			...,
		]}
	>
		srgb
	</div>
	<div
		mix={[
			bg(colorMix("oklab", "var(--ui-brand-bg-solid)", "var(--ui-success-bg-solid)")),
			fg("brand.onSolid"),
			...,
		]}
	>
		oklab
	</div>
	<div
		mix={[
			bg(colorMix("oklch", "var(--ui-brand-bg-solid)", "var(--ui-success-bg-solid)")),
			fg("brand.onSolid"),
			...,
		]}
	>
		oklch
	</div>
</div>

Deriving from the text color

Mix currentcolor to derive a border or a background from the element's own text color, whatever tone that is:

brand

danger

<div mix={[...]}>
	<div
		mix={[
			fg("brand"),
			border({
				color: colorMix("oklab", { color: "currentcolor", weight: 40 }, "transparent"),
				width: 2,
			}),
			...,
		]}
	>
		brand
	</div>
	<div
		mix={[
			fg("danger"),
			border({
				color: colorMix("oklab", { color: "currentcolor", weight: 40 }, "transparent"),
				width: 2,
			}),
			...,
		]}
	>
		danger
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.colorMix("oklab", { color: "currentcolor", weight: 70 }, "transparent"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.colorMix("oklab", { color: "currentcolor", weight: 70 }, "transparent"))

Signature

u.colorMix(colorSpace: string, ...stops: ColorMixStop[])