RGB, HSL, LCH и вот это вот всё — Разработка на vc.ru
RGB какой-то отстой.
25 просмотров
Модель RGB, мало чем отличающаяся от ASCII, адресов памяти и наличия 86 400 секунд в сутках, является одной из тех инструментов, которые немного упрощают программирование, до поры до времени.
Теоретически RGB — это группа цветовых пространств, которая позволяет указать дисплею, какое напряжение требуется каждому субпикселю. Однако на практике теперь у нас есть телефоны с дисплеями, которые позволяют отображать более 100% красного цвета, что является новым типом красного цвета, называемым суперкрасным. У нас есть другие дисплеи, в которых синего в два раза больше, чем красного или зелёного. И, вероятно, уже некоторое время ваши значения RGB не соответствуют напряжениям дисплея.
RGB сложно осмысливать рационально. Красный, зелёный и синий источники света ведут себя не так, как мы привыкли — вы можете видеть отдельные цвета вблизи, но по мере удаления они смешиваются вместе, и вы начинаете видеть только один цвет.
Наконец, RGB трудно настраивать. Если вы начнёте с чёрного, вы можете увеличить количество “red” (красного) в палитре цветов RGB, что сделает всё более красным. Всё идет нормально. Затем вы начинаете увеличивать “green” (зелёный), и вы получаете… жёлтый? Это не очень интуитивно понятное цветовое пространство для навигации. Есть и другие представления цветов, которые легче поддаются изменению.
Цвета на годы
У меня есть личное приложение, где мне необходимо показать график за несколько лет. Каждому году на графике требуется другой цвет, поэтому каждый новый год я захожу в код, нахожу новый красивый цвет для нового года и развертываю приложение. Сколько лет я буду этим заниматься, пока не найду алгоритм, с помощью которого можно это автоматизировать?
Мне необходимы некоторые цвета, которые:
а) произвольны при генерации кода;
б) красиво выглядят;
в) определяются исключительно целым числом года.
Нам требуется реализовать такую функцию:
func color(for year: Int) -> Color
RGB действительно может удовлетворить только первому из моих критериев — эта модель может создавать случайные цвета со случайными числами:
Color(red: .random(in: 0..<1), blue: .random(in: 0..<1), green: .random(in: 0..<1))
К сожалению, цвета, сгенерированные таким образом, выглядят очень плохо. Они часто получаются грязными и румяными, а создание более чем одного цвета не сопровождается каким-либо узором или структурой. Цвета повсюду.
Это структурная проблема с RGB. RGB фокусируется на том, как создается цвет, а не на том, как он воспринимается.
К счастью, решение этой проблемы хорошо задокументировано. Есть несколько сообщений в блогах и постах (предупреждение: JavaScript), в которых излагается подход. Идея такова: используя цветовое пространство, основанное на оттенках, такое как HSL, вы можете сохранять два параметра постоянными saturation и lightness (насыщенность и яркость) и изменять только оттенок, давая вам несколько цветов, которые живут в одном и том же “family” (семействе).
(Существуют тонкие различия между HSL, HSB, HSV и HWB, но чередование оттенков в основном одинаково во всех цветовых моделях, и любая из них будет хорошо работать с этой техникой.)
Например, использование значения 0.8 для saturation и lightness дает хорошие пастельные тона:
Color(hue: .random(in: 0..<360), saturation: 0.8, lightness: 0.8)
Вы можете играть с этой палитрой цветов; переместите ползунок “hue” (оттенок), чтобы увидеть множество цветов в этом семействе.
С другой стороны, значения 0.6 для saturation и 0.5 для lightness дают более насыщенные цвета:
Color(hue: .random(in: 0..<360), saturation: 0.6, lightness: 0.5)
Эта палитра цветов показывает примеры этих цветов.
Проницательные читатели заметят, что в то время как собственные API-интерфейсы Apple принимают число от 0 до 1, этот фальшивый инициализатор, который я сделал, ожидает оттенок от 0 до 360. Я нахожу это более наглядным, потому что это значение представляет собой некоторое количество градусов.
Это позволяет нам реализовать большую часть нашей функции color(for year: Int):
func color(for year: Int) -> Color { let spacing = … return Color(hue: (year * spacing) % 360, saturation: 0.8, lightness: 0.5) }
Интервал представляет собой количество градусов, которое необходимо пройти по кругу оттенков каждый раз, когда нам необходимо выбрать следующий цвет.
Какое оптимальное число выбрать здесь?
Вращение в пространстве оттенков
Если мы сделаем этот угол слишком близким к нулю, цвета будут располагаться слишком близко друг к другу на круге оттенков, что сделает их слишком похожими. Однако, если мы сделаем это слишком близко к значению 3600 (полный оборот), после изменения градусов на 360 они всё равно будут слишком похожи, за исключением того, что они будут идти назад по кругу оттенков.
На самом деле, любое вращение, которое равномерно делится на 3600, через некоторое время приведет к повторению. А у 360 много факторов!
Одно из решений состоит в том, чтобы разложить компоненты на 360 значений, разделенных на количество лет, которые у нас есть, и тогда цвета будут меняться каждый раз, когда наступает новый год. Это создает радугу, которая, хотя и выглядит красиво, не имеет случайного представления, к которому я стремлюсь.
Однако есть лучший способ сделать это, и ответ содержится в видео на YouTube, которое я смотрел более 10 лет назад. Замечательный Ви Харт (Vi Hart) опубликовал серию видеороликов (раз, два, три) о том, как растениям необходимо отрастить свои новые листья таким образом, чтобы они не были заблокированы верхними листьями, что позволяет им получать максимум солнечного света. Во втором видео из этой серии есть соответствующий бит.
Число градусов вокруг стебля, из которого растение решает вырастить свой следующий лист — это именно то число, которое мы ищем. Это некоторый поворот, на который мы получим неперекрывающиеся листья — я имею в виду цвета.
Поскольку любое рациональное число приведет к повторяющимся цветам или перекрывающимся листьям, она ищет иррациональное число. В идеале “самое” иррациональное число. Она находит его в ϕ, это примерно 1.618. Нам необходимо проходить 1/1.618 часть круга оттенков каждый раз, когда нам требуется новый цвет, и это даст нам необходимые цвета.
Если цвета вам не нравятся, вы можете дополнительно повернуть, добавив фазовый сдвиг в уравнение:
func color(for year: Int) -> Color { let spacing = 360/1.618 return Color(hue: 300 + (year * spacing) % 360, saturation: 0.8, lightness: 0.5) }
Эта функция соответствует нашим критериям, цвета, которые получаются из неё:
а) произвольны;
в) определяются исключительно годом.
Следующий шаг
Если ваша единственная цель — несколько простых цветов для прототипа или побочного проекта, то того, что я рассказал до сих пор, будет достаточно. Но если вы хотите использовать это в более серьёзных и масштабных приложениях, вы можете сделать ещё один шаг.
Цветовая модель HSL имеет несколько серьезных недостатков. Она, как и RGB, была разработана для простоты вычислений, а не для точности базовых цветов. В частности, при повороте значения оттенка (что мы и делаем с помощью этой техники) вы обнаружите, что некоторые оттенки окрашены намного светлее, чем другие, даже если saturation и lightness остаются постоянными. Эти цвета выглядят светлее, хотя технически они являются одной и той же “lightness”.
Цветовое пространство LCH (luminance, chroma, hue) решает эту проблему. Насколько я могу судить, это золотой стандарт цветов на дисплее. Это даёт вам единообразие восприятия, что позволяет вам поворачивать оттенок и получать цвета, которые даже больше похожи друг на друга, чем вы могли бы получить с помощью HSL.
Это также даёт некоторые преимущества, когда дело доходит до контраста при чтении текста.
На самом деле, если вы внимательно посмотрите на приведённые выше цвета (которые представляют собой цвета для 2015–2023 годов с использованием нашего алгоритма), этот зелёный лайм выглядит немного приглушенным по сравнению с его фиолетовым соседом.
Здесь вы можете поиграть с палитрой цветов LCH. Чтобы заставить LCH работать с UIColor, вы можете использовать эти четыре полезных принципа.
Использование LCH для создания моих цветов с помощью описанной выше техники вращения оттенков дало красивые цвета.
func color(for year: Int) -> Color { let spacing = 360/1.618 return Color(luminance: 0.7, chroma: 120, hue: 300 + (year * spacing) % 360) }
Этот браузер не поддерживает цвет LCH. Попробуйте Safari или мобильную версию Safari 15 или выше.
Все эти цвета имеют одинаковую lightness, и они отлично смотрятся для чего-то полностью процедурно сгенерированного. Они яркие, однородные и замечательные.
Модель, которую вы выбираете для жизни, создает ограничения, которые вы, возможно, не предполагали ограничивать. Любой цвет из любого из этих цветовых пространств может быть (более или менее) переведён в любое другое цветовое пространство с небольшой разницей. Поэтому цвета, которые мы получили в итоге, могут быть записаны в терминах красных, зеленых и синих значений (опять же, здесь махнув немного рукой). Но хотя RGB может представлять эти цвета, это не означает, что вы можете легко перемещаться по пространству таким образом, чтобы получить цвета, которые хорошо смотрятся вместе. Выбор правильного цветового пространства для начала делает проблему, по крайней мере, решаемой.
Поправимо, но до сих пор не решено. Эти произвольные красивые цвета могут быть сгенерированы с помощью процесса, стохастически открытого эволюцией, открытого учеными в 1830 году, и применённого на практике с использованием надёжного набора веб-стандартов, которые позволяют мне показать их вам в браузере.
В конце концов, стремление растений к солнечному свету стало ключом к созданию приятных цветов для моей маленькой диаграммы.
Оригинал статьи
Подписывайся на наши соцсети: Telegram / VKontakte
Вступай в открытый чат для iOS-разработчиков: t.me/swiftbook_chat
советы и красивые примеры — INMYROOM
В интерьерном дизайне color-палитра играет значимую роль. Удачно подобранные оттенки влияют на гармоничный облик пространства и вместе с тем воздействуют на человека, его настроение и даже на самочувствие. Поэтому подходить к выбору цветовой гаммы для любого помещения важно с умом. Выигрышное сочетание оттенков будет долгосрочной инвестицией в благоустройство жилья.
Подробнее о гармонии цвета сегодня — на примере кухонных интерьеров.
Ольга Забродина
автор
Что руководит цветом, или Как подбирать оттенки?
Среди дизайнеров, иллюстраторов, колористов и увлеченных наукой о цвете не сыскать человека, который бы не знал о круге Иттена.
Для справки: Иоханнес Иттен — швейцарский художник и преподаватель Баухауса — в начале XX века систематизировал принципы работы с цветом и разработал свой цветовой круг.
С тех самых пор круговой спектр из 12 тонов выручает многих специалистов. Этот инструмент демонстрирует базовые варианты оттеночных комбинаций и, словно шпаргалка, показывает беспроигрышные цветовые схемы.
Фото: twobdesign.ru
Комбинации по кругу Иттена и примеры в интерьере кухни
Зачастую тональность color-палитры для конкретного помещения задает стиль интерьера. Этот принцип во многом упрощает выбор основных оттенков, которые необходимы для оформления и декора. Однако без знаний о правильном цветовом соседстве не обойтись. Назовем универсальные схемы по кругу Иттена и покажем, как они выглядят в реальных проектах.
Градиентная, оттеночная или монохромная палитра
Смысл этой схемы в том, чтобы выбрать один сегмент цветового круга и выстроить гамму интерьера на его полутонах.
Чтобы монохромное пространство не казалось скучным, в него добавляют разные по фактуре материалы или акцентный декор.
Визуально оттеночный интерьер не выглядит перегруженным и разобщенным. В нем чувствуется единство всех деталей и тонов. В качестве примера — два дизайн-проекта.
Пример № 1
Кухня с молочным подтоном демонстрирует господство бежевого цвета. Динамику и глубину формирует характер поверхностей: глянец плитки, бархатистая матовость фасадов, выдержанный в том же цвете пол. Более проявленными в пространстве сделали лишь столешницу в кофейно-шоколадном оттенке и бытовую технику.
Дизайн: Марина Шляхова
Пример № 2
Дизайн: Юлия Сергеева
Во втором проекте в молочно-бежевый интерьер с обилием матовых и гладких поверхностей добавили пудрово-синие пигменты и золотистый глянец. За счет них кухонно-обеденная зона не кажется стерильной.
Комплементарная схема
Согласно кругу Иттена, она формируется из двух контрастных, диаметрально расположенных оттенков.
Лучше всего такая схема подходит для расстановки декоративных акцентов, но и для базового оформления ее тоже используют. Интерьер с ней всегда получается выразительным и эффектным.
Пример № 3
Комплементарное сочетание цветов выражено через контрасты в обивке обеденных стульев. Глубокий зеленый в тандеме с бордово-красным визуально делают помещение статуснее и ярче.
Дизайн: Александра Антонова
Пример № 4
В этой кухне встречаются противоположные небесно-голубой и древесно-горчичный, благодаря которым помещение напоминает о прибрежно-морских пейзажах, где равнинная почва и песчаный пляж соединяются с водной стихией на фоне бескрайнего неба.
Дизайн: Наталья Преображенская
Классическая триада
Как понятно по названию, такая color-схема состоит из трех главных оттенков. Если в круг Иттена поместить равносторонний треугольник, вершины его укажут на гармоничное сочетание тонов. Комбинация цветов получается достаточно сложной, но не вульгарной.
Пример № 5
Обеденная группа тут показывает, как яркое трио выражается через фрагменты декора. Доминирует здесь синий, дополняет его желтый (в виде пигментов на картине), а точечные акценты проявляет красный. Последний, кстати, уловим в градиентах стеклянной вазы и настенного панно. Даже когда в сервировке не будет фруктов или ягод в этом оттенке, триадная схема в этой зоне кухни сохранится.
Дизайн: YU DESIGN
Пример № 6
Эта кухня — наглядный пример классической триады в масштабе. Яркие цветовые «пятна» красного и синего в этом лофт-пространстве с обеденной группой стали эмоционально-колористическим всплеском на фоне серости и нейтралитета бетонно-кирпичной базы. Желтый же — в небольшой дозировке на текстиле и латунно-металлических каркасах — сыграл роль связующего компонента.
Дизайн: ToTaste Studio
Аналоговая триада
Данная схема строится на трех соседних сегментах в круге Иттена. Интерьерная палитра получается сбалансированной, так как один цвет в ней плавно переходит в другой.
Пример № 7
В этом проекте яркая и сочная обеденно-кухонная зона выполнена в аналоговой палитре.
По снимку хорошо заметно, как градиентная растяжка одного цвета в буквальном смысле перетекает в другой. Оранжевый, мандариново-красный, красный, фиолетово-алый, фиолетовый и, наконец, синий — границы между этими цветами не четкие, а размытые; интерьер — гармонично насыщенный.
Дизайн: Рустем Уразметов
Контрастная триада
Эта color-схема построена на базе комплементарной палитры с добавлением третьего тона. Если отталкиваться от круга Иттена, то продемонстрирует схему равнобедренный треугольник, чьи вершины указывают на подходящие друг другу тона.
Пример № 8
Кухня из первого проекта на самом деле отсылает к комплементарному сочетанию. Рассказывая о нем, для примера мы показывали насыщенный красно-зеленый мебельный дуэт. Здесь красный и зеленый — приглушенные, к ним добавлен неяркий пыльно-синий. Контрасты между цветами остались, только воспринимаются они не так вызывающе, как в остальных триадных схемах.
Дизайн: In-Design-Studio
Пример № 9
Второй проект оформлен в контрастных полутонах. Розовый здесь использовали в оформлении стен, серо-зеленый — на фасадах пристенного шкафа у выхода из комнаты, золотисто-древесный — в отделке двери, паркета, кухонного гарнитура и обеденного стола. Звучит такое трио не ярко, гармонично и благородно.
Дизайн: Анна Доброковская
Ахроматическая палитра
Внимание! Ахроматическая палитра выделяется особняком. Ахроматы — черный, серый и белый — в круг Иттена не включены. Эти оттенки хорошо комбинируются со всеми остальными и могут использоваться в интерьере с любой цветовой гаммой в качестве акцента или базы. Кроме того, в дружественный союз этих нейтралов некоторые дизайнеры не вмешиваются. Именно тогда получаются классически сдержанные и гендерно-нейтральные интерьеры.
Пример № 10
Дизайн: Interer Architects
Простые правила работы с цветом (на примере указанных интерьеров и палитр)
Нейтральные бежевые оттенки и ахроматы сочетаются друг с другом и могут быть базой для всех остальных цветов.
Все синие и зеленые тона гармонируют между собой.
Желтые оттенки хорошо смотрятся в качестве акцентных декоративных нюансов.
Оттенки одного цвета на разных фактурах и поверхностях всегда делают интерьерную гамму более благородной и мягкой.
Фиолетовый цвет — доминантный. Лучше его использовать, как в аналоговой палитре, по принципу градиентной растяжки.
Если вас пугает насыщенность и контрастность оттенков по любой триаде, можно использовать не яркие и чистые цвета, а приглушенные. Например, вместо ярко-синего — пыльно-синий или цвет грозового неба, вместо алого — розовый, вместо солнечно-желтого — золотисто-древесный, вместо травянисто-зеленого — цвет пыльной листвы.
Но самое главное — прислушивайтесь к своей интуиции. Зачастую она подсказывает, среди каких оттенков вам будет комфортно и легко находиться.
Кто-то любит однотонные интерьеры, кому-то близка ахроматическая классика, а другие не могут жить без цвета. Чтобы обустроить любое пространство по принципам колористической гармонии, для всех перечисленных вариантов нужно знание цветового баланса. А будет ли оно использоваться для декора или же для основного дизайна — это уже вопрос вкуса и индивидуальных потребностей.
Фото на обложке: дизайн Мария Михеева (Классическая триада)
Какой цвет символизирует красоту?
Розовый часто считается женским цветом, поэтому он широко используется в логотипах, связанных с красотой, модой и т. д.
Какой цвет символизирует красоту? Среди различных оттенков розовый часто считается женским цветом, популярным в логотипах моды и красоты. Другие цвета включают лаванду, которая считается цветом одиночества, восхищения, изящества, утонченности и элегантности.
Помимо розового, желтый также считается самым счастливым цветом в мире. Возможно, поэтому его часто можно встретить в рекламе и логотипах различных косметических и модных брендов.
Красный
Во многих культурах красный цвет означает как опасность, так и красоту. Способность цвета привлекать внимание является одним из его наиболее привлекательных свойств. В то время как многие ассоциируют его с кровью и страстью, красный также может быть привлекательным символом любви. В частности, красные свадебные платья часто ассоциируются с удачей и плодородием. Вот несколько причин, почему красный — хороший цвет для невест. Вот некоторые из наиболее интересных применений красного цвета.
Красный цвет в природе имеет как положительное, так и отрицательное значение. Наши доисторические предки считали красный цвет цветом огня, крови, энергии и первичной жизненной силы. Он также использовался для обозначения магии и религии. В Древней Греции красный цвет символизировал сверхчеловеческий героизм, а в христианской культуре означал распятие.
У некоторых красный цвет ассоциируется с кровью, революцией, радикализмом и смертной казнью.
Розовый
Хотя розовый всегда ассоциировался с девушками, сейчас этот цвет набирает популярность среди женщин. Он часто используется в бизнесе, ориентированном на женщин, в то время как темно-розовый более мощный и утонченный. Розовый также ассоциируется с чувствами любви, сострадания, надежды и энтузиазма. Многие благотворительные организации используют розовый цвет в своих маркетинговых кампаниях, который излучает оптимизм и нежность. Розовая лента стала глобальным символом осведомленности о раке молочной железы.
Женская демографическая группа является основным целевым рынком для индустрии красоты, и розовый цвет является заметным, привлекающим внимание выбором. Многие компании и продукты ориентированы на женщин, и розовый цвет стал основным элементом многих стилей упаковки. Некоторые из крупнейших имен в сфере красоты сделали розовый частью своих брендов, в том числе Kylie Cosmetics.
Его упаковка мгновенно узнаваема и задает тон всей остальной отрасли. Но олицетворяет ли розовый красоту?
Фиолетовый
Хотя некоторые люди ассоциируют фиолетовый с духовностью, этот цвет не обязательно ассоциируется со сверхъестественным. Древние чаще ассоциировали цвет с королевской властью. Они считали императоров и королей потомками богов. Фиолетовый — один из немногих цветов, встречающихся в природе, и он часто ассоциируется с роскошью и благородством. Его редкость — одна из причин, по которой он стал олицетворять так много разных вещей — от благородства до красоты.
Пурпурный цвет имеет долгую и выдающуюся историю, давнюю связь с королевской властью, независимостью и изяществом. На протяжении всей истории самые влиятельные члены королевской семьи изображались в пурпурных одеждах. Фиолетовый — мощный цвет, который вдохновляет на творчество и придает ощущение тайны и волшебства. Символически цвет может представлять красоту и силу женщины. Он также ассоциируется с богатством, роскошью и благородством.
Зеленый
Зеленый цвет вызывает любовь и обожание, не требуя ничего взамен. Несмотря на сложные значения цвета, у большинства людей он ассоциируется с красотой и природой. Некоторые говорят, что зеленый олицетворяет свежесть, отдых и естественную красоту. Другие люди ассоциируют зеленый цвет с амбициями, жадностью, ревностью и болезнями. Кроме того, желто-зеленый – символ трусости и раздора. Оливковый и морской зеленый считаются целебными цветами. Несмотря на множество ассоциаций, зеленый часто ассоциируется с любовью, красотой и жизнью.
Чтобы узнать больше о зеленой косметике, внимательно прочитайте этикетку. Настоящие бренды «зеленой красоты» используют только натуральные и органические ингредиенты и избегают сомнительных ингредиентов. Когда ученые не уверены в безопасности ингредиента, они ошибаются в сторону осторожности. Для вашей кожи и вашего кошелька лучше выбрать «зеленый» косметический бренд. Это также лучше для окружающей среды! И если вы хотите попробовать новые косметические продукты, ищите бренды, в которых используются натуральные и органические ингредиенты.
Оранжевый
Оранжевый — яркий цвет с мощной энергией и сильной привлекательностью. Он сочетает в себе теплоту красного с оптимизмом желтого. В результате он поощряет социальное взаимодействие, но в то же время не осуждает и не осуждает. Он также успокаивает интровертов, так как ассоциируется с молодостью и свежестью. Разные оттенки оранжевого несут разное значение. Бледно-персиковые апельсины сладкие, а интенсивные, яркие апельсины передают жизненную силу и энергию.
В Библии оранжевый цвет имеет много значений. Темно-оранжевый ассоциируется с опасностью, красно-оранжевый — со страстью, а золотисто-оранжевый — с богатством и престижем. Однако светло-оранжевый обычно ассоциируется с дружескими чувствами и вызывает теплые мысли. Это также часто ассоциируется с осенней листвой и сценами сбора урожая. В цветотерапии оранжевый вызывает чувство любви и тепла и часто используется для обозначения переходных цветов. Это также цвет Хэллоуина.
Черный
Несмотря на темный, внушительный цвет, черный имеет несколько положительных значений.
В китайской культуре он символизирует воду, а в Японии — опыт, мастерство и престиж. До того, как был открыт свет, люди думали, что тьма представляет собой всю вселенную. В некоторых культурах черный представляет Дьявола, князя тьмы. Несмотря на темный цвет, черный — элегантный выбор для модной одежды. Он также может передать гордость человека за внешний вид и высокую ценность.
Исторически черный цвет символизировал подземный мир, невидимое и зло. Черный цвет также ассоциируется с трауром и часто используется во время Пасхи. В древних культурах черный цвет ассоциировался со злом, и его носили жрецы. В Египте и Риме он также был цветом войны. Люди часто носили черный цвет как щит от злых духов. В древние времена люди верили, что черные кошки обладают божественной силой, но эти же убеждения привели к мифам о том, что этим животным не повезло.
Индиго
Если вы когда-нибудь задумывались, как цвет индиго символизирует красоту, читайте дальше. Этот темно-синий цвет очень наблюдателен, имеет обостренное чувство справедливости и глубоко сострадателен.
Люди с энергией индиго не терпят хаоса и недоброжелательности. Их предпочтение упорядоченным вещам делает их надежными и заслуживающими доверия. Они также склонны к духовности. Этот цвет также представляет справедливость, обучение и театр.
Оттенок индиго склоняется к синему и более глубокому пурпурно-красному. Это спектральный цвет и, как таковой, в основном имеет холодный оттенок, хотя он также может относиться к более теплой стороне спектра. Однако каждый цвет имеет различные оттенки и оттенки. Те, кто носит индиго, часто обладают особыми духовными способностями и очень эмпатичны. Если вас когда-либо привлекал этот оттенок, вы на правильном пути!
Фиолетовый
Фиолетовый цвет является символом красоты и сострадания. Однако он не лишен недостатков. Фиалка несет в себе качества нарциссизма и гиперчувствительности. Вот почему не рекомендуется использовать фиолетовый как преобладающий цвет на белом фоне. Однако фон фиолетового цвета может вызвать чувство уязвимости и печали.
В этой статье пойдет речь о том, как фиолетовые цвета можно использовать в дизайне.
Фиалки впервые появились в мифологии, когда Гавриил сказал Деве Марии, что родится Мессия. Габриэль — ангел общения, а это значит, что он наблюдает за человечеством и общается с ним. Фиалка является символом связи и защиты, и многие секты христианства связывают этот цвет со способностью Христа быть посредником. Фиалки часто используются для изображения красоты, а фиолетовый цвет имеет глубокое значение.
Лаванда
Цвет лаванды ассоциируется с весенним ростом и обновлением. Его древнее использование в качестве пасхального символа предполагает возрождение души и возвращение оптимизма. Этот цвет представляет женские аспекты нашей психики и пробуждает чувство творчества и воображения. Однако этот цвет также может вызывать чувство беспокойства или нетерпения у его владельца. Эта статья объяснит значение лаванды в красоте и женственности.
Что касается цвета, то лавандовый — популярный выбор.
Он показывает женскую силу и независимость и нейтрален в сочетании с более яркими оттенками. Цвет имеет много значений, и сочетание разных оттенков может вызвать множество настроений и чувств. Он также демонстрирует атмосферу элегантности, изысканности и мудрости. Это цвет, который подходит для любого времени года и является прекрасным дополнением к вашему домашнему декору.
Желтый
На Западе желтый цвет любим не всеми. Опрос 2000 года показал, что только шесть процентов респондентов считают его своим любимым цветом. Напротив, синий, зеленый и красный считались самыми популярными цветами, а черный — наименее любимым. В Азии желтый часто ассоциируется с оптимизмом, двуличием и ревностью. Однако в других частях мира цвет стал ассоциироваться с красотой и добродетелью. Помимо ассоциации с красотой, желтый цвет имеет много других важных значений.
Цвета вызывают у людей эмоции, в том числе радость, счастье и оптимизм. Хотя это часто ассоциируется с красотой, его часто считают нестабильным.
Мужчины могут счесть желтый цвет ребячеством, и слишком много его может быть ошеломляющим. Желтый также ассоциируется с опасностью. Оранжевый, сочетание красного и желтого, является отличным вторичным цветом. Это означает энергию, волнение и поддержку. Это также связано со стимулированием и решимостью. Однако его не следует использовать в маркетинговых кампаниях, направленных на состоятельных мужчин.
Потому что цвета красивые. Делаем привлекательным и доступным… | Шикси | _carbondesign
Создание привлекательной и доступной палитры для брендов, продуктов и впечатлений.
Выбранные образцы цветов и доска настроения из нового языка дизайна IBM. За последние несколько лет команды IBM Carbon Design System и Brand Experience объединились для создания универсальной цветовой палитры. Вторая итерация, которая должна быть запущена вместе с октябрьским второстепенным выпуском Carbon, отвечает всем требованиям доступности дизайна продукта с самыми тонкими изменениями в палитре.
Этот циклический GIF-файл показывает, насколько незаметны изменения в последней версии цветовой палитры IBM.
Сравнение цветовых палитр IBM V1 и V2Группа под руководством Садека Базараа впервые собрала палитру, которая была выпущена с новым языком дизайна IBM. Хотя палитра была создана с учетом доступности, потенциальные улучшения появились, когда мы протестировали ее в дизайне продукта. Некоторые соотношения между семействами цветов не соответствовали одной сотой доле, и было ограниченное количество доступных комбинаций цвета текста и фона.
Вот как мы настроили палитру для удобства использования продукта, и немного истории, дорогой нашему сердцу.
В таких крупных организациях, как IBM, бренд-группы уже давно отвечают за создание и поддержку цветовых палитр. Поскольку все больше и больше людей знакомятся с брендом через программное обеспечение и веб-сайты, ситуация начала меняться. Экранные продукты стали средой, в которой цвета действительно подвергаются стресс-тестированию, наряду со шрифтами, сетками и любыми другими основополагающими элементами.
Даже небольшая разница в контрасте может привести к тому, что интерфейс не пройдёт тест на доступность. Клиенты IBM, такие как правительства и образовательные учреждения, зависят от IBM в соблюдении стандартов WCAG, поэтому мы уделяем большое внимание доступности в нашей цветовой палитре. Это помогает нам поддерживать доверие наших клиентов и пользователей и снижать риск судебных исков, избегая нарушений.
Давайте посмотрим, как выглядит цветовая палитра системы функционального дизайна.
Серые с более светлыми светлыми, более темными темными и меньшим количеством средних тоновНейтральные оттенки серого необходимы в пользовательском интерфейсе. Они обеспечивают структуру, обозначают границы и устанавливают иерархию.
Когда мы разрабатываем интерфейсы, мы часто прибегаем к крайностям: самым темным и самым светлым оттенкам серого. Максимальный контраст является ключом к удобочитаемости и концентрации внимания пользователя. Включив достаточное количество оттенков серого на обоих концах спектра, мы предотвратим грязные средние тона с низкой контрастностью.
Это особенно важно в корпоративных программных продуктах, которые часто могут представлять собой беспорядок из контейнеров внутри контейнеров, панелей, летящих над панелями, и бесконечных строк и столбцов таблиц данных с полосами зебры!
На приведенном ниже графике показано, как контрастность между оттенками серого падает примерно на кривую нормального распределения. По мере того, как колоколообразная кривая становится тоньше и выше, светло-серые оттенки становятся светлее, а темно-серые — темнее.
Соотношения контрастности между серыми падают на слегка смещенную кривую нормального распределения. Скорректированный ряд показывает более светлые светло-серые и более темные темно-серые.Восприятие симметрии темной и светлой темы
Обратите внимание, кривая нормального распределения не является идеально симметричной.
Правая сторона круче и заканчивается выше, что говорит о том, что шаги между темно-серыми больше, чем между светло-серыми. Это связано с тем, что наши глаза лучше различают более светлые оттенки, чем более темные. Чтобы сохранить воспринимаемую симметрию темной и светлой темы , коэффициент контрастности между темно-серыми оттенками должен быть немного выше.
Скорректированные шаги все еще далеки от гладкости. До сих пор мы не нашли способ программно генерировать цвета путем ввода пользовательской кривой коэффициента контрастности. Я люблю ColorBox, но я мечтаю о мире, в котором мне больше не нужно вручную настраивать асимметрию между темным и светлым серым цветом. ( Подмигивание , подмигивание . Кто-нибудь из талантливых программистов хочет создать небольшой веб-инструмент?)
Количество доступных цветов текста на фоне темы
Контраст — важный визуальный сигнал для передачи иерархии между текстом и создания различий между заголовками, заголовки, метки, абзацы и подписи.
Принимая во внимание, что текст в пользовательских интерфейсах должен быть доступным, цветовая палитра должна предлагать достаточно доступных цветов для создания текстовой иерархии. В случае с Carbon «достаточно» означает пять оттенков, что составляет половину ряда.
Например, на фоне серого 10 все цвета 60–100 могут использоваться для текста с доступным коэффициентом контрастности ≥4,5:1. Как правило, мы не рекомендуем использовать чистый черный или чистый белый цвет для текста, потому что слишком высокая контрастность ухудшает читабельность.
До настройки палитры у нас было всего четыре оттенка на фоне Grey 90. Это ограничение вынудило нас использовать курсив для вспомогательного текста в компоненте ввода текста. Мы зарезервировали курсив для выделения и терминов глоссария, поэтому его использование для вспомогательного текста нарушило замысел системы.
После настройки палитры вспомогательному тексту может быть присвоен серый цвет 60, тексту метки — серый 80, а вводному тексту — серый 100.
Если вам интересны дополнительные подробности об этой работе, ознакомьтесь с подробной документацией на GitHub. .
Средние тона, как правило, следует использовать с осторожностью. Когда они используются, они должны предлагать глоток свежего воздуха. Это основные моменты, призывы к действию. Это акцентные цвета и моменты брендинга в цифровом опыте. Они должны привлекать внимание и обеспечивать характер.
Пример экранирования продукта с использованием Carbon.Carbon использует средние синие тона для основных кнопок, полосы выделения на выбранных вкладках и индикаторов выполнения. Это использование требует, чтобы цвет был доступным с коэффициентом контрастности не менее 3: 1 по отношению к фону в соответствии со стандартом WCGA 2.1 для значимых нетекстовых элементов.
Мы используем средние тона для цветных текстовых элементов, таких как ссылки и предупреждающие сообщения.
Это использование требует, чтобы цвет был 4,5: 1 доступным по отношению к фону. Средние тона должны быть насыщенными, чтобы выделяться на фоне серого текста.
Учетная запись для исключений при переключении тем
Потребность в темных и светлых темах стала более востребованной и стала основной при создании цветовых систем. Для Carbon усложнение связано с темными темами. Реализация темной темы нашего компонента кнопки — это не простая инверсия цвета фона и текста. Когда вы просто меняете цвета и размещаете темный текст на кнопках на темном фоне, читабельность может ухудшиться, особенно со средними тонами. Сохранение меток кнопок белыми поддерживает ожидание пользователя от яркого, резкого призыва к действию. Это сжимает наши средние тона. Если фон кнопки немного ярче, белая метка не сработает 4,5:1. Чем темнее, то кнопка не выделяется на фоне 3:1.
Переключение на темную тему редко бывает таким простым, как изменение цвета фона и текста. Чтобы решить эту проблему, мы немного расширили самые темные и самые светлые диапазоны.
Это дало средним тонам немного больше пространства для маневра, оставаясь доступными на всех фронтах. Опасность этого заключается в том, что крайние оттенки серого могут не воспроизводиться хорошо на всех мониторах, проекторах и принтерах. Нам нужна объединяющая палитра, и мы хотим предложить самые безопасные цвета для большинства случаев использования.
Когда все эти корректировки соберутся вместе, вы получите безотказную структуру для семейства серых. Интервалы коэффициента контрастности между средними тонами и крайними концами спектра (которые являются фоном) должны удовлетворять следующим требованиям:
- Контрастность между серыми 60 и 90 составляет минимум 3:1.
- Контрастность между оттенками серого 60 и 10 составляет не менее 4,5:1.
- Контрастность между 50 и 90 составляет минимум 4,5:1.
- Контраст между 50 и 10 должен быть минимум 3:1.
После значительных улучшений оттенков серого мы применили один и тот же спектр яркости ко всем другим цветовым семействам.
Все семейства цветов (ряды) подчиняются спектру яркости, заданному нейтральными оттенками серого. Обязательно конвертируйте в оттенки серого в Photoshop, который, по нашему опыту, является наиболее точным в этом преобразовании.Как насчет визуализации данных?
Визуализация данных является окончательным стресс-тестом цветовой палитры, поскольку палитра должна обеспечивать множество дифференцирующих цветов, которые подходят для различных режимов дальтонизма. Некоторые системы выбирают отдельную или расширенную палитру. Это огромная тема сама по себе, поэтому я приберегу ее для другого поста.
Наша работа над рестайлингом Carbon Charts все еще продолжается, так что следите за обновлениями!
Все, что вам нужно, и ничего лишнего
Слишком большое количество цветов может навредить пользовательскому опыту, а переутомленный дизайнер продукта, столкнувшийся со слишком большим количеством вариантов, может совершить ошибку. Яркий, конфликтующий выбор цветов может создать путаницу и отвлечь пользователей от работы. Плохой выбор цвета может даже создать сильное остаточное изображение в сочетании с длительным взаимодействием с экраном.
IBM нанимает много молодых специалистов, которые ценят руководство и принимают ограничения. Есть еще много устаревших продуктов с плохим удобством использования, и мы постоянно добавляем приобретения, которые не разделяют наш язык дизайна.
Отдельные дизайнеры разрабатывают не только интерфейсы. Они влияют на дорожные карты продуктов, реагируют на запросы клиентов и ежедневно работают напрямую с руководством. Имея большие возможности сосредоточиться, легко упустить нюансы использования цвета и совершить ошибку.
С точки зрения системы дизайна, предложение меньшего количества вариантов цвета препятствует неправильному использованию и обеспечивает гармонию между продуктами.
Ограничение — не единственная причина, по которой мы сократили палитру с радужного спектра до нынешних семи оттенков. Решение было принято в соответствии с философией бренда IBM, и здесь мы немного углубимся в историю работы, которая привела нас к оригинальной палитре.
IBM существует уже более века, и цвета, связанные с этим брендом, постоянно меняются. Вы можете легко заметить меняющиеся технологии и дизайнерские замыслы, которые формируют каждую из этих цветовых палитр.
Давайте рассмотрим намерения, лежащие в основе сегодняшней палитры IBM Design Language, и то, как мы решили их выразить.
Цветовые палитры IBM за годы слева направо: 1960, 2008, 2015, 2016, 2018, 2019.Будь незаменимым
Мы так любим машины IBM 1960-х годов. В прошлом смелые основные цвета покрывали аппаратное обеспечение IBM и определяли будущее бизнеса в эпоху, когда вычислительные возможности только начинали раскрываться.
Позже, в попытке оживить дизайн в IBM, цветовые палитры снова и снова расширялись, движимые основной темой инклюзивности, омоложения и прогресса. Сегодня палитра резко сужена, чтобы сосредоточиться на передаче точки зрения, которую представляет IBM:
Надо исходить из того, что все продукты будут физически связаны друг с другом, поэтому цвет и его применение должны рассматривать нашу задачу в комплексе.
—IBM ID, Color Applications, Introduction, 1962
Быть существенным означает, что палитра преднамеренно сведена к минимуму. Всего имеется 104 образца, которые разбиты на 10 цветовых семейств, каждое из которых содержит 10 оттенков: черный и белый, один оттенок желтого и один оттенок оранжевого. Если исключить оттенки серого, в этой палитре фактически всего 7 оттенков.
Использование меньшего количества оттенков делает палитру более удобной. Он обеспечивает направление и ясную точку зрения, которая распространяется на огромную компанию, где дизайнеры по-прежнему являются дефицитным ресурсом.
Синий в основе
Вся палитра остается синей в основе , чтобы отдать дань историческому прозвищу IBM «Большой синий». Таким образом, синий был выбран первым цветом.
Семейство синих цветов 2015 года немного смещается в сторону фиолетового в более светлой части и в сторону бирюзовой в более темной части. В 2018–209 гг., синий цвет обновляется, становится более насыщенным, чистым и ярким.Семейство синих цветов 2015 года немного смещается в сторону фиолетового в более светлом конце и в сторону бирюзового в более темном. В 2018–2019 годах синий цвет обновляется и становится более насыщенным, чистым и ярким. Это семейство блюза потенциально яркое до отказа. Для некоторых новая палитра вызывает неприятные ощущения, особенно при длительном просмотре. Было похоже, что попытка освежить синеву была слишком восторженной.
При корректировке синего цвета для продукции 2019 года, мы знали, что нам нужно немного намотать его.
Несмотря на то, что палитра предназначена для использования в цифровом формате в качестве основного варианта использования (палитра Pantone подходит для использования в печати), цвета взяты из окружающего нас мира, как естественные, так и машинные.
Легкая гармония и масштаб
После того, как синий был выбран, он стал центральной осью для всех остальных оттенков. Оттенки, наиболее далекие от синего в этой палитре, — это красный и зеленый. Они равноудалены от блюза в каждую сторону. Любой цвет за пределами этого диапазона был исключен из-за дисгармонии, которую они создавали. В результате получается набор оттенков, тесно связанных с синим оттенком.
Оттенок синего был выбран первым. Все остальные оттенки находятся в пределах осей для красного и зеленого.С небольшим количеством синего в каждом оттенке и меньшим количеством оттенков в палитре трудно скомпоновать неправильные цвета и легче оставаться на бренде. Гармонию создавать интересно, а руководство по использованию палитры можно значительно упростить.
Влияние новой палитры очевидно. Практически каждое сочетание цветов выглядит свежо и современно. Он сразу же получил фан-базу на канале иллюстраций в Slack.
Просто просмотрите страницу галереи IBM Design, или эти снимки сообщества Dribbble, или эти великолепные значки приложений, разработанные Питером Гарвином.
Функциональность и доступность
На этом этапе мы возвращаемся к совместной работе между командами, занимающимися дизайн-системой и языками дизайна. Это сотрудничество стало возможным благодаря культуре IBM, основанной на взаимном уважении опыта каждого дизайнера. В конце концов, цветовая палитра, созданная с функциями и рекомендациями для обеспечения доступности, лучше отражает философию бренда.
В последнем выпуске мы наконец-то получили надежную и стабильную палитру, которая поддерживает взаимодействие с брендом на всех фронтах.
Это конец истории создания цветовой палитры. Я так многому научился в этой работе, и я надеюсь, что вы тоже узнали из этой статьи.