Библиотека Validator.js содержит набор функций для проверки строковых данных. Одной из востребованных задач является валидация цветовых кодов: HEX, RGB, HSL и других представлений цвета.

Для проверки цветовых значений используется метод isHexColor() и дополнительные подходы на основе регулярных выражений либо кастомной логики.

Установка Validator.js

Для Node.js:

npm install validator

Подключение:

const validator = require('validator');

В ES-модулях:

import validator from 'validator';

---

Проверка HEX-цветов

Метод isHexColor()

Validator.js предоставляет встроенный метод:

validator.isHexColor(str)

Метод возвращает:

• true — если строка является корректным HEX-кодом;
• false — если строка некорректна.

---

Базовые примеры

validator.isHexColor('#ffffff'); // true
validator.isHexColor('#000000'); // true
validator.isHexColor('#ff5733'); // true

Некорректные значения:

validator.isHexColor('ffffff'); // false
validator.isHexColor('#zzz999'); // false
validator.isHexColor('#12345'); // false

---

Поддерживаемые форматы HEX

Validator.js поддерживает:

Формат	Пример
3 символа	#fff
6 символов	#ffffff
4 символа (RGBA)	#ffff
8 символов (RRGGBBAA)	#ffffffff

---

Короткие HEX-коды

validator.isHexColor('#abc'); // true
validator.isHexColor('#0f0'); // true

---

HEX с альфа-каналом

RGBA-представление:

validator.isHexColor('#ff000080'); // true

ARGB также считается корректным с точки зрения структуры:

validator.isHexColor('#abcd'); // true

---

Проверка пользовательского ввода

Проверка данных формы

const color = '#3498db';

if (validator.isHexColor(color)) {
    console.log('Корректный цвет');
} else {
    console.log('Ошибка');
}

---

Проверка значения из HTML-формы

const formColor = req.body.color;

if (!validator.isHexColor(formColor)) {
    return res.status(400).json({
        error: 'Некорректный HEX-цвет'
    });
}

---

Очистка пробелов перед проверкой

Пользовательские данные часто содержат лишние пробелы.

trim()

const color = '   #ff0000   ';

const normalized = validator.trim(color);

console.log(
    validator.isHexColor(normalized)
);

---

Проверка регистра символов

HEX-коды нечувствительны к регистру.

validator.isHexColor('#ABCDEF'); // true
validator.isHexColor('#abcdef'); // true
validator.isHexColor('#AbCdEf'); // true

---

Ограничение только шестизначных HEX-кодов

Иногда требуется запретить короткие варианты.

Использование регулярного выражения

function isFullHexColor(color) {
    return /^#[0-9A-Fa-f]{6}$/.test(color);
}

console.log(isFullHexColor('#ffffff')); // true
console.log(isFullHexColor('#fff')); // false

---

Проверка только коротких HEX-кодов

function isShortHex(color) {
    return /^#[0-9A-Fa-f]{3}$/.test(color);
}

console.log(isShortHex('#abc')); // true
console.log(isShortHex('#abcdef')); // false

---

Проверка HEX с обязательным альфа-каналом

function isHexWithAlpha(color) {
    return /^#[0-9A-Fa-f]{8}$/.test(color);
}

console.log(isHexWithAlpha('#ff0000ff')); // true
console.log(isHexWithAlpha('#ff0000')); // false

---

Создание универсального валидатора цветов

Поддержка нескольких форматов

function validateColor(color) {
    return (
        validator.isHexColor(color) ||
        /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(color)
    );
}

console.log(validateColor('#fff')); // true
console.log(validateColor('rgb(255, 0, 0)')); // true

---

Проверка RGB

Validator.js не содержит встроенного метода isRGB(), поэтому обычно применяются регулярные выражения.

Простая проверка RGB

function isRGB(color) {
    return /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(color);
}

---

Проблема диапазонов

Предыдущая проверка пропускает значения:

rgb(999, 500, 1000)

Для корректной валидации диапазонов:

