Палетка в математике: Как сделать палетку — 3 «Б» класс

Какая математика стоит за этими цветовыми сочетаниями?

спросил 2 года, 2 месяца назад

Изменено 2 года, 2 месяца назад

Просмотрено 191 раз

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

https://style.helpscout.com/visual-elements/

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

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

.. или, может быть, просто слепой, работающий допоздна.

Так что за математика стоит за этим? Заранее спасибо!

• цвет
• теория цвета
• образцы
• палитра

8

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

Примеры

2

Существует множество моделей для представления цветов числами, наиболее широко известная из них — RGB, в которой цвет представлен значениями КРАСНОГО, ЗЕЛЕНОГО и СИНЕГО от 0 до 255.

Существует также CMYK (голубой, пурпурный, черный), HSL (оттенок/насыщенность/яркость), HSB (оттенок/насыщенность/яркость)

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

Если я посмотрю на синий, я бы сказал, что математическая аппроксимация в модели HSL такая (оттенок остается прежним):

• 100 — 5% насыщенность 100% яркость
• 200 — насыщенность 15 %, яркость 100 %
• 300 — 35 % насыщенность 100 % яркость
• 400 — насыщенность 65 %, яркость 100 %
• 500 — 95 % насыщенность 100 % яркость
• 600 — 100 % насыщенность 80 % яркость
• 700 — 100% насыщенность 65% яркость

Обычно цветовое сходство вычисляется с помощью специальных моделей цветового пространства, таких как CIELab: https://en.wikipedia.org/wiki/CIE_1931_color_space

, но здесь математика немного усложняется.

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie

Простое упражнение по математике и графическому дизайну

Каждый день нашей жизни мы сталкиваемся с теорией цвета. В большинстве случаев мы не задумываемся об этом дважды. Однако знаете ли вы, что суждения о вашей достоверности на 75% основаны на дизайне вашего веб-сайта? Первое впечатление на 94% связано с внешним видом и дизайном вашего сайта. И 46% клиентов основывают свои решения о покупке на эстетической привлекательности вашего сайта. Действительно, теория цвета и графический дизайн очень важны.

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

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

Цветовой круг: основа теории цвета

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

Новый взгляд на основные цвета

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

Знаете ли вы, что это не единственный набор основных цветов? Те основные цвета, которые вы выучили в начальной школе, рассказывают только часть истории. Другой набор основных цветов состоит из красного, зеленого и синего, или RGB. Чего ждать? Нет, это не тип-о. На самом деле в повседневной жизни вы используете основную цветовую схему RGB, а не RYB.

Так как же зеленый может быть основным цветом? Я думал, что желтый и синий дают зеленый. Вы правы, но только частично. Вот остальная часть истории. Основная цветовая схема RYB, которой вас учили в начальной школе, применяется для смешивания цветов краски или чернил. Всякий раз, когда вы смешиваете цвета света, вы используете цветовую схему RGB.

Где мы используем основную цветовую схему RGB?

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

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

Математические обозначения цвета

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

 цвет = RGB(красный, зеленый, синий) 

Итак, какие числа мы вставляем в каждый компонент? От 0 до 100 было бы хорошим предположением. На самом деле это общепринятый способ сделать это, но когда вы работаете с компьютерами, есть способ получше. Компьютеры используют двоичную систему, в которой используются степени двойки. Один байт состоит из 8 частей, называемых битами. В результате максимальное значение, которое может содержать байт, равно 2 ⁸ или 256. Мы установим для каждого компонента нашего цвета число от 0 до 255.

 черный = RGB(0, 0, 0)
белый = RGB(255, 255, 255)
красный = RGB(255, 0, 0)
зеленый = RGB(0, 255, 0)
синий = RGB(0, 0, 255) 

Выбор системы координат для нашего цветового круга

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

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

Ввод полярной системы координат

Вместо прямоугольной сетки полярная система координат основана на концентрических окружностях вокруг координаты (0, 0). Вместо ( x, y ) полярные координаты задаются как ( r, θ ). Координата r относится к радиусу или к тому, насколько далеко вы находитесь от начала координат. Тета (θ) — это угол от горизонтальной линии, идущей вправо от начала координат. В градусах тета — это число от 0 до 360.

Преобразуйте RGB в оттенок, насыщенность, яркость (HSL), чтобы сделать математику теории цвета еще проще

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

Оттенок	Угол на цветовом круге от 0 до 360°. Красный — 0°, зеленый — 120°, синий — 240°.
Насыщенность	Уровень серого в процентах. 0% — это оттенок серого. 100% полноцветный.
Яркость	Насколько светлым или темным является цвет в процентах. 0% — черный, а 100% — белый.

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

