Подбор цветов и генерация цветовых схем

Монохроматическая модель. Эта цветовая схема основана на одном оттенке цвета, и использует вариации, сделанные только лишь изменением насыщенности и яркости.

Результат комфортен для глаз, даже при использовании агрессивных цветов. Вместе с тем, труднее найти диакритические знаки и основные факты.

Также монохроматические вариации сделаны для каждого цвета в других схемах.

Комплементарная (контрастная) модель. Основной цвет дополнен его комплементом (цвета на противоположной стороне цветового круга). Создается один холодный и один теплый цвет — вы должны рассмотреть, какой из них будет доминирующим, и должен ли дизайн выглядеть холодным, или теплым.

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

Модель цветовой триады (мягкий контраст). Основной цвет дополнен двумя цветами, помещенными тождественно по обе стороны его комплемента. В отличие от «острого» контраста, эта цветовая схема зачастую является более комфортной для глаз, она мягче, и в ней больше пространства для балансировки теплых/холодных цветов.

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

Модель цветовой тетрады (двойной контраст). Эта цветовая схема образована парой цветов и их контрастов. Она основана на Тетраде — четверке цветов, равномерно распределенных по цветовому кругу (90°). Тетрада — очень агрессивная цветовая схема, требующая хорошего планирования и деликатный подход к отношениям этих цветов.

Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.

Модель аналогичных цветов. Эта цветовая схема образована основным цветом и его смежными цветами — два цвета, расположенные тождественно по обе стороны. Это всегда смотрится элегантно и четко, цветовая гамма в результате этого выглядит с меньшей напряженностью и равномерной колориметрией. Если выбран цвет на тепло-холодной границе, цвет с противоположной «температурой» может быть использован для акцентирования двух других цветов.

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

Модель акцентированной аналогии. Это аналогичная модель с добавлением дополнительного (контрастного) цвета. Модель должна рассматриваться как дополнение — она добавляет напряженности к цветовой палитре, и слишком агрессивна в случае злоупотребления. Вместе с тем, она может быть использована в некоторых деталях, а так же в качестве цветового акцента — порой получается очень эффективная и элегантная цветовая гамма.

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

Регулировка цветовой схемы. На этой вкладке можно регулировать яркость/насыщенность цвета и контраст цветовой схемы, или просто выбрать из предопределенных настроек.

Информация о цветовой схеме. Кликните по этой вкладке для отображения значений цветов фактической цветовой схемы, а так же для экспорта их в различные форматы данных.

Оттенок основного цвета. Чтобы изменить значения, перетащите ползунок по цветовому кругу. Для ввода числового значения, дважды кликните по нему.

Оттенок дополнительного цвета. Чтобы изменить значения, перетащите ползунок по цветовому кругу. Для ввода числового значения, дважды кликните по нему.

Оттенок вторичного цвета. Чтобы изменить угол/дистанцию, перетащите ползунок дальше или ближе от основного цвета. Для ввода числового значения, дважды кликните по нему.

Оттенок вторичного цвета. Чтобы изменить угол/дистанцию, перетащите ползунок дальше или ближе от основного цвета. Для ввода числового значения, дважды кликните по нему.

Значение оттенка основного цвета. Кликните для ввода числового значения.

Угол/дистанция оттенка вторичных цветов. Кликните для ввода числового значения. Имеет смысл только в цветовых схемах, использующих вторичные цвета.

Значение RGB основного цвета. Кликните для ввода числового значения.

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

Значения RGB основного цвета.

Пресеты цветовых схем. Кликните и выберите предопределенные комбинации яркости, насыщенности и контрастности цветовой схемы.

Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).

Контрастность цветовой схемы. Перетаскивайте ползунок по квадрату для регулировки контрастности вариантов цвета в схеме (вверх/вниз для темного варианта, влево/вправо для светлого варианта).

Контрастность цветовой схемы. Панель для регулировки яркости и насыщенности сразу всех вариантов схемы.

Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.

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

Схема палитры. Представлены четыре основных цвета, для легкого составления впечатления о схеме.

URL адрес цветовой схемы. Для каждой схемы существует уникальный ID. Вы можете сохранить эту ссылку в закладки, и вернуться к редактированию своей цветовой схемы в любой момент времени.

Предварительный просмотр цветовой палитры. Посмотрите, как выбранные цвета и их варианты сочетаются между собой.

Предварительный просмотр цветовой палитры. Посмотрите, как выбранные цвета и их варианты сочетаются между собой.

