color-kitnext

@pbroom/color-kit/driverColor state

getColorDisplayStyles

Builds swatch styles for the active gamut. For 'display-p3', background is displayed as color(display-p3 ...) and backgroundColor is the srgbFallback color; for 'srgb' both are displayed as sRGB. Colors are formatted as given, without gamut mapping, so pass the matching entries of ColorState.displayed.

functionimport { getColorDisplayStyles } from '@pbroom/color-kit/driver';color-display.ts:58
function getColorDisplayStyles(
  displayed: Color,
  srgbFallback: Color,
  activeGamut: GamutTarget,
): ColorDisplayStyles;

Parameters

displayedColor
Color to paint (state.displayed.p3 for P3).
srgbFallbackColor
sRGB color for browsers without P3 support; only used for 'display-p3'.
activeGamutGamutTarget
Gamut to render in.

Returns

ColorDisplayStyles

Throws

  • When activeGamut is not 'srgb' or 'display-p3' (for example the removed 'p3' spelling).

Example

TypeScript
import { createColorState, getColorDisplayStyles } from '@pbroom/color-kit/driver';

const state = createColorState({ l: 0.75, c: 0.22, h: 150, alpha: 1 });
getColorDisplayStyles(state.displayed.p3, state.displayed.srgb, state.activeGamut);
// → { backgroundColor: '#00d061', background: 'color(display-p3 0.3377 0.8108 0.4099)' }