Бесплатный инструмент цвета в браузере
Калькулятор различия цветов Delta E
Введите два HEX-цвета, чтобы рассчитать Delta E CIEDE2000, сравнить образцы рядом и увидеть различия тона, насыщенности и яркости. Расчёт обновляется в браузере без регистрации.
Обновлено 17 июля 2026 года
Как работает расчёт CIEDE2000
HEX-код описывает доли красного, зелёного и синего для экрана, но одинаковые числовые изменения RGB не всегда выглядят одинаково сильными. CIEDE2000 начинает с значений CIELAB, оси которого стараются лучше соотнести с восприятием человека, а затем корректирует особенности светлоты, хромы и цветового тона. Поэтому для вопроса о видимом различии двух образцов формула полезнее простой геометрической дистанции между тремя числами RGB.
Калькулятор разбирает каждый корректный HEX, преобразует его библиотекой цвета, которую использует Toon Tone, и оценивает пару функцией CIEDE2000. Перестановка A и B не меняет Delta E. Панель HSB — отдельная диагностика: она показывает привычные параметры редактирования, но не прибавляется к перцептивному результату и не заменяет его. Так можно отдельно понять общую смоделированную величину и вероятное направление исправления.
Почему меньшее Delta E обычно означает более близкие цвета
Ноль означает, что два разобранных образца одинаковы для расчёта. С ростом числа увеличивается смоделированная дистанция восприятия. Это направление понятно, но точка, где человек замечает или принимает различие, зависит от контекста. Дизайнер, сравнивающий токены интерфейса на калиброванном мониторе, печатник, проверяющий краску на фактурной бумаге, и игрок, вспоминающий персонажа на некалиброванном телефоне, решают разные задачи.
Поэтому используйте Delta E как измерение, которое поддерживает решение, а не заменяет его. Смотрите на образцы в конечном размере, на нужном фоне и носителе. Записывайте название формулы: Delta E 76, Delta E 94 и CIEDE2000 способны дать разные числа для одной пары. Если договор, руководство бренда, лабораторная процедура или производственная спецификация задаёт допуск, следуйте этому условию вместо общего диапазона на странице.
Как различия HSB подсказывают исправление
Тон задаёт положение на цветовом круге, насыщенность описывает интенсивность, а яркость — насколько светлым или тёмным выглядит цвет на экране. Две пары с похожим Delta E могут требовать разных правок. В одной преобладает ошибка яркости, другая пересекает границу тона при близкой насыщенности. Абсолютные различия HSB быстро показывают направление. Для тона берётся кратчайшее расстояние по кругу, поэтому переход от 359 к 1 градусу равен двум градусам, а не 358.
Это особенно полезно при настройке дизайн-токена или тренировке цветовой памяти. Если тон близок, а яркость отклоняется, сохраните цветовую семью и сначала исправьте значение. Если яркость и насыщенность совпадают, двигайтесь только по кругу тона. HSB не является перцептивно равномерным: одинаковые шаги могут дать разные Delta E. Канальные различия служат подсказками для редактирования, а CIEDE2000 остаётся смоделированным сравнением.
Экран, освещение и соседние цвета всё равно важны
Браузерный инструмент не управляет экраном, который показывает образцы. Калибровка, цветовой профиль, яркость, угол обзора, окружающий свет и даже тонированная защитная плёнка меняют вид. Соседние цвета тоже влияют на восприятие: один серый кажется теплее рядом с синим и холоднее рядом с оранжевым. Нейтральный разделённый предпросмотр удобен, но не воспроизводит каждый материал, способ печати, устройство или кадр анимации, где будут применены цвета.
Для экранного дизайна проверяйте реальный компонент на типичных устройствах в светлой и тёмной темах. Для печати и физических изделий сравнивайте контрольные образцы при освещении и измерительной процедуре рабочего процесса. Сохраняйте исходные HEX и вид формулы, чтобы коллега повторил расчёт. Если решение влияет на стоимость, безопасность, бренд или производство, опирайтесь на калиброванные приборы и официальный допуск, а не на снимок некалиброванного экрана.
Delta E не является проверкой контрастности
Delta E отвечает на вопрос, насколько различаются два цвета в перцептивной модели. Коэффициент контрастности сравнивает относительную яркость переднего плана и фона, обычно для проверки достаточного визуального разделения текста или интерфейса по стандарту доступности. Два оттенка могут явно отличаться по тону, но обеспечивать плохой контраст текста. И наоборот, два нейтральных цвета почти без разницы тона могут быть хорошо различимы благодаря яркости. Метрики отвечают на разные вопросы.
Если вы выбираете текст, значки, индикаторы фокуса или элементы управления, дополнительно проведите требуемую проверку контраста. Значение Delta E на странице не доказывает соответствие WCAG. Оно всё же помогает сравнить токены бренда, найти случайное изменение палитры или измерить отклонение цвета по памяти. Правильный процесс сначала формулирует решение, затем выбирает метрику для него, а не применяет одно привлекательное число ко всем вопросам цвета.
Сценарии для дизайнеров, разработчиков и игроков
Дизайнер сравнит утверждённый токен с заменой, зафиксирует результат и увидит, что изменилось: тон, насыщенность или яркость. Разработчик проверит CSS-переменные, перенос темы, снимки и рефакторинг палитры. Контент-команда сопоставит два цвета кампании перед вопросом владельцу бренда. Когда доступны исходные значения, вставляйте их напрямую: взятие пипеткой из сжатого изображения может внести отдельное преобразование ещё до сравнения.
Игроки Toon Tone могут сопоставить вспомненный оттенок персонажа с раскрытой целью. Delta E описывает общую близость, а HSB указывает на отклонившийся ползунок. Полезный цикл отмечает один повторяющийся уклон, например слишком светлые ответы, и проверяет только эту поправку в следующем раунде. Калькулятор не создаёт универсальный процентиль памяти и не заменяет игровой балл; он даёт прозрачное парное измерение для осмысленного разбора результата.