Как найти цвет по названию или HEX-коду

Что можно найти по названию и HEX-коду

Инструмент CSS Color Names помогает сопоставить текстовый запрос с именами цветов или с их шестизначными HEX-представлениями. Он подходит, когда нужно быстро проверить, какое имя есть в встроенной коллекции, посмотреть значение цвета в формате #rrggbb и получить три числовых RGB-канала. Для поиска не требуется заранее выбирать отдельный режим: достаточно передать строку с названием или цветовым значением.

Как выполнить поиск

Подготовьте один поисковый запрос. Введите название цвета, его часть или HEX-значение из шести шестнадцатеричных знаков. Допустимый вариант HEX-запроса может начинаться с символа #. Не добавляйте к значению RGB-скобки, запятые или дополнительные обозначения, поскольку описанное сопоставление поддерживает имя и шестизначное HEX-представление.
Передайте строку инструменту. Регистр букв не влияет на поиск: введённое значение переводится в нижний регистр, а пробелы в начале и конце удаляются. Поэтому Navy и navy обрабатываются одинаково. Внутренние пробелы в названии при этом не описаны как отдельное правило преобразования, поэтому лучше сохранять написание имени без лишних изменений.
Если вы ищете по имени, проверьте, что введённый фрагмент встречается в названии цвета. Непустой запрос также может совпасть с HEX-значением, если оно равно сгенерированному шестизначному представлению цвета в нижнем регистре. Поиск по части имени удобен, когда полное написание заранее неизвестно, но он может дать несколько подходящих цветов.
Если строка пустая, отдельного фильтра по имени или HEX-коду не применяется. В этом случае обрабатывается вся доступная коллекция, а названия идут в алфавитном порядке. Такой вариант полезен для просмотра перечня, но не заменяет целевой запрос, если нужно найти конкретный цвет.
Прочитайте найденные записи. Для каждого совпадения смотрите на название, HEX-значение с префиксом # и три целых значения RGB. Если прямого совпадения нет, проверьте, является ли запрос шестью корректными шестнадцатеричными знаками после удаления необязательного начального #. Только при таком формате добавляется ближайший цвет, выбранный по квадрату расстояния между RGB-каналами.
Для запроса вроде #12abef сначала учитывается прямое совпадение. Если его нет, инструмент может показать ближайшее именованное значение. Для строки вроде blue-green такой запасной поиск не добавляется, если прямого совпадения нет, потому что строка не соответствует шестизначному HEX-формату. При сбое вычисления результат помечается как неуспешный и содержит текст возникшего исключения, поэтому такой ответ нужно рассматривать отдельно от обычного отсутствия совпадений.

Как читать результат и понимать ограничения

Название найденного цвета означает, что запрос встретился внутри имени, а не обязательно совпал с ним целиком. Поэтому один короткий фрагмент может привести к нескольким записям. Сравнивайте варианты по показанному HEX-коду и RGB-каналам, если для вашей задачи важен конкретный оттенок.

HEX-значение в результате записывается строчными буквами и содержит шесть знаков после #. Три RGB-числа показывают каналы этого же представления. Их удобно использовать для ручной проверки или переноса значения в другую цветовую настройку, но инструмент не заявляет поддержку дополнительных форматов цвета, например HSL, HSV или сокращённой трёхзначной записи.

Ближайший цвет имеет иной смысл, чем прямое совпадение. Он появляется только после отсутствия прямого результата и только для корректного шестизначного HEX-запроса, с начальным # или без него. Для невалидной строки нужно ожидать отсутствие такого дополнения, а не автоматически исправленное значение. Если результат пуст по прямому поиску и запрос не проходит HEX-проверку, это не подтверждает, что похожего оттенка в коллекции нет: просто описанный запасной расчёт для этой строки не применяется.

Пустой ввод следует читать как запрос на просмотр коллекции без фильтра. Порядок по имени помогает последовательно просматривать записи, но не превращает результат в рекомендацию наиболее подходящего оттенка. Если вычисление завершилось ошибкой, ориентируйтесь на признак неуспешного результата и его текст, а не трактуйте сообщение как цветовую запись.

Для практической работы полезно сохранять исходный запрос отдельно от результата и проверять формат до отправки. Не следует хранить пароль или секрет рядом с цветовым результатом: эта задача не связана с секретами, а описанные возможности ограничены поиском имён, HEX-сопоставлением и расчётом ближайшего варианта для подходящего шестизначного запроса.

Практический пример

Разработчик проверяет HEX-оттенок из макета перед тем, как выбрать для него именованную запись.

Для проверки оттенка в макете передайте запрос #12abef. Сначала рассмотрите прямое совпадение, а если его нет, проверьте дополнительный результат ближайшего цвета.

В ответе будут записи с названием цвета, строчным шестизначным HEX-значением с # и тремя целыми RGB-каналами; при отсутствии прямого совпадения может появиться ближайшая именованная запись.

Ограничения

Описанный поиск ограничен именами, их фрагментами, сгенерированными шестизначными HEX-значениями и ближайшим вариантом для подходящего HEX-запроса; поддержка других цветовых форматов не установлена.

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

Причина: в запросе указан формат вроде rgb(18, 171, 239) или HEX-строка не из шести допустимых знаков, поэтому ближайший цвет не добавляется. Исправление: используйте имя либо шестизначное HEX-значение с необязательным начальным #.

Частые вопросы

Когда показывается ближайший цвет по HEX-коду?

Условие: запрос должен быть непустым и содержать шесть корректных шестнадцатеричных знаков после необязательного #, а прямого совпадения не должно быть. Тогда может появиться ближайший именованный цвет, выбранный по расстоянию между RGB-каналами.

Что произойдёт, если оставить поле поиска пустым?

Пустой ввод не ограничивает поиск именем или HEX-значением. Инструмент обрабатывает коллекцию и располагает названия в алфавитном порядке.

Можно ли искать цвет через RGB или HSL?

Поддерживается шестизначное HEX-представление с необязательным начальным #, а также поиск по имени или его фрагменту. Другие цветовые форматы не входят в описанное сопоставление.