Определение и парсинг
Определение
| Функция | Описание |
|---|---|
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)' }