01

Определите смысл выражения «ближайшее имя»

CSS Color Module Level 4 задаёт таблицу именованных цветов, ключевые слова которой преобразуются в конкретные значения sRGB. Инструмент может считать эти записи точками-кандидатами, но спецификация не утверждает, что любой другой цвет обязан носить одно из этих имён. Поэтому решается узкая задача: у какого кандидата минимальное числовое расстояние по правилам реализации? Результат не устанавливает культурное название, стандарт краски, токен бренда или единое восприятие образца всеми наблюдателями.

  • Укажите, что множество кандидатов ограничено таблицей CSS, а не является бесконечным словарём цветов.
  • Показывайте ключевое слово вместе с точным эталонным значением, чтобы ответ можно было проверить.
  • Называйте результат ближайшим или приблизительным и не заявляйте, что исходный цвет буквально имеет найденное имя.
02

Соберите каноническую таблицу кандидатов

Загружайте каждое ключевое слово и точную тройку sRGB из одного версионированного источника, не копируя данные через цепочку генераторов. Нормализуйте регистр для поиска, но сохраняйте каноническое написание в ответе. У нескольких ключевых слов одинаковые координаты: aqua и cyan, fuchsia и magenta, а также варианты gray и grey, например darkgray и darkgrey. Расстояние не различит такие псевдонимы. Объединяйте их либо выбирайте представителя по устойчивому правилу, а не по порядку строк базы.

  • Храните целые каналы red, green и blue от 0 до 255, а остальные пространства вычисляйте из этих исходных значений.
  • Привязывайте псевдонимы к одной координате, чтобы точное совпадение могло показать все равнозначные слова CSS.
  • Исключайте специальное слово transparent из непрозрачного поиска либо обрабатывайте alpha отдельным документированным режимом.
03

Нормализуйте вход до сравнения

Разберите вход как цвет, проверьте диапазоны и приведите к тому же представлению, что используется для кандидатов. Шестизначный HEX непосредственно задаёт байты кодированного sRGB, однако CSS поддерживает множество синтаксисов и пространств. При переводе Display P3 или Lab в sRGB результат может выйти за gamut, поэтому нужно явно выбрать clipping, отображение gamut или отказ. Прозрачность создаёт ещё одну зависимость: у полупрозрачного значения нет единственного видимого результата без известного фона.

  • Отклоняйте неверный ввод, не исправляя молча неоднозначные цифры, отсутствующие каналы или неподдерживаемый синтаксис.
  • Для каталога sRGB документируйте политику gamut и показывайте нормализованное значение, реально участвовавшее в сравнении.
  • При alpha меньше единицы требуйте фон и метод композиции либо сообщайте, что сравнение сейчас невозможно.
04

Выбирайте метрику осознанно

Евклидово расстояние между кодированными red, green и blue легко вычислить, но каналы sRGB нелинейны и одинаковые числовые шаги не являются одинаковыми шагами восприятия. После преобразования в CIE Lab доступна Delta E 76 — обычное евклидово расстояние в Lab. Delta E 2000 добавляет поправки для известных неравномерностей светлоты, chroma и hue. OKLab даёт другую перцептуальную систему координат, а CSS Color 4 описывает простую евклидову Delta E OK. Метрики могут ранжировать кандидатов по-разному.

  • Используйте расстояние в кодированном sRGB лишь при явно заявленной цели простоты, а не как доказательство восприятия.
  • Применяйте один точный конвейер преобразования и одну версию метрики ко всем кандидатам без смешения пространств.
  • Публикуйте название метрики: отдельное число расстояния бессмысленно без формулы и шкалы.
05

Считайте и разрешайте ничьи воспроизводимо

После преобразования вычислите выбранное расстояние до каждого канонического кандидата, сохраните минимум и примените документированную политику ничьих. С числами с плавающей точкой нужна осторожность: точные псевдонимы лучше распознавать по общей исходной координате, а почти равные расстояния нельзя объявлять равными с произвольно большим допуском. Сохраняйте точность при преобразовании и округляйте лишь вывод. Вторичная сортировка по каноническому ключу обеспечит одинаковый результат при другом плане запроса базы.

  • Возвращайте нулевое расстояние при точном совпадении исходных координат и перечисляйте группу псевдонимов.
  • Сравнивайте значения полной точности, используя только узкий допуск, обоснованный численной реализацией.
  • Сортируйте равные результаты по стабильному ключу и проверяйте независимость от локали, collation и порядка вставки.
06

Объясняйте результат без преувеличений

Полезный ответ содержит нормализованный вход, победившее ключевое слово CSS, его точный sRGB или HEX, метрику и измеренное расстояние. Можно показать несколько ближайших кандидатов, потому что один победитель скрывает плотное ранжирование. Не превращайте расстояние в неподтверждённый процент сходства. Пороги вроде «неразличимо» зависят от метрики, условий просмотра, дисплея, соседних цветов, наблюдателя и задачи; простой поиск по каталогу не измеряет все эти обстоятельства.

  • Показывайте достаточно чисел для воспроизведения сравнения и согласованно округляйте значения интерфейса.
  • Предлагайте несколько кандидатов при близких расстояниях, сохраняя одного детерминированного победителя для URL и API.
  • Отделяйте ближайшее слово CSS от редакционных имён, переводов, выводов о доступности и рекомендаций палитры.
07

Проверяйте реализацию фиксированными тестами

Тесты должны отдельно защищать данные кандидатов, преобразования, метрику и ничьи. Каждый именованный цвет обязан совпадать с собой при нулевом расстоянии. Пары псевдонимов должны давать одинаковые координаты. Эталонные преобразования проверяются с заявленным численным допуском, а границы вроде black, white, предельных каналов, HEX разного регистра и цветов вне gamut следуют документированной политике. Зафиксируйте несколько рейтингов, чтобы обновление зависимости или формулы не переписало индексируемые страницы незаметно.

  • Проверяйте полноту и уникальность канонических слов, разрешая только явно записанные координатные псевдонимы.
  • Тестируйте неверный синтаксис, alpha, gamut, точные совпадения, близкие результаты и детерминированные ничьи.
  • Версионируйте алгоритм и пересчитывайте ответы осознанно при изменении набора, преобразований или метрики.
S

Первоисточники

Фактические утверждения статьи проверены по этим опубликованным спецификациям.

  1. W3C CSS Color Module Level 4 — именованные цвета
  2. W3C CSS Color Module Level 4 — примеры преобразования цветов
  3. W3C CSS Color Module Level 4 — Delta E 2000
  4. W3C CSS Color Module Level 4 — Delta E OK