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

HEX-цвет — один из самых распространённых способов представления цвета в веб-разработке. Формат активно используется в CSS, SVG, Canvas API, дизайн-системах и пользовательских интерфейсах.

Библиотека Validator.js предоставляет встроенный метод для проверки корректности HEX-значений — isHexColor().

Метод isHexColor()

Метод проверяет, является ли строка корректным HEX-цветом.

Синтаксис

validator.isHexColor(str)

Подключение библиотеки

CommonJS

const validator = require('validator');

ES Modules

import validator from 'validator';

Базовая проверка

import validator from 'validator';

console.log(validator.isHexColor('#ffffff'));
console.log(validator.isHexColor('#000000'));
console.log(validator.isHexColor('#ff5733'));

Результат:

true
true
true

Какие форматы поддерживаются

Validator.js поддерживает стандартные CSS HEX-форматы.

Полный шестизначный формат

validator.isHexColor('#aabbcc');
true

Короткий трёхзначный формат

validator.isHexColor('#abc');
true

Восьмизначный формат с альфа-каналом

validator.isHexColor('#aabbccdd');
true

Четырёхзначный сокращённый формат с прозрачностью

validator.isHexColor('#abcd');
true

Примеры некорректных значений

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

validator.isHexColor('ffffff');
false

Недопустимые символы

validator.isHexColor('#zzzzzz');
false

Неверная длина строки

validator.isHexColor('#12');
validator.isHexColor('#12345');
validator.isHexColor('#1234567');
false
false
false

Пустая строка

validator.isHexColor('');
false

Значение другого цветового формата

validator.isHexColor('rgb(255,0,0)');
validator.isHexColor('blue');
validator.isHexColor('hsl(120, 50%, 50%)');
false
false
false

Регистр символов

Validator.js корректно обрабатывает как нижний, так и верхний регистр.

validator.isHexColor('#AABBCC');
validator.isHexColor('#ffaa00');
validator.isHexColor('#FfAa11');
true
true
true

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

Проверка цвета из формы

import validator from 'validator';

function validateColor(color) {
    if (validator.isHexColor(color)) {
        return 'Корректный цвет';
    }

    return 'Некорректный HEX';
}

console.log(validateColor('#3498db'));
console.log(validateColor('3498db'));

Результат:

Корректный цвет
Некорректный HEX

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

Валидация данных запроса

import express from 'express';
import validator from 'validator';

const app = express();

app.use(express.json());

app.post('/theme', (req, res) => {
    const { primaryColor } = req.body;

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

    res.json({
        success: true
    });
});

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

const colors = [
    '#ffffff',
    '#123abc',
    '#zzz999',
    '#000'
];

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

console.log(validColors);

Результат:

[ '#ffffff', '#123abc', '#000' ]

Проверка перед сохранением в базу данных

function saveTheme(color) {
    if (!validator.isHexColor(color)) {
        throw new Error('Неверный цвет');
    }

    return {
        themeColor: color
    };
}

console.log(saveTheme('#ff9900'));

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

Валидация поля ввода

import { useState } from 'react';
import validator from 'validator';

function App() {
    const [color, setColor] = useState('');
    const [isValid, setIsValid] = useState(true);

    function handleChange(event) {
        const value = event.target.value;

        setColor(value);
        setIsValid(validator.isHexColor(value));
    }

    return (
        <div>
            <input
                value={color}
                onCha nge={handleChange}
                placeholder="#ff0000"
            />

            {!isValid && (
                <p>Некорректный HEX-цвет</p>
            )}
        </div>
    );
}

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

Иногда требуется принимать как HEX, так и RGB.

function validateColor(color) {
    return (
        validator.isHexColor(color) ||
        validator.isRGBColor(color)
    );
}

console.log(validateColor('#ffffff'));
console.log(validateColor('rgb(255,255,255)'));
true
true

Автоматическая нормализация значения

Перед проверкой часто выполняется очистка строки.

Удаление пробелов

const color = '   #ff00aa   '.trim();

console.log(validator.isHexColor(color));
true

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

const color = '#FFAABB'.toLowerCase();

console.log(validator.isHexColor(color));
true

Проверка CSS-настроек

const styles = {
    background: '#282c34',
    text: '#ffffff',
    border: '#12xz99'
};

for (const [key, value] of Object.entries(styles)) {
    console.log(
        key,
        validator.isHexColor(value)
    );
}

Результат:

background true
text true
border false

Внутренний принцип проверки

Метод использует регулярное выражение для проверки:

  • наличия символа #;

  • допустимой длины;

  • наличия только шестнадцатеричных символов:

    • 0-9
    • a-f
    • A-F

Поддерживаются следующие длины:

Формат Пример
#RGB #fff
#RGBA #ffff
#RRGGBB #ffffff
#RRGGBBAA #ffffffff

Отличие от собственной регулярки

Часто HEX-цвет проверяют вручную:

const regex = /^#([0-9A-F]{3}|[0-9A-F]{6})$/i;

Однако Validator.js:

  • уже протестирован;
  • поддерживает больше форматов;
  • избавляет от дублирования логики;
  • делает код читаемее;
  • уменьшает вероятность ошибок.

Сравнение вариантов

Собственная регулярка

function isHex(color) {
    return /^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(color);
}

Validator.js

validator.isHexColor(color);

Второй вариант проще поддерживать в крупных проектах.

Типичные ошибки

Проверка без #

validator.isHexColor('ff00aa');
false

HEX-цвет обязан начинаться с #.

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

validator.isHexColor('#12GG99');
false

Символы G-Z не входят в шестнадцатеричный диапазон.

Передача не строки

validator.isHexColor(123456);

Это приведёт к ошибке, так как метод ожидает строку.

Корректный вариант:

validator.isHexColor(String(123456));

Валидация конфигурационных файлов

const config = {
    success: '#28a745',
    danger: '#dc3545',
    warning: '#ffc107'
};

const invalid = Object.values(config).some(color =>
    !validator.isHexColor(color)
);

console.log(invalid);
false

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

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

    for (const field of requiredFields) {
        if (!validator.isHexColor(theme[field])) {
            throw new Error(`Поле ${field} содержит неверный цвет`);
        }
    }

    return theme;
}

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

import validator from 'validator';

function isValidHex(color: string): boolean {
    return validator.isHexColor(color);
}

Проверка CSS-переменных

const cssVariables = {
    '--main-color': '#3498db',
    '--accent-color': '#e74c3c',
    '--bad-color': '#xx99ff'
};

for (const variable in cssVariables) {
    const value = cssVariables[variable];

    if (!validator.isHexColor(value)) {
        console.log(`Ошибка в ${variable}`);
    }
}

Результат:

Ошибка в --bad-color

Практический сценарий: генератор палитры

function addColor(colors, newColor) {
    if (!validator.isHexColor(newColor)) {
        throw new Error('Некорректный HEX');
    }

    colors.push(newColor);
}

const palette = [];

addColor(palette, '#ff0000');
addColor(palette, '#00ff00');

console.log(palette);

Совместное использование с sanitization

function sanitizeColor(input) {
    const color = input.trim();

    if (!validator.isHexColor(color)) {
        return null;
    }

    return color.toLowerCase();
}

console.log(sanitizeColor('  #FFAABB  '));

Результат:

#ffaabb
Оглавление