Как программно подобрать хорошие контрастные цвета RGB?

Предположим, в вашей программе:

  1. color A это цвет, который мы выбираем случайным образом

  2. знание color A Как я могу выбрать color B это будет сильно контрастировать с color A ?

Проблема может быть дополнительно уменьшена до: "Представьте 2 квадрата, заполненных цветом рядом друг с другом. Человеческому глазу должно быть однозначно ясно, что цвета не одинаковы".

Пример:

  • Черный -> белый
  • Синий -> белый
Источник

2 ответа

Решение

В Руководстве по обеспечению доступности веб-контента (WCAG) 2.0 содержится некоторая информация (http://www.w3.org/TR/2008/REC-WCAG20-20081211).

  1. Визуальный контраст: http://www.w3.org/TR/2008/REC-WCAG20-20081211/

  2. Коэффициент контрастности: http://www.w3.org/TR/2008/REC-WCAG20-20081211/

  3. Относительная яркость: http://www.w3.org/TR/2008/REC-WCAG20-20081211/

На этом сайте есть хороший пример, но он вычисляет, где достаточно двух цветов, а не как их получить.

Чтобы выбрать цвет с хорошим контрастом, я бы выбрал дополнительные цвета: например, выберите случайный цвет A, преобразуйте его в пространство HSV, получите дополнительный оттенок.

Дополнительный оттенок: после преобразования цвета из RGB в HSV дополнительный оттенок будет составлять 180 градусов (или 0,5, при нормированном значении оттенка 0-1). Этот сайт имеет что-то об этом в PHP

Источник

Когда я искал лучший способ сделать это, я наткнулся на руководство по Adobe Illustrator, в котором упоминается, как они создают дополнительные цвета. Они говорят:

Дополнение Изменяет каждый компонент цвета на новое значение на основе суммы самых высоких и самых низких значений RGB в выбранном цвете. Illustrator добавляет самые низкие и самые высокие значения RGB текущего цвета, а затем вычитает значение каждого компонента из этого числа для создания новых значений RGB. Например, предположим, что вы выбрали цвет со значением RGB 102 для красного, 153 для зеленого и 51 для синего. Illustrator добавляет высокие (153) и низкие (51) значения, чтобы получить новое значение (204). Каждое из значений RGB в существующем цвете вычитается из нового значения для создания новых дополнительных значений RGB: 204 - 102 (текущее значение красного) = 102 для нового значения красного, 204 - 153 (текущее значение зеленого) = 51 для нового значения зеленого и 204 - 51 (текущее значение синего) = 153 для нового значения синего.

Было бы не сложно сделать это программно и подумать на этот раз, что на самом деле это может сработать для того, что вы пытаетесь сделать.

Удачи!

Источник
Другие вопросы по тегам