color-kitnext

@pbroom/color-kit/driverColor string input

formatColorStringInputValue

Formats a color for a text input. 'hex' first gamut-maps into sRGB (chroma reduction), so an out-of-gamut color shows its mapped hex; 'rgb', 'hsl' and 'oklch' go through toCss without mapping (CSS rgb() clips each channel).

functionimport { formatColorStringInputValue } from '@pbroom/color-kit/driver';color-string-input.ts:27
function formatColorStringInputValue(
  color: Color,
  format: ColorStringInputFormat,
): string;

Parameters

colorColor
formatColorStringInputFormat

Returns

string

Throws

  • When format is not a supported format, e.g. the removed 'p3' (the message suggests 'display-p3').

Example

TypeScript
import { parse } from '@pbroom/color-kit';
import { formatColorStringInputValue } from '@pbroom/color-kit/driver';

const vivid = { l: 0.75, c: 0.22, h: 150, alpha: 1 };
formatColorStringInputValue(vivid, 'hex'); // → '#00d061'
formatColorStringInputValue(vivid, 'rgb'); // → 'rgb(0 210 90)'
formatColorStringInputValue(parse('#3b82f6'), 'oklch'); // → 'oklch(0.6231 0.188 259.81)'