1. Преобразование основного цвета в нотацию HSL. Гайки и болты этого преобразования выходят за рамки этого руководства. Тем не менее, я написал скрипт Python, который выполняет преобразование, чтобы вы могли выполнять свой собственный анализ цвета.
2. Сложите и/или вычтите углы оттенков, чтобы определить дополнительные цвета. Мы сделаем несколько практических упражнений с этим ниже.
3. Преобразование цветов вашей цветовой схемы обратно в нотацию RGB.

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

Теория комплиментарных цветов

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

 hue_complimentary = hue_primary + 180
saturation_complimentary = saturation_primary
lightness_complimentary = lightness_primary 

Реальный пример дополнительных цветов

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

TRICOLOR, у которых есть у Forly Color. Color -Color, в цвете, у вас есть у Coldacent Color. Colle -Color. Colle -Color. Colle -Color. Colle -Color. Colle -Color. Complor -Color. Comply Prolancent. Все три цвета должны быть рядом друг с другом на цветовом круге. Один из соседних цветов должен быть немного холоднее вашего основного цвета. Другой должен быть немного теплее, чем ваш основной цвет.

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

Несколько слов об углах в теории цвета

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

В приведенных ниже уравнениях переменная phi ( φ ) представляет собой угол, на который соседние цвета смещены от основного. На графике ниже φ = 30°.

 оттенок1 = основной_оттенок + фи
оттенок2 = оттенок_основной - фи
насыщенность1 = насыщенность2 = насыщенность_основной
lightness1 = lightness2 = lightness_primary 

Смежные цвета для красного, смещение на 30° на цветовом круге

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

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

Триколор: Теория цветов триады

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

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

bleu, blanc, et rouge команды Montréal Canadiens. Ну, по крайней мере, детали bleu и rouge .

Монреаль Канадиенс Культовые красные домашние свитера с синей полосой. Изображение предоставлено NBC Sports.

Математически тройные цвета рассчитываются так же, как и соседние цвета, за исключением того, что они смещаются от дополнительного цвета. Здесь действуют те же правила для углов. На графиках ниже давайте снова используем 30° в качестве угла смещения.

 hue_complimentary = hue_primary + 180
hue1 = hue_complimentary + phi
hue2 = hue_complimentary - phi
насыщенность1 = насыщенность2 = насыщенность_основной
легкость1 = легкость2 = легкость_основной 

Вы видите, откуда «Монреаль Канадиенс» взяли свою цветовую схему?

Реальные примеры цветов триады

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

1 Итак, споты в цветовых схемах вы делали общие? Красный, белый и синий — невероятно популярная цветовая схема триады в североамериканском спорте. Это имеет смысл, учитывая цветовую схему американского флага. Однако не забывайте, что канадский флаг был синего цвета еще в 19 веке.60-е годы.

Tetrad Color Theory: создайте прямоугольник на цветовом круге

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

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

1. Начните с основного цвета.
2. Выберите один из соседних цветов с вашим основным цветом. Неважно, какой.
3. Вычислите дополнительный цвет из основного цвета.
4. Триадный цвет — это просто дополнительный цвет соседнего цвета, который вы выбрали на шаге 2.

 hue_complimentary = hue_primary + 180
hue_adjacent = hue_primary + phi
hue_triad = hue_adjacent + 180 = hue_complimentary + phi
насыщенность1 = насыщенность2 = насыщенность_основной
легкость1 = легкость2 = легкость_основной 

Хотя на графике ниже используется угол смещения 30°, я считаю, что цвета тетрады работают намного лучше с большим углом. Во многих наших реальных примерах используются углы от 45 до 60°.

Примеры четырехцветных цветов в реальном мире

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

Интересно, что есть одна североамериканская профессиональная спортивная команда, которая невероятно хорошо справляется с цветовой схемой тетрады. Есть предположения, что это за команда? Я дам вам подсказку. Это команда НБА.

Монохроматическое затенение

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

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

Коэффициент масштабирования должен быть выражен в процентах в десятичной форме. Другими словами, используйте 0,25, чтобы масштабировать цвета на 25%. Как и в случае с трехцветными схемами, масштабируйте в меру. От 25 до 60% — довольно безопасный диапазон.

 красный_свет = красный_основной * (1 + коэффициент масштабирования)
зеленый_свет = зеленый_основной * (1 + коэффициент_масштабирования)
синий_свет = синий_основной * (1 + масштабирующий_фактор)
red_dark = red_primary * (1 - коэффициент_масштабирования)
green_dark = green_primary * (1 - коэффициент_масштабирования)
blue_dark = blue_primary * (1 - коэффициент_масштабирования) 

Наша стратегия

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

1. Первичный цвет
2. Второстепенный цвет
3. Акцентный цвет, который редко используется для дополнения основных и вторичных цветов.
4. Цвет оповещения: высококонтрастный цвет, используемый для привлечения внимания к определенным элементам, таким как сообщения об ошибках, предупреждения, объявления о распродажах и т. д.
5. Заголовки, нижние колонтитулы и другие части веб-сайта отображаются серым цветом по мере необходимости.

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

Заключение

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