Skip to content

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

Определение

ФункцияОписание
getColorType(value)Возвращает 'hex' | 'css-var' | 'rgb' | 'hsl' | 'named' | 'oklch' | 'color' | 'unknown'
isHexColor(value)Определяет 3-, 4- или 6-значные hex-строки (с # или без)
isRgbColor(value)Определяет строки rgb() / rgba()
isHslColor(value)Определяет строки hsl() / hsla()
isOklchColor(value)Определяет строки oklch() / oklcha()
isColorFunction(value)Определяет строки color(display-p3 ...), color(srgb ...), color(srgb-linear ...)
isCssVariable(value)Проверяет паттерн var(--name)
extractCssVariableName(value)Извлекает --name из var(--name, fallback)

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

ФункцияОписание
normalizeColor(input)Универсальный парсер. Принимает hex (3/4/6/8 цифр), rgb(), hsl(), hwb(), oklch(), color(), именованный цвет, объект {r,g,b}, объект {h,s,l}. Возвращает { type, hex, r, g, b, a, h, s, l, v }
normalizeColorCached(input)То же, что normalizeColor, но использует внутренний LRU-подобный кэш. Только для строкового ввода
normalizeHex(hex)Приводит 3- или 6-значный hex к строчному 6-значному с #
rgbaStringToRgba(str)Парсит строку rgb() / rgba() в {r, g, b, a}; поддерживает процентные каналы
hex8ToRgba(hex)Парсит 8-значный hex (#rrggbbaa) или 4-значный hex (#rgba) в {r, g, b, a}
shortHexToRgba(hex)Парсит 4-значный hex (#rgba) в {r, g, b, a} — например #f0f0{r:255,g:0,b:255,a:0}
parseHwbString(str)Парсит строку hwb() в {H, W, B, alpha}
parseOklchString(str)Парсит oklch(L C H / alpha) в {L, C, H, alpha}; принимает L в процентах
parseColorFn(str)Парсит color(display-p3 r g b / alpha) в {space, r, g, b, alpha}
parseCssVar(value)Парсит var(--name, fallback) в {variableName, 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)' }