VueCraft NPM

Определение и парсинг ​

Определение ​

getColorType(value) ​

ColorType — 'hex' | 'css-var' | 'rgb' | 'hsl' | 'named' | 'oklch' | 'color' | 'unknown'

Определяет, в каком формате записана строка цвета, не разбирая её на компоненты.

isHexColor(value) ​

boolean

Определяет 3-, 4- или 6-значные hex-строки, с ведущим # или без него.

isRgbColor(value) ​

boolean

Определяет строки rgb(...) / rgba(...).

isHslColor(value) ​

boolean

Определяет строки hsl(...) / hsla(...).

isOklchColor(value) ​

boolean

Определяет строки oklch(...) / oklcha(...).

isColorFunction(value) ​

boolean

Определяет строки color(display-p3 ...), color(srgb ...) и color(srgb-linear ...).

isCssVariable(value) ​

boolean

Проверяет, начинается ли строка с var(--.

extractCssVariableName(value) ​

string — часть --name, либо исходное значение value без изменений, если строка не соответствует паттерну var(...)

Извлекает имя пользовательского свойства из ссылки на CSS-переменную — var(--name) или var(--name, fallback).

Парсинг и нормализация ​

normalizeColor(input) ​

См. форму возвращаемого значения ниже.

Принимает hex (3/4/6/8 цифр), rgb(), hsl(), hwb(), oklch(), color(), именованный CSS-цвет или обычный объект {r,g,b}/{h,s,l}. Универсальная точка входа — через неё проходит каждая функция манипуляции, гармонии, смешивания и доступности, чтобы принять любой формат ввода.

normalizeColorCached(input) ​

Та же форма, что и у возвращаемого значения normalizeColor.

То же самое, что normalizeColor, но только для строкового ввода, и мемоизирует результаты в кэше в памяти — см. Кэш.

normalizeHex(hex) ​

string — строчная 6-значная строка #rrggbb; при невалидном hex-цвете возвращается запасное значение #f5e477

Приводит сокращённую запись hex-цвета (3- или 6-значную, с # или без) к канонической 6-значной форме.

rgbaStringToRgba(str) ​

{ r, g, b, a } | null

Парсит CSS-строку rgb()/rgba() в компоненты; каналы могут быть в процентах.

hex8ToRgba(hex) ​

{ r, g, b, a } | null

Парсит hex-цвет с альфа-каналом — 8-значный (#rrggbbaa) или 4-значный (#rgba).

shortHexToRgba(hex) ​

{ r, g, b, a } | null — например #f0f0 → { r: 255, g: 0, b: 255, a: 0 }

Парсит именно 4-значное сокращение hex (см. также hex8ToRgba, которая принимает и 4-, и 8-значную форму).

parseHwbString(str) ​

{ H, W, B, alpha } | null

Парсит CSS-строку hwb() — hwb(...) — в компоненты оттенка/белизны/черноты.

parseOklchString(str) ​

{ L, C, H, alpha } | null

Парсит CSS-строку oklch() — oklch(L C H) или oklch(L C H / alpha), L может быть в процентах — в компоненты.

parseColorFn(str) ​

{ space, r, g, b, alpha } | null

Парсит CSS-функцию color(...) — color(display-p3 r g b) или color(srgb r g b / alpha) — в её цветовое пространство и компоненты.

parseCssVar(value) ​

{ variableName, fallback? } | null

Парсит ссылку на пользовательское CSS-свойство — var(--name) или var(--name, fallback) — в имя и опциональное запасное значение.

Возвращаемое значение normalizeColor ​

ts
{
  type: 'hex' | 'rgb' | 'hsl' | 'oklch' | 'color' | 'named' | 'css-var' | 'unknown'
  hex?: string    // '#rrggbb'
  r?: number      // 0–255
  g?: number      // 0–255
  b?: number      // 0–255
  a?: number      // 0–1
  h?: number      // оттенок 0–360
  s?: number      // насыщенность HSL 0–100
  l?: number      // светлота HSL 0–100
  v?: number      // значение HSV 0–100
  raw?: string    // задаётся для типа css-var
}
ts
// Ввод объектом
normalizeColor({ r: 52, g: 152, b: 219 }) // → полный результат с hex, h, s, l, v
normalizeColor({ h: 204, s: 70, l: 53 }) // → полный результат с hex, r, g, b, v

// CSS-переменная — возвращает raw, без цветовых каналов
normalizeColor('var(--brand-color)') // → { type: 'css-var', raw: 'var(--brand-color)' }