Представляем «Генератор палитры теней», инструмент, который поможет вам генерировать значения прямоугольной тени CSS

Несколько недель назад я поделился некоторыми трюками, которые использую для создания пышных, реалистичных теней: Здесь используется несколько стратегий, но самая важная из них — многоуровневая . Вместо одной тени мы складываем 5 или 6 отдельных теневых слоев. Каждый слой был настроен с различными значениями для смещения x / y, радиуса размытия, распространения, цвета и непрозрачности.…

10 лучших генераторов цветовой палитры на 2022 год

Для большинства творческих проектов самостоятельно составить цветовую схему может быть сложно, именно поэтому онлайн-генераторы цветовой палитры — один из лучших способов! Независимо от того, являетесь ли вы дизайнером, художником, кинематографистом или начинающим любителем, генераторы цветовой палитры могут стать вашим спасением. Не совсем уверены, что это такое? Мы объясним это ниже в нашем списке лучших генераторов…

Лучшие цвета для оформления сайта: палитры из кино

Один из первых вопросов, который встает перед созданием сайта — какие цвета выбрать для дизайна. Ведь они влияют не только на внешний вид и стиль, но и на успех с точки зрения продолжительности посещения и продаж. Лучшие цвета для оформления сайта Цвета для сайта на тему мода и красота Спорт, хобби и развлечения Бизнес и…

Лучшие цвета для оформления сайта: палитры из кино

Один из первых вопросов, который встает перед созданием сайта — какие цвета выбрать для дизайна. Ведь они влияют не только на внешний вид и стиль, но и на успех с точки зрения продолжительности посещения и продаж. Лучшие цвета для оформления сайта Цвета для сайта на тему мода и красота Спорт, хобби и развлечения Бизнес и…

Смешно названные цветовые палитры заставят вас улыбнуться

Если вам нужен небольшой легкий рельеф и некоторое вдохновение цвета, то у нас есть только веб-сайт для вас. Colors.lol объединяет несколько прекрасных цветовых палитр с довольно забавными прилагательными, в результате чего получается список «чрезмерно описательных цветовых палитр». Это немного похоже на просмотр цветов краски, доступных в некоторых из более дорогие бренды, но лучше. Наши текущие…

Как использовать цветовые слепые дружественные палитры, чтобы сделать ваши диаграммы доступными

 Палитра, удобная для дальтоников "width =" 800 "height =" 450 "/> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

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

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

Мы собрали несколько готовых палитр для дальтоников, чтобы вдохновить вас. Для этого перейдите к разделу 4.

Содержание

  1. Что такое дальтонизм?
  2. Какие 3 вида дальтонизма?
  3. Почему цвет важен для визуализации данных
  4. Как создавать диаграммы с помощью палитры, не допускающей дальтонизма
  5. Ключевые выносы

Первым делом первым …

Что такое дальтонизм?

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

 Цветовая палитра, удобная для дальтоников - retina "width =" 273 "height =" 221 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК ИЗОБРАЖЕНИЯ

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

Какие 3 типа дальтонизма?

 Цветовые спектры 3 типов дальтонизма "width =" 1016 "height =" 257 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК ИЗОБРАЖЕНИЯ

Существует три различных типа дальтонизма:

Слепота красного / зеленого цвета

По данным Colblindor, 99% всех дальтоников страдают от красной / зеленой дальтонизмом. Это далее разбито на две отдельные категории:

  • Протанопия : также упоминается как «красная слабость», люди, которые страдают от этого изменения красной / зеленой цветовой слепоты, не способны воспринимать красный свет.

 Нормальное зрение по сравнению с протанопией "width =" 620 "height =" 413 "/> </p>
<p> <noscript> <img class= Слева: нормальное зрение, справа: протанопия
ИСТОЧНИК ИЗОБРАЖЕНИЯ

Цветовая гамма протанопии выглядит следующим образом:

 Цветовой спектр протанопии "width =" 369 "height =" 193 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК

  • Deuteranopia / Deuteranomaly : также известный как «зеленая слабость», этот тип красной / зеленой цветовой слепоты делает людей нечувствительными к зеленому свету (deuteranomaly) или неспособными воспринимать любой зеленый свет вообще (дейтеранопия).

 Нормальное цветовое зрение по сравнению с дальтонизмом "width =" 617 "height =" 410 "/> </p>
<p> <noscript> <img class= Слева: нормальное зрение, справа: дейтеранопия
ИСТОЧНИК ИЗОБРАЖЕНИЯ

Цветовая гамма дейтеранопии выглядит следующим образом:

 Спектр дальтоников - Deuteranopia "width =" 367 "height =" 192 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК

Красная / зеленая дальтонизм передается по наследству и поражает мужчин больше, чем женщин. Причина этого в том, что гены, ответственные за это состояние, содержатся в Х-хромосоме.

 Палитра, удобная для дальтоников - статистика "width =" 600 "высота =" 646 "/> </p>
<p> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

Слепота синего / желтого цвета

Люди, страдающие сине-желтой дальтонизмом, с трудом различают синий и желтый цвета.

Эта особая форма дальтонизма — также известная как тританопия — встречается гораздо реже, чем ее красно-зеленый аналог. Фактически, по данным Национальной медицинской библиотеки США, сине-желтая дальтонизм поражает менее 1 на 10 000 человек во всем мире.

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

 Палитра для слепых - Тританопия "width =" 619 "height =" 413 "/> </p>
<p> <noscript> <img class= Слева: нормальное зрение, справа: тританопия
ИСТОЧНИК ИЗОБРАЖЕНИЯ

Цветовая гамма тританопии выглядит следующим образом:

 Цветовая гамма тританопии "width =" 357 "height =" 199 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК

Полная слепота цвета

