devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Регулярное выражение для HEX-кода цвета

Используйте /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, чтобы проверить, что вся строка является корректным HEX-кодом цвета. Каждый пример ниже проверен по этому шаблону, и его можно открыть в Regex Tester с готовыми примерами.

Обновлено 

/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/
Открыть в Regex Tester
ВводРезультат
#fff✓ Совпадение
#1A2B3C✓ Совпадение
#1a2b3c80✓ Совпадение
#f0f8✓ Совпадение
1a2b3c✗ Нет совпадения
#12345✗ Нет совпадения
#ggg✗ Нет совпадения
#1234567✗ Нет совпадения

Как работает шаблон

ЧастьЗначение
^#Начинается с #
[0-9a-fA-F]{3,4}Короткая форма: #rgb или #rgba
[0-9a-fA-F]{6}Полная форма: #rrggbb
[0-9a-fA-F]{8}Полная форма с альфа-каналом: #rrggbbaa

Примеры кода

JavaScript

const re = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
re.test(value); // true or false

Python

import re

bool(re.fullmatch(r'#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})', value))

PHP

preg_match('/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/', $value) === 1;

Примечания и ограничения

Все четыре длины допустимы в CSS. Удалите альтернативы {3,4} и {8}, если ваша система принимает только шестизначные цвета. Преобразуйте форматы с помощью Конвертер цветов.

Часто задаваемые вопросы

Какое регулярное выражение для HEX-кода цвета?
/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/ — совпадает со всей строкой. См. таблицу выше, что делает каждая часть.
Какие примеры совпадают?
Из проверенных примеров совпадают: #fff, #1A2B3C, #1a2b3c80, #f0f8. Остальные — нет.
Как протестировать это регулярное выражение?
Нажмите «Открыть в Regex Tester» — шаблон, флаги и образец текста загрузятся автоматически, а совпадения будут подсвечиваться по мере редактирования.