Skip to content
stopcock stopcock
Blog

Color

Every section below runs live in your browser using the actual @stopcock/color API. No canvas tricks, no precomputed swatches. Pick a base color, switch the accessibility lens, and watch every demo recalculate.

The CVD lens at the top simulates how each color appears to viewers with protanopia, deuteranopia, tritanopia, or achromatopsia. Toggling it does not change the underlying color. It only changes how this page renders it, so you can spot palettes that collapse under common color vision differences.

Accessibility lens

View every swatch below as it appears under the selected condition. The lens is for simulation only: your actual base color does not change.

Roughly 8% of men and 0.5% of women have some form of color vision deficiency. Designs that rely on hue alone fail for them.

1 · The same color in every space

2 · Lightness scale: OKLCh vs HSL

OKLCh L stepped
HSL L stepped

3 · Harmony palettes

4 · Mix gradients across spaces

5 · WCAG contrast checker

6 · Pairwise contrast matrix

7 · Gamut mapping

What’s happening

Section titled “What’s happening”

Color-value operations support direct data-first and curried data-last calls under the same name. The palette section uses both forms:

import { pipe } from '@stopcock/fp'
import { fromHex, analogous, complementary, triadic } from '@stopcock/color'


const base = fromHex('#2563eb')
const analogousDirect = analogous(base, 5)
const analogousInPipe = pipe(base, analogous(5))


const harmonies = {
  analogous: analogousDirect,
  complementary: [base, complementary(base)],
  triadic: triadic(base),
}

The mix gradient renders 13 stops by interpolating in each space:

import { pipe } from '@stopcock/fp'
import { fromHex, mixIn, type ColorSpace } from '@stopcock/color'


const base = fromHex('#2563eb')
const target = fromHex('#f97316')


const stops = (space: ColorSpace) =>
  Array.from({ length: 13 }, (_, i) => mixIn(base, target, space, i / 12))


const midpoint = pipe(base, mixIn(target, 'oklab', 0.5))

The accessibility lens calls simulate(c, type) on every color before rendering. simulate uses Machado et al. (2009) matrices applied in linear sRGB space. See the library overview for details.

Read more

Section titled “Read more”