function isValidRGB(color) {
    const regex =
        /^rgb\(\s*(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*\)$/;

    return regex.test(color);
}

---

Примеры

console.log(isValidRGB('rgb(255, 0, 0)')); // true
console.log(isValidRGB('rgb(300, 0, 0)')); // false
console.log(isValidRGB('rgb(12, 55, 199)')); // true

---

Проверка RGBA

Валидация прозрачности

function isRGBA(color) {
    const regex =
        /^rgba\(\s*(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(0|1|0?\.\d+)\s*\)$/;

    return regex.test(color);
}

---

Примеры RGBA

console.log(
    isRGBA('rgba(255, 0, 0, 0.5)')
);

console.log(
    isRGBA('rgba(255,255,255,1)')
);

console.log(
    isRGBA('rgba(255,255,255,2)')
);

Результат:

true
true
false

---

Проверка HSL

Формат HSL

hsl(120, 100%, 50%)

---

Валидатор HSL

function isHSL(color) {
    const regex =
        /^hsl\(\s*(360|3[0-5]\d|[12]?\d?\d)\s*,\s*(100|[1-9]?\d)%\s*,\s*(100|[1-9]?\d)%\s*\)$/;

    return regex.test(color);
}

---

Примеры

console.log(
    isHSL('hsl(120, 100%, 50%)')
);

console.log(
    isHSL('hsl(400, 100%, 50%)')
);

Результат:

true
false

---

Проверка CSS-цветов

Именованные цвета

Validator.js не проверяет CSS-имена цветов:

red
blue
green

Для этого создаётся собственный список.

---

Проверка CSS-цветов через Set

const cssColors = new Set([
    'red',
    'green',
    'blue',
    'black',
    'white',
    'gray'
]);

function isCSSColor(color) {
    return cssColors.has(
        color.toLowerCase()
    );
}

---

Комбинированная проверка всех типов цветов

Полноценный валидатор

function validateAnyColor(color) {
    return (
        validator.isHexColor(color) ||
        isValidRGB(color) ||
        isRGBA(color) ||
        isHSL(color) ||
        isCSSColor(color)
    );
}

---

Использование

console.log(validateAnyColor('#fff'));
console.log(validateAnyColor('rgb(255,0,0)'));
console.log(validateAnyColor('rgba(0,0,0,0.5)'));
console.log(validateAnyColor('hsl(120, 50%, 50%)'));
console.log(validateAnyColor('blue'));

---

Валидация цветов в Express.js

Middleware для проверки цвета

function validateColorMiddleware(req, res, next) {
    const { color } = req.body;

    if (!validator.isHexColor(color)) {
        return res.status(400).json({
            error: 'Некорректный цвет'
        });
    }

    next();
}

---

Подключение middleware

app.post(
    '/theme',
    validateColorMiddleware,
    (req, res) => {
        res.json({
            success: true
        });
    }
);

---

Проверка массива цветов

Валидация списка

const colors = [
    '#fff',
    '#000',
    '#ff0000'
];

const isValid = colors.every(color =>
    validator.isHexColor(color)
);

console.log(isValid);

---

Фильтрация некорректных значений

const mixed = [
    '#fff',
    'red',
    '#zzzzzz',
    '#123456'
];

const validColors = mixed.filter(color =>
    validator.isHexColor(color)
);

console.log(validColors);

---

Проверка объекта с настройками темы

const theme = {
    primary: '#3498db',
    secondary: '#2ecc71',
    danger: '#e74c3c'
};

const allValid = Object.values(theme)
    .every(value =>
        validator.isHexColor(value)
    );

console.log(allValid);

---

Нормализация цветовых кодов

Приведение к нижнему регистру

function normalizeHex(color) {
    return color.toLowerCase();
}

console.log(
    normalizeHex('#ABCDEF')
);

---

Разворачивание короткого HEX

function expandShortHex(color) {
    if (/^#[0-9A-Fa-f]{3}$/.test(color)) {
        return '#' + color
            .slice(1)
            .split('')
            .map(char => char + char)
            .join('');
    }

    return color;
}

console.log(
    expandShortHex('#abc')
);

Результат:

#aabbcc

---

Генерация ошибок валидации

Подробные сообщения

function validateHex(color) {
    if (!color) {
        return 'Цвет не указан';
    }

    if (!validator.isHexColor(color)) {
        return 'Некорректный HEX-цвет';
    }

    return null;
}

---

Частые ошибки

Отсутствие символа

Некорректно:

ffffff

Корректно:

#ffffff

---

Неправильная длина

Некорректно:

#fffff
#fffffff

---

Использование недопустимых символов

Некорректно:

#gggggg
#12xz89

---

Производительность проверки

Проверка больших массивов

const result = colors.every(
    validator.isHexColor
);

Метод every() прекращает проверку сразу после первого некорректного значения, что снижает лишние вычисления.

---

Практический пример: настройка темы

function validateTheme(theme) {
    const requiredFields = [
        'primary',
        'secondary',
        'background',
        'text'
    ];

    for (const field of requiredFields) {
        if (!validator.isHexColor(theme[field])) {
            return false;
        }
    }

    return true;
}

---

Использование с React

Проверка значения input

const handleChange = (e) => {
    const value = e.target.value;

    if (validator.isHexColor(value)) {
        setColor(value);
    }
};

---

Использование с MongoDB

Проверка перед сохранением

const schema = new mongoose.Schema({
    color: {
        type: String,
        validate(value) {
            return validator.isHexColor(value);
        }
    }
});

---

Сравнение Validator.js и регулярных выражений

Подход	Преимущества	Недостатки
Validator.js	Простота, читаемость	Только HEX
Regex	Гибкость	Сложность
Комбинированный	Максимальный контроль	Больше кода

---

Рекомендации по валидации цветов

• Использовать validator.isHexColor() для стандартных HEX-цветов.
• Нормализовать пользовательский ввод через trim().
• Дополнительно проверять диапазоны RGB/RGBA.
• Ограничивать поддерживаемые форматы при необходимости.
• Централизовать всю логику проверки в одном модуле.
• Возвращать понятные сообщения об ошибках.
• Проверять данные как на клиенте, так и на сервере.