VueCraft NPM

Форматирование ​

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

  • Принимает: h, s, l: number; alpha?: number
  • Возвращает: string — hsl(h, s%, l%), либо hsla(...), если задана alpha

Форматирует сырые компоненты HSL в CSS-строку.

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

  • Принимает: H, W, B: number; alpha?: number
  • Возвращает: string — hwb(H W% B%), с добавленным / alpha, если задана alpha

Форматирует сырые компоненты HWB в CSS-строку.

toOklchString(color, alpha?) ​

  • Принимает: color: string — любой распознаваемый формат цвета; alpha?: number — переопределяет собственную альфу цвета в выводе
  • Возвращает: string — oklch(L C H), с добавленным / alpha, если задана alpha

Конвертирует любой цвет в CSS-строку oklch().

toColorP3String(color, alpha?) ​

  • Принимает: color: string — любой распознаваемый формат цвета; alpha?: number
  • Возвращает: string — color(display-p3 r g b), с добавленным / alpha, если задана alpha

Конвертирует любой цвет в CSS-строку color(display-p3 ...).

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)'

Ещё два форматтера — hexToRgba и rgbToRgbaString — живут на странице Конвертация, поскольку они принимают hex/RGB на входе и концептуально ближе к остальным функциям конвертации.