VueCraft NPM

Formatting ​

toHslString(h, s, l, alpha?) ​

  • Takes: h, s, l: number; alpha?: number
  • Returns: string — hsl(h, s%, l%), or hsla(...) when alpha is given

Formats raw HSL components as a CSS string.

toHwbString(H, W, B, alpha?) ​

  • Takes: H, W, B: number; alpha?: number
  • Returns: string — hwb(H W% B%), with / alpha appended when alpha is given

Formats raw HWB components as a CSS string.

toOklchString(color, alpha?) ​

  • Takes: color: string — any recognized color format; alpha?: number — overrides the color's own alpha in the output
  • Returns: string — oklch(L C H), or with / alpha appended when alpha is given

Converts any color to an oklch() CSS string.

toColorP3String(color, alpha?) ​

  • Takes: color: string — any recognized color format; alpha?: number
  • Returns: string — color(display-p3 r g b), or with / alpha appended when alpha is given

Converts any color to a color(display-p3 ...) CSS string.

ts
import { toOklchString, toColorP3String, toHwbString } from 'color-value-tools'

toOklchString('#3498db') // 'oklch(0.6531 0.1347 242.69)'
toColorP3String('#3498db') // 'color(display-p3 0.3208 0.588 0.8368)'
toHwbString(204, 20, 14) // 'hwb(204 20% 14%)'
toHwbString(204, 20, 14, 0.8) // 'hwb(204 20% 14% / 0.8)'

Two more formatters — hexToRgba and rgbToRgbaString — live on Conversions, since they take a hex/RGB input and stay conceptually next to the other conversion functions.