Люди, которые страдают от полной дальтонизма — также известного как Монохроматия — вообще не могут различить какие-либо цвета. По данным Color Blind Awareness, монохроматичность встречается у 1 из 33 000 человек крайне редко.

 Полная дальтонизм "width =" 513 "height =" 166 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК ИЗОБРАЖЕНИЯ

Почему цвет так важен при визуализации данных?

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

 Цветовое колесо Диснея "width =" 700 "height =" 906 "/> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

Можно даже утверждать, что цвета, используемые в диаграммах и инфографике, на самом деле рассказывают историю данных, которые они представляют. Как пишет Ева Мюррей в Forbes:

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

СМОТРЕТЬ: все, что вам нужно знать о ЦВЕТЕ… менее чем за 3 минуты

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

ГОРЯЧАЯ ПОДСКАЗКА : функция фирменного комплекта Venngage позволяет автоматически импортировать фирменные цвета и фирменные шрифты в ваш дизайн.

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

 Палитра, удобная для дальтоников - редактор "width =" 641 "height =" 588 "/> </p>
<p> <noscript> <img class= Как создавать диаграммы с палитрой, не допускающей дальтонизма

1.) Заранее спланируйте свою цветовую схему

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

 Цветовая палитра, удобная для слепых "width =" 1125 "height =" 597 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК ИЗОБРАЖЕНИЯ

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

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

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

 Цветовая палитра для слепых "width =" 661 "height =" 569 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК ИЗОБРАЖЕНИЯ

Еще лучше, мы собрали несколько универсальных палитр для дальтоников:

 Цветовая палитра, удобная для слепых "width =" 816 "height =" 3329 "/> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

ГОРЯЧИЙ СОВЕТ: Если вы застряли, попробуйте использовать инструмент, такой как Coblis, бесплатный симулятор дальтоников, который даст вам лучшее представление о том, как ваши изображения будут выглядеть людям с дальтонизмом.

2.) Избегать проблемных цветовых комбинаций

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

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

  • Красный и зеленый
  • Зеленый и коричневый
  • Зеленый и синий
  • Синий и серый
  • Синий и фиолетовый
  • Зеленый и серый
  • Зеленый и черный

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

 Палитра, удобная для дальтоников - Проблемные цвета "width =" 816 "height =" 6500 "/> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

3.) Используйте очень контрастные цвета

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

 Палитра, удобная для дальтоников - шаблон "width =" 816 "height =" 1056 "/> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

4.) Использовать узоры и текстуры

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

 Палитра, удобная для дальтоников - гистограмма "width =" 768 "height =" 458 "/> </p>
<p> <noscript> <img class= ИСТОЧНИК ИЗОБРАЖЕНИЯ

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

 Редактор Venngage - паттерны "width =" 194 "height =" 502 "/> </p>
<p> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

Подсказка : библиотека Venngage содержит более 4000 значков, которые можно использовать для повышения доступности инфографики и диаграмм.

 Палитра, удобная для дальтоников - icons "width =" 222 "height =" 537 "/> </p>
<p> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

 Палитра для слепых - шаблон "width =" 893 "height =" 445 "/> <noscript> <img class= ИСПОЛЬЗОВАТЬ ЭТОТ ШАБЛОН

7.) Держите ваш дизайн в чистоте и простоте

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

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

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

Следующие меры могут помочь гарантировать, что дальтоники действительно могут участвовать в ваших проектах:

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

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

Похожие записи в блоге:

6 способов использовать значки инфографики как профессионал
Что нужно и чего не нужно выбирать в цвете инфографики
Как подобрать цвета, чтобы увлечь читателей и эффективно общаться

7 инструментов создания цветовой палитры для UI

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

Вдохновение цветов: динамичные и разные цветовые палитры в городах высшего уровня

 КАК Design Live "width =" 600 "height =" 65 "/> </p>
<p> Цвет — это неотъемлемая часть дизайна, и вдохновение цвета есть везде. Создание цветовой палитры для дизайн-проекта — это отличный способ сохранить последовательность и изменить эффект, который имеет любой дизайн. Цвета передают настроение и вызывают эмоции, а наш мозг создает прочные ассоциации между цветом и значением. Наличие эффективной цветовой схемы важно для обмена сообщениями бренда; создает ли это ощущение идентичности бренда или пытается вызвать определенные эмоции, цвет является ключом к усилению воздействия. </p>
<h2> Цветное проектирование </h2>
<p> При поиске вдохновения для цвета важно знать, что разные цвета вызывают разные эмоции и чувства. Например, желтый ассоциируется с теплом и творчеством, фиолетовый имеет королевский оттенок, а красный вызывает в себе страсть и возбуждение, а также символизирует сердце. Зеленый говорит о богатстве и здоровье, черный ассоциируется с формальностью, и даже у серого есть ассоциации: он связан с наукой <span style= и зрелостью, и это может придать ощущение баланса вашему проекту.

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

Нью-Йорк

 color inspiration "width =" 600 "height =" 565 "/> </p>
<div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'>
<!-- Yandex.RTB R-A-268541-2 -->
<div id=

Для начала, палитра Нью-Йорка использует ярко-желтую подпись. Это не только намекает на фирменные желтые такси Нью-Йорка, но и говорит о творчестве и энергии города.

Дубровник

 color inspiration "width =" 600 "height =" 565 "/> </p>
<p> Другой город с богатыми оттенками, палитра Дубровника имеет терракотовые оранжевые крыши, которые усеивают его береговую линию. Этот яркий цвет также намекает на жизненную силу и яркость великолепного хорватского города. </p>
<h2> Дубай </h2>
<p> <img class=

Pantone представляет лучшие свадебные цветовые палитры 2019 года

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