Пример веб-страницы (светлая/позитив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.

Пример веб-страницы (темная/негатив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.

Показать пример текста. Отметьте галочку, чтобы отобразить белый, черный и серый текст в окне предварительного просмотра цветовой схемы.

Рандомизация. Служит для создания случайной палитры согласно настройкам рандомизации.

Настройки рандомизации. Нажмите, чтобы установить, какие параметры должны быть рандомизированы.

Контраст по цвету (Контраст цветовых сопоставлений). Конспект И. Иттен «Искусство цвета»

Контраст по цвету (Контраст цветовых сопоставлений). Конспект книги И. Иттен «Искусство цвета»

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

Контраст по цвету ( цвет к цвету) это сочетание любых чистых цветов в их предельной насыщенности.
Для создания контраста по цвету нужно, по крайней мере, три чистых и достаточно удаленных друг от друга цвета.

Яркие цвета, полученные без по­мощи черной или белой красок, называются чистыми цветами. Желтый, красный, голубой и зеле­ный — это чистые цвета. Цвета, полученные при смешении чистых цветов с черным цветом, назы­ваются цветными тенями. Темно-коричневый цвет — это цветная тень. Цвета полученные при смешении их с белым цветом, называются оттен­ками. Розовый цвет, цвет слоновой кости — это оттенки. Цвета полученные при смешении чистых цветов с черным и белым, называются тонами. Ры­жевато-коричневый, цвет беж и серый — это тона.

Самый сильный контраст по цвету дают три основные цвета: красный, синий и желтый.

Данный контраст создает впечатление пестроты, силы, решительности.

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

Интенсивность контраста по цвету всегда уменьшается по мере того, как выбранные нами цвета удаляются от основных трех. Так, оранжевый, зеленый, фиолетовый по своей контрастности уже гораздо слабее, чем желтый, красный и синий, а воздействие цветов третьего порядка еще менее явно ( см. Двенадцатичастный цветовой круг).

Контраст по цвету позволяет, осветляя и затемняя выбранные цвета, получить множество совершенно различных сочетаний. Число вариаций здесь очень велико и в соответствии с этим столь же бесконечно число их выразительных возможностей. Включение белого и черного цвета в палитру зависит от темы и индивидуальных предпочтений художника.

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

реальную конкретность (от себя: эту конкретность над нарабатывать самостоятельно воспринимая каждый цвет сначала в отдельности, а потом в сочетании (колорит)). Белый цвет ослабляет яркость прилегающих к нему цветов и делает их более тёмными, чёрный, наоборот, — повышает их яркость и делает их более светлыми. Поэтому, чёрный и белый являются важными элементами цветовых композиций.

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

Для этого абзаца мне показалась подходящей картина Дега.  Сияния этого Божественного синего   усилено прозрачным белым, черным и теплым рыжим (по материалам лекции Л. М. Поповой).

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

Цветовые контрасты можно очень часто найти в витражах, особенно ранних, где их стихийная сила берёт верх над пластическими формами архитектуры.

Стефан Лохнер, Фра Анжелико, Боттичели и другие художники строили свои картины, используя прежде всего принцип контраста по цвету.

Фра Анжелико

Фра Анжелико, фрагмент

Боттичели

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

Грюневальд  «Воскресение Христа»

В картине Боттичелли «Положение во гроб» цветовые контрасты, на которых построена картина, дают художнику возможность показать захватывающее величие этой сцены. Её общее цветовое решение символизирует космически-значимое мгновение этого мирового события.

Боттичелли «Положение во гроб»

Следует признать, что выразительные возможности каждого отдельного цветового контраста могут проявляться самыми различными способами. С их помощью можно выразить бурное веселье, глубокое горе, земную первородность и космическую универсальность. Ряд современных художников, как, например, Матисс, Мондриан, Пикассо, Кандинский, Леже и Миро очень часто работали, используя контрасты цветовых отноше-ний. Особенно Матисс, который писал множество натюрмортов и фигурных композиций, используя пестроту и силу этого контраста. Хорошим примером здесь может служить женский портрет «Янтарное ожерелье», написанный им чистыми тонами — красным, жёлтым, зелёным, синим, красно-фиолетовым, белым и чёрным. Эти сочетания служили ему выразительной характеристикой молодого, живого и умного существа.

или

Матисс, портрет «Янтарное ожерелье»

Матисс

Художники группы «Синий всадник» — Кандинский, Франц Марк и Август Маке в ранние периоды творчества работали почти исключительно на цветовых контрастах.

Кандинский

Как выбрать оттенок любого цвета, подходящий именно вам? Часть1. Контрастность.

Вопрос, собственно, сформулирован в названии.
Как часто приходится отказываться от вещи, цветового сочетания или даже идеи наряда по причине «этот цвет мне не идет». И это тем более обидно, что на самом деле цвет не может не подходить (за редким исключением), главное — верно выбрать оттенок.
Конечно, если вы прошли профессиональное цветотипирование и имеете в наличии подходящую палитру, то этот вопрос перед вами не стоит. Также бывают сложные случаи, где без профессионала не обойтись.
Индивидуальная палитра также не всегда может помочь, так как включает в себя только 16 оттенков. А что делать, если хочется носить цвет, которого в палитре нет?

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

Для начала нужно определиться с тем, что имеем — то есть с природными данными. Для выбора оттенков необходимо учесть четыре критерия: контрастность, светлоту, мягкость и температуру цветов внешности.
Итак, по порядку.

В сегодняшней статье мы рассмотрим Контрастность.

Общая технология.

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

Пример шкалы:

разница в 0-4 деления — контрастность низкая
разница в 4-7 делений — контрастность средняя
разица в 7-10 делений — контрастность высокая.

В нашем примере самый темный цвет — цвет волос, он на уровне чистого черного, самый светлый — цвет кожи, на уровне 9. Итого разница — 8 пунктов. Следовательно, контрастность у нашей героини высокая.

Нюансы.

1. Необязательно самыми контрастными элементами окажутся ваши волосы и кожа. Возможно, это будут волосы и глаза, или глаза и кожа, или даже волосы и белки глаз. К определению контрастности нужно подходить индивидуально, принимая во внимание то, что в вашей внешности значимо, а что можно не принимать в расчет. Как правило, белки глаз — это самый светлый участок лица, однако у европейских женщин он не настолько обращает на себя внимание, чтобы учитывать его при определении контрастности. Тогда как у африканских женщин яркие белки глаз и белые зубы могут быть основой высококонтрастной внешности.
2. Хорошие фото с правильным светом, не затемненные и не пересвеченные, обеспечат верное определение уровня контраста, так что обращайте внимание на баланс белого на фотографии и освещение при определении без фото.

Применение.

Вы определили ваш уровень контрастности. Что вам это дает?
В выборе одежды оптимально придерживаться вашего природного уровня контраста.
Например, если ваша внешность скорее низкоконтрастная, то вас украсят цветовые сочетания с разбросом в 2-4 тона, особенно хорошо могут подойти монохроматические сочетания. Что будет, если контрастность вашей одежды значительно выше вашей? Вероятнее всего, будет видно в первую очередь одежду, а не вас. Для балансировки низкоконтрастной внешности и высококонтрастного наряда необходимо добавлять контрастность во внешность.
Сравните:*


* безусловно, примеры на селебрити очень условные. Мало кому известно, какая внешность является для них природной, и к тому же — мастерство визажистов, стилистов и прочей армии профессионалов оставляет мало шансов найти отрицательный пример.

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

Средняя контрастность наиболее вариативна… и распространена. Девушкам со среднеконтрастной внешностью доступны почти все сочетания, кроме крайних вариантов.

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

Цветовые модели и контрасты

Фото видео студия «Бекар» — все виды профессиональной фото видео съёмки!

Читать с начала

 Комплиментарные (гармоничные, контрастные) – цвета, расположенные в круге напротив друг друга. Очень хорошо сочетаются друг с другом, поэтому называются гармоничными.

 

Характерные – цвета, расположенные в круге через один.

 

Нехарактерные (аналоговые) – цвета, расположенные рядом друг с другом. Хорошо сочетаются, но не позволяют получить в изображении контраст.

 

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

 Монохромная модель (одноцветная гармония). Из определения видно, что равновесие создаётся присутствием в изображении только одного цвета в его оттенках. При этом он может быть как основным или составным, так и оттенком какого-либо из них. Самая простая модель.

Оттенки синего

 Ярким примером монохромной цветокоррекции может служить

сепия – придание изображению какого-либо оттенка коричневого цвета с целью имитации старой чёрно-белой фотографии.

Оригинал

Сепия

 При использовании монохромной модели в фото или видео производстве нужно помнить следующее: цвета, находящиеся в цветовом круге, делятся на два типа – тёплые и холодные (о них мы расскажем позже).

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

 Если же Ваш творческий замысел отражает позитивное настроение, безмятежность, умиротворённость – тонировать изображение лучше тёплыми цветами и оттенками.

 В принципе, это правило применимо ко всем моделям, учитывая тот факт, что в любом случае какой-то один цвет или оттенок в изображении будет преобладающим (интенсивным). Синеватый оттенок человеческого лица в прекрасный солнечный день – дисгармония. Синеватый оттенок человеческого лица лунной холодной ночью – гармония.

   

 Контрастная модель (двухцветная гармония). Цветовое равновесие в такой модели создаётся комплиментарными цветами, расположенными в цветовом круге напротив друг друга.

 Как уже было сказано выше, такие цвета очень хорошо сочетаются друг с другом но… Если они сильно различаются по насыщенности, самый насыщенный должен занимать меньшую площадь. Именно основываясь на принципе контрастной модели ныне очень модная цветокоррекция изображения TEAL&ORANGE получила очень широкое распространение не только в фотографии и кинематографе, но и на телевидении. Не очень сложная в исполнении, но очень гармоничная модель.

 

Трёхцветная равномерная (триадная) модель. Трёхцветная гармония. При создании такой модели в изображении участвуют три цвета, расположенные в цветовом круге относительно друг друга через равные промежутки. Проще – в вершинах равностороннего треугольника, нарисованного в центре круга.

 Воплотить в изображении цветовое решение, используя три цвета, достаточно сложно (по сравнению с монохромной или контрастной моделями), но в случае грамотного использования трёхцветной равномерной модели результат получается очень сбалансированным.  

 Трёхцветная доминирующая модель (разделённая гармония). В этой модели также участвуют три цвета, только выбираются они, в отличии от равномерной модели, по другому принципу: после выбора основного цвета определяется контрастный ему цвет, расположенный на противоположном конце вектора, и к модели добавляются два цвета, находящиеся рядом с контрастным по обе стороны.

 

 Квадроравномерная модель (четырёхцветная гармония). Количество цветов в такой модели достигает четырёх. Из цветового круга выбираются две пары цветов, расположенные в вершинах прямоугольника или квадрата.

  

 Квадродоминирующая модель (альтернативная четырёхцветная гармония). В этой модели используется один доминирующий цвет + контрастный + два дополнительных, примыкающих к контрастному с двух сторон.

Существует ещё аналоговая модель (аналоговая гармония), позволяющая сочетать цвета, расположенные рядом друг с другом в одном сегменте цветового круга между первичными (основными) цветами.

  Говоря о цветовой гармонии в процессе создания своей индивидуальной формулы цветокоррекции, необходимо рассказать о видах и особенностях цветовых контрастов. Контраст возникает между двумя цветами с чётко выраженными различиями. При этом если различия достигают своего предела, контраст называется полярным (или диаметральным). Самые простые примеры – чёрный-белый, большой-маленький, холодный-горячий. При этом зрительно различить контраст можно только сравнением. Мы можем определить, что нарисованная на бумаге линия длинная, если для сравнения перед нами будет нарисована линия короче. И в то же время длинная линия станет короче по сравнению с более длинной. Таким же образом ощущения от одного цвета могут быть ослаблены или усилены с помощью другого контрастного цвета.

    

  На сегодняшний день в колористике описаны семь контрастных проявлений цвета:

1.     Контраст по цвету

2.     Контраст светлого и тёмного

3.     Контраст холодного и тёплого

4.     Контраст дополнительных цветов

5.     Симультатный контраст

6.     Контраст по насыщенности

7.     Контраст по площади цветовых пятен

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

Контраст по цвету.

 Контраст по цвету достаточно простой потому, что его можно создать из всех чистых цветов (жёлтый, красный и синий) в их предельной насыщенности.

Данный контраст создаёт впечатление пестроты, силы, решительности. Интенсивность контраста по цвету уменьшается по мере того, как выбранные для цветокоррекции тона удаляются от трёх основных. Например, контраст цветов второго порядка (оранжевый, зелёный, фиолетовый) будет гораздо слабее.

 Контраст по цвету позволяет получить великое множество совершенно различных цветовых сочетаний путём осветления (+ белый) или затемнения (+ чёрный) выбранных цветов. Выразительные возможности контраста по цвету позволяют подчеркнуть в изображении и бурное веселье, и глубокое горе, и земную первородность, и космическую универсальность. Интересного результата при использовании контраста по цвету можно добиться и в том случае, если одному из цветов отвести главную роль, а остальные использовать в небольших количествах для того, чтобы только подчеркнуть качества главного цвета. Подчёркивая какой-то один цвет, мы усиливаем общую выразительность изображения.

Контраст светлого и тёмного.

 Контраст светлого и тёмного является неотъемлемой частью человеческой жизни и природы вообще. В изобразительном искусстве чёрный и белый цвет являются самым сильным выразительным средством для обозначения света и тени. Контраст белого и чёрного – самый яркий пример контраста светлого и тёмного в ахроматических цветах,

а контраст жёлтого и фиолетового – в хроматических цветах.

 Контраст светлого и тёмного в хроматических цветах подразумевает использование основного цвета в сочетании с дополнительным, полученным в результате изменения насыщенности основного (+/- серый). 

При этом существует одна важная закономерность: светлый объект на тёмном фоне будет выглядеть крупнее, чем аналогичный тёмный объект на светлом фоне. Белый цвет излучается и как бы стремится во вне, в то время как чёрный поглощается и как бы стремится внутрь.

 Контрастом светлого и тёмного можно добиться объёмности изображения, а  в фотографии и кинематографе именно контрастом светлого и тёмного в кадре создаётся перспектива: чем дальше от объектива, тем светлее изображение и наоборот. При цветокоррекции об этом стоит помнить.

Контраст холодного и тёплого.

 Обычно принято считать, что:

Жёлтый

Жёлто-оранжевый

Оранжевый

Красно-оранжевый

Красный

Красно-фиолетовый – это ТЁПЛЫЕ ЦВЕТА, а

Жёлто-зелёный

Зелёный

Сине-зелёный

Синий

Сине-фиолетовый

Фиолетовый –

ХОЛОДНЫЕ ЦВЕТА.

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

  Исследования показали, что сине-зелёный цвет понижает импульс кровообращения (затормаживает), а красно-оранжевый его стимулирует (возбуждает).

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

 Именно на сочетании «тормозящих» и «возбуждающих» цветов основан контраст холодного и тёплого, имеющий особую значимость для поиска цветовых решений изображения. Различные способы проявления этого контраста не только расширяют круг его выразительных возможностей (та же цветокоррекция TEAL&ORANGE), но и делают его в фотографии и кинематографе важнейшим изобразительным средством для передачи пластических ощущений и перспективы – более удалённые от объектива предметы всегда должны казаться более холодными.

Контраст дополнительных цветов.

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

Жёлтый – фиолетовый

Жёлто-оранжевый – сине-фиолетовый

Оранжевый – синий

Красно-оранжевый – сине-зелёный

Красный – зелёный

Красно-фиолетовый – жёлто-зелёный

 Эти сочетания дополнительных цветов парадоксальны по своей природе: противоположны друг другу, они друг в друге нуждаются, расположенные рядом, они максимально подчёркивают (и уравновешивают) друг друга, а при смешивании взаиморастворяются, образуя особенно красивые серые цвета (так называемый цветной серый). Дополнительные цвета при пропорционально грамотном сочетании придают изображению прочную основу воздействия на зрителя.

Симультатный контраст.

 Симультатный контраст – явление, при котором наше зрение при восприятии какого-либо цвета «требует» появления его дополнительного цвета, и в случае отсутствия последнего симультатно (одновременно) порождает его в сознании, вызывая чувство возбуждения и вибрации изображения. В большинстве случаев такие вибрации ломают цветовую гармонию, вызывая зрительный резонанс и дисгармонию в восприятии изображения. Симультатный контраст может возникать в тех случаях, когда колорист в выборе цвета намеренно или случайно отклоняется от правил, присущих определённой цветовой модели. Например, в случае контрастной модели (двухцветная гармония), в качестве дополнительного цвета к основному жёлтому берётся не фиолетовый, расположенный напротив жёлтого, а сине-фиолетовый или красно-фиолетовый, расположенные рядом с фиолетовым.

 В случае трёхцветной равномерной модели (трёхцветная гармония), если в триаде синий – жёлтый – красный вместо синего выбрать сине-зелёный цвет в качестве фона, то красный и жёлтый на нём будут симультатно возбуждаться и проявлять себя совсем иначе, чем на синем фоне.

 Возможность возникновения симультатного контраста уменьшается и при наличии контраста светлого и тёмного, то есть при использовании цветов в разной степени их осветлённости. Намеренно добиваться в фотографии или кино симультатного контраста вряд ли есть необходимость, а вот почему он возникает и как его избежать – знать нужно.

Контраст по насыщенности.

  Контраст по насыщенности подразумевает сочетание чистых, насыщенных цветов с цветами блеклыми, приглушёнными. Обладает тихой и спокойной выразительностью. Чистые цвета теряют свою насыщенность сразу, как только затемняются или осветляются, причём сделать это можно несколькими способами для достижения конкретного результата.

1. Чистый цвет можно «разбавить» белым, практически сохранив чистоту, но придав ему более холодный оттенок.

2. Чистый цвет можно «разбавить» чёрным, практически отняв чистоту и придав ему грязноватый оттенок.

3. Чистый цвет можно «разбавить» серым, нейтрализовав сам цвет и придав ему блеклый, «слепой» оттенок.

4. Чистый цвет можно «разбавить» соответствующим дополнительным цветом, получив промежуточные тона, которые при осветлении белым способны дать редкие по своей сложности оттенки.

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

 Действие контраста по насыщенности относительно. Всякий цвет может казаться насыщенным рядом с блеклым, равно как и блеклым по отношению к более насыщенному.

 Чтобы добиться выразительности в композиции, используя только контраст по насыщенности, необходимо блеклые цвета сформировать на цветовой основе насыщенных: чистый красный должен контрастировать с блеклым красным, чистый синий – с блеклым синим и т.д. В противном случае (чистый красный + блеклый синий) контраст по насыщенности может быть заглушён, например, контрастом тёплого и холодного, и тогда его тихая и спокойная выразительность останется под вопросом…

Контраст по площади цветовых пятен.

 Исключительная особенность этого контраста – способность проявлять и усиливать проявления всех других контрастов, присутствующих в изображении, благодаря своей геометрической, «размерной» сущности отношений между двумя или несколькими цветовыми пятнами. Проще говоря, контраст по площади цветовых пятен определяет количественно-пространственные отношения между двумя или несколькими цветами с целью определения степени их уравновешенности в композиции изображения. Силу воздействия цвета на зрителя определяют два фактора: светлота цвета и размер цветового пятна. Именно за размеры цветовых пятен отвечает данный контраст. Ввиду того, что и само понятие цвета субъективное, и геометрические размеры отдельных сложных элементов изображения определить трудно, соотношения площадей цветовых пятен тоже носят приблизительный характер, доверяя скорее глазомеру художника, чем числовым отношениям и расчётам. Но всё же… Гармоничные размеры плоскостей для основных и дополнительных цветов могут быть выражены следующими цифровыми значениями:

Жёлтый          – 3

Оранжевый    – 4

Красный         – 6

Фиолетовый   – 9

Синий             – 8

Зелёный          — 6

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

Жёлтый : оранжевый = 3 : 4 

Жёлтый : красный = 3 : 6

Зелёный : фиолетовый = 6 : 9

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

 Всё, о чём было сказано в этом разделе статьи, поможет и фотографу, и видеографу создать в своих работах гармоничный цветовой баланс не только на этапе цветокоррекции, но и на этапе подготовки к съёмке. Зная особенности основных цветовых моделей и видов контраста, можно грамотно расставить декорации, подобрав в интерьере цветовые соотношения не по принципу «Как красиво!!!» а по принципу «Как гармонично!!!», можно заранее расставить соответствующие цветовые акценты, уравновешивающие композицию кадра, можно со знанием дела подобрать правильное цветовое решение в одежде персонажей…В любом случае, Ваши творческие фантазии обретут качественный, законченный вид и не будут вызывать ощущения нехватки или переизбытка чего-то…

продолжение

 © Студия Бекар. Все права защищены.

 Любое использование материалов допускается только с указанием активной ссылки на источник.

Теория цвета. Контрастные цвета. — Красота, вдохновленная природой — LiveJournal

Сегодня поговорим о противоположности родственным цветам — контрастных цветах. По-другому они называются комплиментарные («дополняющие»). Эти цвета находятся точно друг напротив друга в цветовом круге. 

Самые известные комплиментарные пары — желтый-фиолетовый, красный-зеленый и синий-оранжевый. Однако, более точные вариации можно продолжать и дальше. Например, сине-зеленый — красно-оранжевый, желто-оранжевый — сине-фиолетовый итд.

Находясь рядом, комплиментарные цвета усиливают друг друга.
Например, в паре зеленый — красный, зеленый выглядит более зеленым, красный — более красным. 

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

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

С более сложными и мягкими цветами немного легче — картинка смотрится гармоничнее, цвета усиливают друг друга.
желто-оранжевый и сине-зеленый, насыщенный зеленый и насыщенный красный
 

Что интересно, тенденция к комплиментарным цветам достаточно сильна в моде и декорах Южной Азии (Индия, Бангладеш, Пакистан итд), в отличие от более спокойных арабских декоров. Такие цветовые сочетания требуют немалого мастерства, однако, результат впечатляет.

Однако, в повседневном стиле одежды лучше использовать комплиментарные цвета в небольших количествах в аксессуарах.  Такие аксессуары подчеркнут цвет основного наряда и сделают образ живее, энергичнее и интереснее.
photo credit http://fitsoffashion.blogspot.com/2011/12/great-new-color-combination-poppy-and.html
http://shutterstitch.blogspot.com/2011/09/what-to-wear-blue-and-orange.html

 

Комплиментарные цвета могут быть и мягкими:

Чтобы определить подходящий комплиментарный цвет, можно воспользоваться вот этой ссылкой:
http://www.whatsitscolor.com

Загружаете там картинку, программа определяет ее преобладающий цвет и составные цвета и делает комплиментарный фон страницы.

Контраст по насыщенности — Искусство цвета (Иоханнес Иттен)

· Инструмент для подбора цветов и генерации цветовых схем ·

Искусство цвета

Иоханнес Иттен

Оглавление:

Говоря о «качестве цвета», мы имеем в виду его чистоту и насыщенность. Слова «контраст по насыщенности» фиксируют противоположность между цветами насыщенными,чистыми и блеклыми, приглушенными. Спектральные цвета, полученные путем преломления белого света, являются цветами максимальной насыщенности или максимальной чистоты.

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

Цвета могут терять свою чистоту четырьмя способами, причем они весьма различно реагируют на средства, которые используются в этих целях.

1. Чистый цвет может быть смешан с белым, что придает ему несколько более холодный характер. Карминно-красный цвет при его смешении с белым приобретает синеватый оттенок и резко меняет свой характер. Желтый также становится немного более холодным благодаря примеси белого, а основной характер синего цвета остается в значительной мере неизменным. Фиолетовый цвет чрезвычайно чувствителен к примеси белого, и если насыщенный темно-фиолетовый цвет имеет в себе нечто угрожающее, то от примеси белого он становится более светлым — лиловым — и производит приятное и спокойное впечатление.

2. Чистый цвет можно смешать с черным. При этом желтый теряет свою лучистую светлоту и приобретает некую болезненность и коварную ядовитость. Это немедленно сказывается на его чистоте. Картина Жерико «Умалишенный», написанная в черно-желтых тонах, производит потрясающее впечатление душевного расстройства. Черный цвет усиливает присущую фиолетовому цвету мрачность, наделяет его некой безвольностью и уводит в темноту. При подмешивании черного цвета к ярко-красному кармину последний получает звучание, приближающее его к фиолетовому. Красная киноварь при подмешивании черного дает нечто вроде жженного, красно-коричневого вещества. Синий цвет затмевается черным. Достаточно небольшого добавления черного, чтобы его чистота быстро исчезла. Зеленый цвет допускает гораздо больше модуляций, чем фиолетовый или синий, и имеет много возможностей своего изменения. Обычно черный цвет отнимает у цветов их чистоту. Он отдаляет их от света и более или менее быстро «убивает».

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

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

Если в какой-либо смеси участвуют все три цвета «первого порядка», то полученный цвет будет отличаться слабым, блеклым характером. В зависимости от пропорций, он может казаться желтоватым, красноватым, синевато-серым или черным. С помощью трех цветов «первого порядка» могут быть получены все степени блеклости. То же относится и к трем цветам «второго порядка» или ко всякой другой комбинации, если только в этой смеси будут участвовать три основных цвета — желтый, красный и синий.

Действие контраста «блеклый — насыщенный» относительно. Какой-нибудь цвет может показаться насыщенным рядом с блеклым цветом, и блеклым — рядом с более насыщенным.

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

Для выявления контраста по насыщенности необходимо, избегая контраста светлого и темного, добиться равномерного изменения насыщенности всех квадратов.

Рисунки 38-41 дают нам представление о тончайших возможностях контраста по насыщенности в хроматических модуляциях. Подобные упражнения могут быть выполнены и на основе размещения вместо серого цвета в угловых квадратах цветов, дополнительных к цвету центрального квадрата. При этом все будет гораздо более цветным, чем в упражнении с серым цветом.

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

Блеклые цвета — главным образом, серые — кажутся живыми благодаря окружающим их чистым цветам. Это можно наблюдать, если на одной части «шахматной доски» в каждом втором квадрате разместить нейтральный серый цвет, а в промежуточных квадратах разместить чистые, насыщенные цвета той же светлоты, что и серый. Тогда мы увидим, что серый цвет приобретет некоторую живость, в то время как находящиеся рядом с ним хроматические цвета покажутся менее насыщенными и относительно ослабленными.

Использование контраста по насыщенности можно видеть в картинах Жоржа де ла Тура «Новорожденный», Музей города Ренн; Анри Матисса (1869-1954) «Пеон», Нью-Йорк, Музей современного искусства и Поля Клее (1879-1940) «Волшебная рыба», Филадельфия, Музей искусства.

10 инструментов проверки контраста вашего дизайна для улучшения его „читабельности“ / Хабр

Вашему вниманию предлагается перевод статьи 10 colour contrast checking tools to improve the accessibility of your design от Roger Johansson. Перевод alexbig

10 инструментов проверки контраста вашего дизайна для улучшения его „читабельности“

В моей повседневной работе мы создаём графический дизайн для большинства сайтов наших клиентов, но не для всех. Некоторые из них сами или с помощью дизайн студий делают визуальный дизайн и оставляют переход на HTML + CSS + JavaScript и CMS для нас. Когда такое происходит, я практически всегда сталкиваюсь с проблемами недостаточного цветового контраста в дизайне. Иногда эти проблемы достаточно второстепенные и допустимые, но зачастую, есть области, которые необходимо скорректировать.

Если вам интересно, почему меня волнует (и почему я думаю, что вы должны заботиться о) цветовом контрасте веб-сайта — очень просто. Если текст не имеет достаточного контраста со своим фоном — у людей возникнут проблемы. Все, кто страдает дальтонизмом или те, кто бороздят Веб не в идеальных условиях (плохой монитор, отражение окон, блики от солнца) не смогут прочитать текст, по крайней мере, без трудностей.

А вы ведь, не хотите этого, верно? Если вы публикуете какой-нибудь текст на сайте, как делают большинство из нас, я предполагаю, это потому, что вы хотите, чтобы его прочитали. Поэтому цветовой контраст, думаете ли вы о нём или нет — очень важен для вас, ваших клиентов и конечных пользователей.

Я настолько привык проверять контраст любого дизайна сделанного мной или с моей помощью, что считаю это само собой разумеющимся, что должен делать каждый из нас. По-видимому, это не так, и, мне кажется, я должен поделиться с вами списком инструментов, которые помогут проверить контраст цвета. Об этом статья.

Очень краткое объяснение того, как правильно рассчитываются цветовые коэффициенты: есть несколько различных алгоритмов, некоторые приложения используют алгоритм коэффициента отношения яркости (luminosity contrast ratio algorithm) упомянутый в WCAG 2.0 черновике, в то время как другие используют алгоритм яркости цвета и цветовой разницы (colour brightness and colour difference algorithms), упомянутый в сопровождающем документе WCAG 1.0. Некоторые из них используют оба.

Замечу, что что ни один из них не одобрен W3C (по крайней мере пока), но они вполне пригодны для определения того, сможет ли сочетание цвета текста и фона вызвать проблемы у дальтоников или людей с другими нарушениями зрения.

Упомянув всё это, перейдём к самим инструментам. Некоторыми из них можно пользоваться через веб, в то время как другие — отдельные приложения или дополнения к браузерам.

А вот и список:

• Colour Contrast Check: Первый действительно интуитивный онлайн инструмент от Jonathan Snook для проверки цвета который я знаю, позволяет вам внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает как выглядит эта комбинация и проходит ли она тест.
• Colour Contrast Analyser: Gez Lemon’s Colour Contrast Analyser использует тот же алгоритм что и первый, поэтому результаты должны быть одинаковыми. Разница в том, что тут нет моментального эффекта и никаких слайдеров. Это значит, что вам нужно сначала ввести значения в форму и отправить её, чтобы увидеть что получилось.
• Colour Contrast Visualiser: используя несколько иной подход, Tom Hooper’s Colour Contrast Visualiser помогает вам найти приемлимые сочетания цветов выделяя цвета, дающие достаточный контраст цветовой палитре. Colour Contrast Visualiser доступен в форматах Flash и Adobe AIR, установите соответствующие дополнения (плагины) для работы, если их нет.
• Colour Contrast Analyser Firefox Extension: вместо того, чтобы вводить цвета вручную, Gez Lemon’s плагин для Firefox найдёт все текстовые элементы в документе и проверит разницу фона и цвета текста. Результаты он откроет в новом табе, с пред-просмотром цветов. Это может показаться немного утомительным, но это хороший способ поиска проблематичных мест в дизайне. К сожалению, этот инструмент не распознаёт изображения, поэтому используйте его на HTML документе без графики.
• CSS Analyser: ещё один инструмент от Gez Lemon, the CSS Analyser, который тестирует цветовой контраст вашего CSS. Он также валидирует CSS и проверяет чтобы соответствующий размер текста был указан в относительных единицах.
• Luminosity Contrast Ratio Analyser: этот инструмент был также сделан Gez Lemon — проверяет цвет переднего и заднего фона по алгоритму разработанному Trace R&D Center.
• Vischeck: симулятор дальтоника, который можно использовать онлайн или как дополнение к Photoshop (появится в меню „Фильтр“). Онлайн версия симулирует эффект на основе изображения, которое вы загрузите, а плагин к Photoshop меняет цвета документа, над которым вы работаете.
• Contrast Analyser, Version 2.0: приложения для Windows и Mac OS X. Очень изящное приложение, которое довольно много умеет делать кроме анализа веб-страницы за вас. Вы можете указать цвет переднего и заднего фона цифрами или слайдерами, задать какой алгоритм применить — цвет/яркость или освещённость, затем проверит и покажет выбранные цвета в сравнении с разными типами нарушения зрения.
• Graybit: онлайн инструмент, авторы: Jona Fenocchi и Mike Cherim. Делает то, о чём говорит вам название — вы вводите URL к веб-странице, которая будет превращена в оттенки серого и показана в браузере.
• Sim Daltonism: доступна только для Mac OS X, это приложение не вычисляет контраст, но делает кое-что полезное. Оно симулирует разные виды дальтонизма в реальном времени, что даёт возможность легко проверить, создаёт ли дизайн проблемы.

Все инструменты упомянутые здесь мной — бесплатные, поэтому попробуйте их все, чтобы найти то, что подойдёт вам в повседневной работе. Я не думаю, что есть большая разница, что именно вы будете использовать, чтобы определить коэффициент контрастности и с имитировать дальтонизм приложением.

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

Наконец, я не думаю что результатам этих приложений (или, скорее, алгоритмов, которыми они пользуются) нужно слепо следовать. Крупные заголовки и текст, который не имеет важное значение могут и не пройти тест, в то время как, основной текст (например, текст написанной статьи) — обязательно.

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

От alexbig: чтобы не искать косяки после дизайна — делайте правильно с самого начала (или объясните дизайнерам как этим пользоваться, если это не зависит от вас!).

Color and Contrast — Accessibility — Human Interface Guidelines

Цвет и контраст

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

Предпочитать системные цвета для текста. Когда вы раскрашиваете текст, используя цвета, определенные UIColor или NSColor, текст правильно реагирует на настройки специальных возможностей, такие как «Инвертировать цвета» и «Увеличить контраст».

Помните о дальтонизме. Многим дальтоникам трудно отличить синий от оранжевого, например, или красный от зеленого (и красный или зеленый от серого). Избегайте использования этих цветовых комбинаций как единственного способа различать два состояния или значения. Например, вместо использования красных и зеленых кружков для обозначения офлайн и онлайн вы можете использовать красный квадрат и зеленый кружок. Некоторые программы для редактирования изображений включают инструменты, которые могут помочь вам в проверке дальтонизма.

Как видно без дальтонизма.

Как видно при красно-зеленой дальтонизме.

Правильно реагируйте на инверсию цветов. Люди могут включить «Инвертировать цвета», если они предпочитают просматривать объекты на темном фоне. В режиме интеллектуального инвертирования инвертирования цветов изображения, видео и полноцветные значки (например, значки приложений и нешаблонные изображения) не инвертируются, а темный интерфейс остается темным.

Используйте сильно контрастирующие цвета, чтобы улучшить читаемость. На восприятие цвета влияет множество факторов, включая размер и вес шрифта, яркость цвета, разрешение экрана и условия освещения. Когда вы увеличиваете цветовой контраст визуальных элементов, таких как текст, глифы и элементы управления, вы можете помочь большему количеству людей использовать ваше приложение в большем количестве ситуаций. Чтобы узнать, соответствует ли контраст соседних цветов в вашем пользовательском интерфейсе минимально допустимым уровням, используйте онлайн-калькулятор цвета, основанный на формуле цветового контраста WCAG.

Используйте размер текста для определения контрастности. Как правило, меньший или более легкий текст должен иметь больший контраст, чтобы быть разборчивым. Используйте следующие значения в качестве руководства.

Размер текста	Толщина текста	Минимальная контрастность
До 17 баллов	Любая	4,5: 1
18 пт и больше	Любая	3: 1
Любая	Полужирный	3: 1

Чтобы узнать больше о том, как сделать текст в приложении доступным для всех пользователей, см. Размер и вес текста.

.

Contrast Finder, найдите правильные цветовые контрасты для веб-доступности (WCAG)

Что такое Contrast Finder ?

Contrast-Finder — это инструмент, который вычисляет контраст между двумя цветами (фон, передний план) и проверяет, является ли контраст допустимым. Когда контраст недействителен, основная цель — предложить правильные цветовые контрасты.

Contrast-Finder разработан для использования веб-дизайнерами, веб-разработчиками или профессионалами в области веб-доступности для улучшения читаемости HTML-страниц и веб-сайтов.

Справка / Как пользоваться этим инструментом?

Интерфейс Contrast-Finder представляет собой форму с пятью обязательными полями.

Цвет текста / передний план

Это цвет текста . Вы можете заполнить это поле цветовым ключевым словом , шестнадцатеричным значением или значением RGB . Затем справа от поля отображается входное значение.

Цвет ключевое слово

Пример: Черный , Серебро , Желто-зеленый , Средне-фиолетовый .
Разрешенные значения — это те, которые перечислены в ключевых словах цвета CSS (от CSS уровня 1 до CSS уровня 4 ).

Цвет с шестнадцатеричными значениями

Пример: #AABBCC . Обратите внимание, что #ABC также работает, мы автоматически заполняем поле #AABBCC . Вы также можете использовать это поле без символа # , поэтому FFF или FFFFFF работают идеально.

Цвет со значениями RGB

Пример: rgb (255,255,255) .
Вы также можете использовать короткий синтаксис, например 255,255,255 , который интерпретируется как rgb (255,255,255) .

Цвет фона

Это цвет фона .
Это поле работает так же, как поле цвета текста.

Минимальное соотношение

Три возможных значения 3 , 4,5 и 7 .

Как выбрать соотношение? Это зависит от следующих элементов:

• Требуемый уровень доступности: AA или AAA .
• Размер текста.
• Текст жирный или нет?

Уровень AA

Два элемента (размер и полужирный) дают четыре комбинации:

• Текст не полужирный + размер текста < 24px : ratio = 4.5
• Текст не полужирный + размер текста> 24px : ratio = 3
• Полужирный текст + размер текста < 19px : ratio = 4.5
• Полужирный текст + размер текста> 19px : ratio = 3

Уровень AAA

Для уровня AAA логика такая же, только коэффициент увеличивается следующим образом:

• 4.5 соотношение становится 7
• 3 соотношение становится 4,5

Понимание размера текста

• Критерии 19px можно понимать как эквивалент 14pt или 120% или 1.2em .
• Критерий 24px можно понимать как эквивалент 18pt или 150% или 1.5em .

Для полного и исчерпывающего понимания того, как интерпретировать размер текста, следует прочитать определение крупномасштабного текста от WCAG.

Все сведения о коэффициенте контрастности

Цвет для редактирования

Это цвет текста или фона. По умолчанию используется цвет текста.

Выбранный вами цвет будет изменяться до тех пор, пока мы не найдем подходящий цвет. Другой цвет не изменится.

Дай мне / Алгоритмы

«Допустимые цвета и очень близкие к исходному цвету»

Это алгоритм по умолчанию. Он предлагает варианты цвета, действительно близкие к исходному цвету. (Цветовое расстояние вычисляется на математической основе, которая может варьироваться с точки зрения дизайнера.)

Для некоторых цветовых сочетаний алгоритм может не дать результата; в таком случае используйте другой алгоритм.

«Диапазон допустимых цветов»

Это резервный алгоритм, если первый не дает результата. Тем не менее, варианты цвета могут (сильно) отличаться от исходного цвета.

Отзывы пользователей

Если у вас есть какие-либо проблемы или вопросы по поводу Contrast-Finder , свяжитесь с нами:

Внесите вклад в Contrast-Finder

Мы искренне приветствуем все ваши предложения! Перевод, исправление, отчет об ошибке, новая функция…
Не стесняйтесь играть с исходным кодом или обсуждать на форуме.

.Анализатор цветового контраста

— ADG

Перейти к содержанию Открыть / закрыть меню Руководство разработчика специальных возможностей (на главную)

• Вступление
  • Как пользоваться
  • Около
  • Лицензия
  • политика конфиденциальности
• Настроить
  • Windows
    • Почему?
    • Современный.IE
    • VMware на macOS
    • VMware для Windows и Linux
  • Браузеры
    • Internet Explorer 11
    • Fire Fox
      • Панель инструментов веб-разработчика
    • Хром
      • Панель инструментов WAVE
    • Букмарклеты
      • Структурированное содержание
      • h223
      • HTML_CodeSniffer
  • Программы чтения с экрана
    • VoiceOver / iOS
    • Отвечать
    • NVDA
    • Челюсти
  • Инструменты помощника
    • Анализатор цветового контраста (текущая страница)
    • Проверка читаемости PDF
    • Режим высокой контрастности
    • TotalValidator
• Знание
  • Цвета и контраст
    • Как рассчитать
    • Как осмотреть
    • Цветовой контраст текста
    • Цветовой контраст для компонентов пользовательского интерфейса
    • Цветовой контраст для графических объектов
    • Цвета не хватает
  • Семантика
    • Смысл
    • Взаимодействие
    • Виджеты
  • ARIA
    • Цель
    • Плохая практика
  • Только клавиатура
    • Управление компьютером
    • Просмотр веб-сайтов
    • Как реализовать
  • Программы чтения с экрана
    • Что и почему
    • Соответствующие комбинации
    • Линейная обработка с помощью курсора
    • Без визуальных атрибутов
    • Мобильный: VoiceOver / iOS и TalkBack
      • Чтение сайтов
      • Взаимодействие с веб-сайтами
    • Рабочий стол: NVDA и JAWS
      • Режимы просмотра и фокусировки
      • Клавиша-модификатор Insert
      • Чтение сайтов
      • Взаимодействие с веб-сайтами
      • Горячие клавиши
    • Как реализовать
    • Так глючит!
• Примеры
  • HTML-шаблон
  • Скрытие элементов
    • Визуально
    • Из программ чтения с экрана
    • Со всех устройств
    • Хорошо для SEO?
  • Заголовки
    • Обработка
    • Хороший пример
    • Плохой пример
    • Визуально скрытые заголовки
    • Множественные h2 подходят для SEO?
    • Альтернативные техники
    • Схема HTML 5

.