Цветовая палитра как составляющая дизайна фирменного стиля
Создание дизайна фирменного стиля является важным этапом разработки бренда и состоит из нескольких этапов, среди которых неотъемлемым является определение единой фирменной цветовой палитры. Набор фирменных цветов — это одна из констант фирменного стиля, которая закрепится за брендом на годы вперед, создаст и обеспечит единство его восприятия на всех рекламных, информационных и других носителях, будет работать на его узнаваемость.
На подсознательном уровне цвет вызывает у человека определенные ассоциации и эмоции, которые влияют на формирование образа и принятие окончательного решения в вопросе выбора той или иной марки. Поэтому к подбору фирменной цветовой палитры стоит относиться очень внимательно и серьезно: продуманное и гармоничное сочетание цветов создаст нужный эмоциональный фон и поможет правильному восприятию образа бренда.
Фирменная цветовая палитра – фиксированный набор цветов, который используется на всех элементах фирменного стиля. Работа по подбору фирменных цветов осуществляется дизайнерами с учетом нескольких важных факторов, в том числе позиционирования и ценностей бренда, общей концепции дизайна фирменного стиля, принципов и законов сочетания цветов. В результате должен сложиться гармоничный, сбалансированный, передающий нужное настроение бренда набор цветов.
Разработка фирменного стиля бренда предполагает три условных подхода при подборе цветовой палитры:
1) монотонная – гамма цветов, варьирующаяся в рамках одного цвета. При выборе этой гаммы используются оттенки одного основного цвета;
2) контрастная – гамма радикально противоположных цветов-антиподов. Такая гамма часто используется в маркетинговых целях как наиболее броская и запоминающаяся. Время от времени можно заметить, как в рамках ребрендинга дизайнеры останавливаются именно на этом цветовом решении, чтобы максимально привлечь внимание целевой аудитории;
3) умеренная – гамма, предполагающая использование умеренно-контрастных цветов.
Фирменную цветовую палитру можно считать гармоничной при соблюдении следующих условий:
- цвет графической композиции и цвет фона обеспечивают четкое и удобное восприятие;
- общее цветовое решение дизайна фирменного стиля способствует правильному эмоциональному выражению и раскрытию содержания бренда;
- цветовое решение находится в единстве с общим окружением бренда и отвечает чувству эстетического удовлетворения.
Исключительные авторские права принадлежат креативному агентству «Логодизайнер». Перепечатка и копирование материалов сайта разрешены в случае установки прямой ссылки на www.logodesigner.ru. Любые другие заимствования являются противозаконными.
Восемь правил о цветовых палитрах, которые должен знать каждый
Взаимодействие человека и компьютера в значительной степени основано на графических элементах пользовательского интерфейса, и цвет играет в этом важную роль. Как однажды сказал художник Пьер Боннар:
Цвет не добавляет приятного качества в дизайн – он его усиливает.
При разработке нового продукта часто бывает сложно определить цветовую схему из-за бесконечного количества возможных комбинаций цветов. В этой статье мы рассмотрим восемь основных правил, которые помогут вам выбрать правильную цветовую палитру.
1. Ограничьте количество цветовПрименение цвета к дизайн проекту имеет много общего с балансом. Чем больше цветов вы используете, тем труднее достичь этого баланса. Вы добьетесь лучших результатов, если будете придерживаться максимум трех основных цветов в вашей цветовой гамме. Согласно исследованию Университета Торонто о том, как люди использовали Adobe Color CC, большинство людей заявили, что предпочитают простые цветовые комбинации, которые опираются только на два или три цвета.
Если вам нужны дополнительные цвета, кроме тех, которые вы задали в своей палитре, используйте оттенки и тона.
Итак, как вы выберете два или три цвета? Цветовой круг может помочь.
Круг с 12 цветами является важным инструментом для создания цветовых схемСуществует ряд предопределенных стандартов цветовой схемы, которые упрощают создание новых схем, особенно для новичков:
- Монохроматическая. Монохроматические схемы являются простейшими для создания, поскольку все они взяты из одного цвета, но включают изменения в насыщенности, оттенках и тонах. Монохроматические цвета хорошо сочетаются, создавая успокаивающий эффект.
- Аналоговая. Аналоговые цветовые схемы создаются из смежных цветов. Один цвет используется как доминирующий, в то время как другие используются для обогащения схемы. Хотя это относительно легко, трюк заключается в том, чтобы решить резонанс используемых цветов, поскольку вся схема будет преувеличена им. Например, Clear – приложение для составления и организации списков дел, использует яркие аналоговые цвета для визуального определения приоритетов вашего текущего набора задач. В то время как, приложение для медитации Calm, использует синие и зеленые аналоговые цвета, чтобы помочь пользователям чувствовать себя спокойными и умиротворенными.
- Дополнительная. В своей основе такой схемы лежат только два цвета, которые сильно контрастируют. Эта схема используется для привлечения внимания пользователя. При использовании дополнительной схемы важно выбрать доминирующий цвет, а дополнительный цвет использовать для акцентов.
- Пользовательская. Создание пользовательской цветовой схемы не так сложно, как многие думают. Существует простой трюк, который можно использовать для создания великолепной цветовой палитры: просто добавьте яркий цвет для акцента в нейтральную палитру (например, традиционную монохроматическую схему). Полученная схема будет очень визуально яркой.
Лучшие цветовые комбинации можно встретить в природе. Почему? Потому что эти схемы кажутся естественными для глаз. Чтобы найти вдохновение, нам нужно всего лишь осмотреться вокруг. Если вы видите особенно красивый или яркий цвет в повседневной жизни, попробуйте создать схему вокруг него. Просто сделайте снимок красивого момента и создайте на его основе свою цветовую схему.
Это вечное правило декорирования, которое может помочь вам легко составить цветовую схему. Пропорции 60% + 30% + 10% предназначены для обеспечения баланса цветов, используемых в любом пространстве.
Эта концепция невероятно проста в использовании: 60% – ваш доминирующий оттенок, 30% – вторичный цвет, а 10% – цвет акцента. Идея состоит в том, что вторичный цвет поддерживает основной цвет, но они достаточно отличаются, чтобы разделять их. Ваши 10% – цвет акцента. Это может быть цвет для призыва к действию или другого элемента, который вы хотите выделить.
60% – ваш доминирующий оттенок, 30% – вторичный цвет и 10% – цвет для акцента.
Игра с цветом – это весело. Именно поэтому выбор цветовой схемы – одна из первых вещей, которые мы делаем в новых проектах. Это, действительно, заманчиво сперва подобрать цветовую схему, но я рекомендую вместо этого заставить себя сначала проектировать в оттенках серого. Создайте прототип своего приложения в градациях серого и используйте его в качестве основы. Проектирование в оттенках серого перед добавлением цвета заставляет вас сосредоточиться на расположении элементов.
Добавьте цвет в самом конце, и даже тогда, только с определенной целью.
Добавление одного цвета в макет с оттенками серого привлекает взгляд просто и эффективно.5. Избегайте использования черного цветаВ реальной жизни чистый черный почти никогда не встречается. Все “черные” объекты вокруг нас имеют некоторое количество света, отражающегося от них, а это значит, что они не совсем черные, они темно-серые. Дороги не черные. Тени не черные.
Цвет этой собаки темно-серый, а не черный.Когда вы помещаете чистый черный цвет рядом с набором тщательно подобранных цветов, черный все пересилит. Он выделяется, потому что это не естественно. В большинстве приложений, которые мы ежедневно используем, есть черные цвета, которые на самом деле не черные, но темные серые. Например, самый темный цвет на верхней панели Asos не # 000000, это # 242424. Поэтому не забудьте всегда добавить немного насыщенности в свой цвет.
Цвет – инструмент, который может помочь направить взгляд. Чем больше вы хотите что-то выделить, тем больше вы должны полагаться на контрастные цвета. Как правило, высокий контраст – лучший выбор для важного контента или ключевых элементов. Если вы хотите, чтобы пользователи увидели или щелкнули что-нибудь, сделайте это выделяющимся!
Контрастность заставляет выделенную область отличаться от остальной части экрана.
Чем больше вы хотите что-то выделить, тем больше вы должны полагаться на контрастные цвета.7. Используйте цвет для воздействия на эмоции пользователейИзвестно, что цвета имеют присущие им значения и могут вызывать эмоции. Эти значения будут иметь прямое влияние на то, как ваши пользователи воспринимают ваш продукт.
Когда вы выбираете цветовую палитру для своего приложения / сайта, вы не можете просто думать о том, как все выглядит – вы должны думать о том, как все ощущается. Цвета, которые вы выбираете, могут работать за или против идентичности бренда, которую вы пытаетесь создать. Для начала, я составил краткое справочное руководство, которое охватывает основные ассоциации с каждым цветом (в западном мире).
Красный, Оранжевый, Желтый- Красный (Страстный, Мощный, Опасный, Важный): Красный – чрезвычайно стимулирующий цвет. Он создает впечатление скорости и силы. Он известен как цвет энергии. Он доказал физиологические эффекты увеличения циркуляции крови и повышения метаболизма. Вот почему, когда люди видят красный цвет, они читают усерднее и быстрее. Использование красного – это способ привлечь внимание пользователей или выделить отдельный элемент, который требует внимания.
- Оранжевый (игривый, энергичный, привлекательный, дешевый): Оранжевый – теплый и полный жизни цвет. Он обладает энергичной аурой и способен создать теплый прием для ваших пользователей. Некоторые исследователи считают, что оранжевый выражает дешевизну.
- Желтый (веселый, дружелюбный, стимулирующий, привлекающий внимание): Желтый – чрезвычайно универсальный цвет, в зависимости от выбранного оттенка. Светло-желтый ассоциируется с солнцем и, следовательно, передает позитивность и теплоту. Темные оттенки желтого (например, золото) создают впечатление древности и возраста. Эти более темные оттенки часто связаны с вечностью и мудростью.
- Зеленый (природный, безопасный, свежий): зеленый цвет отражает чувство окружающей среды и близость к природе. Он также означает рост, и именно поэтому он часто связан с бизнесом. Зеленый означает чувство правильного или неправильного.
- Синий (успокаивающий, ответственный, внушающий доверие, надежный): синий цвет часто ассоциируется со спокойными и расслабляющими эмоциями. Он также ассоциируется с силой и надежностью, с чувством доверия и профессионализма. Синий излучает чувство внутренней безопасности. Вот почему вы можете видеть банки и технологические компании, использующие этот цвет. Гиганты социальных сетей, такие как Facebook, Twitter и LinkedIn, используют синий цвет в своих сетях.
- Фиолетовый (Роскошный, Таинственный, Романтичный, Духовность): Исторически связанный с королевской семьей, фиолетовый намекает, что продукт высокого класса.
Он также означает рост, и именно поэтому он часто связан с бизнесом. Зеленый означает чувство правильного или неправильного.- Розовый (женственный, невинность, молодость): розовый наиболее известен своими ассоциациями с женственностью.
- Черный (мощный, утонченный, загадочный, трендовый): черный привлекает внимание быстрее, чем другие цвета, в том числе красный. Вот почему он чаще всего используется только для текста и акцентов.
- Белый (чистота, здоровье, чистоплотность, невинность): белый делает акцент на других цветах вокруг него, что делает его популярным выбором в качестве вторичного цвета.
- Серый (нейтральный, формальный, изысканный, стерильный): серый цвет представляет собой нейтральность, он может принимать характеристики черного или белого цветов. При использовании его в качестве основного цвета создается впечатление формальности.
Важно отметить, что значение цветов может варьироваться в зависимости от культуры и обстоятельств. Подробнее об этом см. статью Символизм цветов и цветовых значений во всем мире.
8. Сделайте свой дизайн доступнымДоступность – ключевой момент при проектировании с цветом.
Сегодняшние продукты должны быть доступны для всех – независимо от способностей человека.
Примерно 8% мужчин и 0,5% женщин страдают от некоторой формы цветовой слепоты. Это 1 из 12 мужчин и 1 из 200 женщин. Хотя существует несколько форм этого заболевания, красно-зеленая цветовая слепота является наиболее распространенной. Человек, страдающий этой формой дальтонизма, обычно испытывает проблемы с различиями как красного, так и зеленого цветов.
Как видит цвета человек с нормальным зрением и те же цвета человек с красно-зеленой цветовой слепотой (дейтеронопия и протанопия).Поскольку цветовая слепота принимает различные формы (в том числе красно-зеленую, сине-желтую и монохроматическую), важно использовать несколько визуальных сигналов для передачи важных состояний в вашем продукте. В дополнение к цвету используйте элементы, такие как штрихи, индикаторы, шаблоны, текстуры или текст для описания действий и контента.
Избегайте использования только красных и зеленых цветов для передачи информации, потому что это может быть чрезвычайно неприятным для людей, которые не могут видеть красные символы.Избегайте низкой контрастности текстаЦветовая контрастность – это одна из областей, где теория цвета имеет решающее значение для удобства использования дизайна. Когда вы используете цвета в тексте, имейте в виду, что размещение двух цветов с низким значением контраста рядом друг с другом может сделать ваш текст очень трудным для чтения.
Низкоконтрастный текст – это то, что может потенциально нарушить удобство использования многих приложений.Проверьте контраст, чтобы цвета фона и переднего плана отображались с достаточным контрастом для человека, страдающего дальтонизмом или плохо видящего человека. Это, действительно, не так сложно – все, что вам нужно сделать, это проверить коэффициент контрастности. Коэффициент контрастности показывает, как отличается цвет от другого цвета (обычно это 1: 1 или 21: 1).
Чем выше разница между двумя числами в соотношении, тем больше разница в относительной яркости между цветами. W3C рекомендует следующие коэффициенты контрастности для текста и текста на изображении:
- Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
- Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.
Хорошие новости, вам не нужно проверять их вручную. Используя инструмент Color Contrast Checker, вы можете проверить свои цветовые комбинации всего за несколько кликов.
Программа проверки цветового контраста от WebaimБонус: Основные инструменты UX дизайнераЧтобы упростить вам задачу, я также составил список лучших инструментов для выбора цветовых палитр.
Adobe Color CCAdobe Color CC (ранее известный как Kuler) – отличный инструмент для поиска, изменения и создания цветовых схем. Каждый цвет в палитре может быть индивидуально изменен или выбран в качестве базового цвета всего за несколько кликов. Палитры могут быть сохранены и добавлены в библиотеку, и существует множество отличных цветовых схем, созданных сообществом и доступных на сайте:
Adobe Color CC – отличный инструмент, способный ускорить изучение различных вариантов цветовой схемы.Dribbble поиск по цветуКогда вы хотите совершить визуальные исследования по использованию определенного цвета другими дизайнерами, зайдите на dribbble.com/colors и выберите нужный цвет.
Вы также можете указать для снимка минимальный процент содержания цвета (например, 30% синего).Укажите минимальный процент содержимого цветаMaterial DesignРуководство Material design предоставляет фантастическую цветовую палитру, которая может использоваться для иллюстрации или для разработки цветов вашего бренда.
Все цвета в этой палитре предназначены для гармоничного взаимодействия друг с другом.
ColorZilla – это расширение для Google Chrome и Mozilla Firefox, которое включает в себя множество связанных с цветом инструментов, в том числе подборщик цветов, пипетку, генератор градиента CSS и браузер палитры.
Coolors.coCoolors – мощный инструмент для создания многоцветных схем. Вы можете просто заблокировать выбранный цвет и нажать пробел, чтобы создать новую палитру. Этот инструмент замечателен тем, что вы не ограничены только одним результатом – можно получить несколько цветовых схем, просто изменив базовую точку.
Один из моих любимых способов создания цветовой схемы – это использование фотографии. Этот инструмент позволяет загрузить изображение и сделать из него цветовую палитру.
Coolors дает вам возможность загрузить изображение и сделать из него цветовую палитру.Симуляция цветовой слепоты в Adobe PhotoshopС помощью Photoshop вы можете проверить доступность вашего дизайна. Просто перейдите в View> Proof Setup, а затем вы можете выбрать один из двух типов цветовой слепоты (протанопия или дейтронопия).
NoCoffee Vision Simulator для ChromeВо избежание проблем с доступностью в дизайне, при проектировании рекомендуется проверять дизайн на цветовую слепоту. NoCoffee Vision Simulator может использоваться для имитации проблем со зрением. Например, используя параметр “Color Deficiency” установив “Deuteranopia”, вы можете просматривать веб-страницы в оттенках серого. Это поможет вам сделать ваш дизайн доступным для пользователей с нарушениями зрения.
Цвет – один из самых мощных инструментов в наборе дизайнеров. Но в то же время — это сложный в освоении инструмент.
Я надеюсь, что упомянутые выше правила создали хорошую основу для будущих дизайнеров. Теперь пришло время перейти к практике – потому что лучший способ стать отличным специалистом в цветовых схемах – это фактически создать их.
Цветовые схемы – ваша проблема? Записывайтесь на курсы от Springboard Введение в UX дизайн. Тысячи студентов прошли их, чтобы начать успешную карьеру в дизайне.
Цветовая гамма в фотографии
Цвет – инструмент не только художника, но и фотографа. При грамотном использовании с его помощью можно по-новому показать привычные вещи и многократно усилить эмоции, получаемые зрителем при знакомстве с фотографией. А можно, наоборот, окончательно испортить снимок. Поэтому для каждого фотографа так важно обращать внимание на базовые моменты, связанные с цветовой гаммой. Вместе с экспертами Nikon, напоминаем вам о них.
Продумывайте сочетания цветов
Важно ещё перед началом съёмок определиться с цветовой гаммой. Продумать локацию, оговорить с моделью одежду и реквизит. А при обработке фотографии – уделить особое внимание цветовым акцентам. На этой стадии можно убрать лишние цвета, скорректировать насыщенность и глубину оттенков. Как и художники, фотографы ориентируются по цветовому кругу, с помощью которого можно оценить сочетаемость цветов и оттенков.
Амбассадор Nikon Артём Виндриевский, снято на Nikon Z 6 Объектив – AF-S NIKKOR 24mm f/1.4G EDСреди ключевых комбинаций: монохромная (цвета одинаковы и отличаются только яркостью и насыщенностью), цветовая (на одном снимке три соседних цвета из круга), комплементарная (два противоположных цвета из круга), расщеплённое комплементарное (два соседних и один противоположный цвета из круга), а также триада (три равноудалённых цвета из круга).
Спектр цветовИногда фотографы используют больше цветов, однако для снимков такое многообразие не всегда подходит. Ведь, чаще всего, здесь работает правило «чем меньше, тем лучше».
В противном случае зритель не сможет сразу понять, на что обращать внимание, и цветовой акцент будет потерян.
Используйте цвета вместо слов
Цвет – идеальный инструмент для передачи настроения и атмосферы снимка. И фотографам стоит этим пользоваться. Так, светло-синяя палитра отлично подойдёт для зимних фотосессий – она передаёт холод, мороз и ветер. Кроме того, холодные оттенки цветов могут символизировать умиротворение и спокойствие. Яркие же, наоборот, дарят зрителю ощущение тепла и отлично подходят для живых, энергичных снимков – например, летних или весенних. Поэтому, продумывая фотосессию, не забывайте о цветовой гамме и используйте её, чтобы сделать снимки атмосфернее и интереснее.
Амбассадор Nikon Даниил Коржонов, снято на Nikon D800 Объектив – AF NIKKOR 14mm f/2.8D EDАмбассадор Nikon Ляля Гарбуз, снято на Nikon D850 Объектив – AF-S VR MICRO-NIKKOR 105mm f/2.8G IF-EDНе игнорируйте обстоятельства
С помощью цвета можно показать привычные вещи в новом свете. Главные помощники в этом – разные сезоны, время суток и погодные условия. Закат, рассвет, дождь, туман, снежная и песочная бури, молнии могут преобразить снимки и сделать их уникальными в плане цветовой гаммы. Порой кадры наполняются настолько необычными оттенками и полутонами, что локация съёмки меняется до неузнаваемости.
Амбассадор Nikon Даниил Коржонов, снято на Nikon D800 Объектив – AF-S NIKKOR 24-70mm f/2.8G EDАмбассадор Nikon Даниил Коржонов, снято на Nikon Z 7 Объектив – AF-S NIKKOR 70-200mm f/2.8E FL ED VRНеобычный эффект может получиться, если сочетать погодные условия и искусственное освещение разных цветов. Такой приём позволит наполнить кадры новым смыслом – например, когда используются цвета и оттенки, связанные с определёнными эмоциональными состояниями. Тогда зрители ярче воспримут то, что вы хотели сказать своими фотографиями.
Добавьте пятно цвета
Если вам нужно на снимке сделать акцент на каком-то предмете, то лучше всего подойдёт фон скромной цветовой гаммы – в противном случае акцента не получится.
Интересно смотрятся фотографии, где на тусклом фоне выделяется какое-либо яркое пятно. На снимке амбассадора Nikon Даниила Коржонова это японский зонтик. Кадр сделан на фотокамеру Nikon Z 7 – её байонет пропускает больше света, поэтому цвета получаются ещё насыщеннее и глубже.
Симметрия фотографии нарушается ярким зонтиком, привлекающим к себе внимание, при этом сохранён баланс между фоновыми цветами – они скромные, тусклые и не перебивают собой объект.
Убедитесь, что цвет нужен
Несмотря на то, что с помощью цветов можно подчёркивать детали снимка и передавать его настроение, они не всегда бывают к месту. На некоторых кадрах цвета бывают лишними, а иногда они и вовсе мешают восприятию происходящего и затягивают в своеобразный визуальный хаос. Тогда от цвета стоит избавиться, сделав кадр чёрно-белым.
Амбассадор Nikon Артём Виндриевский, снято на Nikon D5 Объектив – AF-S NIKKOR 24mm f/1.4G EDАмбассадор Nikon Ляля Гарбуз, снято на Nikon D810 Объектив – AF-S NIKKOR 35mm f/2DЧаще всего для одного кадра достаточно двух или трёх оттенков, которые относятся к одной цветовой гамме и сочетающихся между собой. Остальные же элементы лучше сделать блёклыми и ненасыщенными или вовсе ахроматическими. Так вы сможете правильно расставить цветовые акценты. Поэтому так популярна техника обработки, когда снимок искусственно обесцвечивается – за исключением одной-единственной детали. Несмотря на возможную грубость перехода, обычно кадры получаются впечатляющими.
Общие советы
Когда дело доходит до обработки цветных кадров, лучше не пытаться добиться чересчур выразительного цвета с помощью искусственных инструментов. Прибегая к таким способам вы, скорее всего, упустите нюансы цветовых оттенков и потеряете тонкие переходы, получив взамен неестественные, почти кислотные цвета.
Такие кадры чаще всего сложно рассматривать долго – они кратковременно привлекают внимание, а после – отталкивают излишней ненатуральностью красок.
Выразительные цвета можно получить другим путём – например, с помощью техники недоэкспонирования кадра. При этом стоит учитывать, что последующая конвертация файла в другой цветовой профиль повлияет не только на насыщенность цветов, но и сделает сам снимок темнее. Поэтому для качественного конвертирования требуются дополнительные корректировки кадра.
Капля Цветовая Палитра с Фото
Версия 1.6.2
— Explore amazing palettes created by other users
— Share your palettes with other color enthusiasts
— Color Names list
— Create Palettes from color codes
Разработчик Nikola Bozinovic указал, что в соответствии с политикой конфиденциальности приложения данные могут обрабатываться так, как описано ниже. Подробные сведения доступны в политике конфиденциальности разработчика.
Данные, используемые для отслеживания информации
Следующие данные могут использоваться для отслеживания информации о пользователе в приложениях и на сайтах, принадлежащих другим компаниям.
- Геопозиция
- Идентификаторы
- Данные об использовании
Связанные с пользователем данные
Может вестись сбор следующих данных, которые связаны с личностью пользователя.
- Контактные данные
- Идентификаторы
- Данные об использовании
- Диагностика
Не связанные с пользователем данные
Может вестись сбор следующих данных, которые не связаны с личностью пользователя.
- Геопозиция
- Пользовательский контент
- Идентификаторы
Конфиденциальные данные могут использоваться по-разному в зависимости от вашего возраста, используемых возможностей или других факторов. Подробнее
Поддерживается
Семейный доступ
С помощью семейного доступа приложением смогут пользоваться до шести участников «Семьи».
Цветовая гамма: таблица цветов RAL Classic; варианты покрытий композитных панелей
АЛЮМИНИЕВЫЕ КОМПОЗИТНЫЕ ПАНЕЛИ «WINBOND» «GROSSBOND» :
Стандартные цвета :
Стандартные цвета (плюс) :
Изготовление по таблице цветов RAL
| RAL 1000 | RAL 1001 | RAL 1002 | RAL 1003 | |||
| RAL 1004 | RAL 1005 | RAL 1006 | RAL 1007 | |||
| RAL 1011 | RAL 1012 | RAL 1013 | RAL 1014 | |||
| RAL 1015 | RAL 1016 | RAL 1017 | RAL 1018 | |||
| RAL 1019 | RAL 1020 | RAL 1021 | RAL 1023 | |||
| RAL 1024 | RAL 1027 | RAL 1028 | RAL 1032 | |||
| RAL 1033 | RAL 1034 | RAL 2000 | RAL 2001 | |||
| RAL 2002 | RAL 2003 | RAL 2004 | RAL 2008 | |||
| RAL 2009 | RAL 2010 | RAL 2011 | RAL 2012 | |||
| RAL 3000 | RAL 3001 | RAL 3002 | RAL 3003 | |||
| RAL 3004 | RAL 3005 | RAL 3007 | RAL 3009 | |||
| RAL 3011 | RAL 3012 | RAL 3013 | RAL 3014 | |||
| RAL 3015 | RAL 3016 | RAL 3017 | RAL 3018 | |||
| RAL 3020 | RAL 3022 | RAL 3027 | RAL 3031 | |||
| RAL 4001 | RAL 4002 | RAL 4003 | RAL 4004 | |||
| RAL 4005 | RAL 4006 | RAL 4007 | RAL 4008 | |||
| RAL 4009 | RAL 4010 | RAL 5000 | RAL 5001 | |||
| RAL 5002 | RAL 5003 | RAL 5004 | RAL 5005 | |||
| RAL 5007 | RAL 5008 | RAL 5009 | RAL 5010 | |||
| RAL 5011 | RAL 5012 | RAL 5013 | RAL 5014 | |||
| RAL 5015 | RAL 5017 | RAL 5018 | RAL 5019 | |||
| RAL 5020 | RAL 5021 | RAL 5022 | RAL 5023 | |||
| RAL 5024 | RAL 6000 | RAL 6001 | RAL 6002 | |||
| RAL 6003 | RAL 6004 | RAL 6005 | RAL 6006 | |||
| RAL 6007 | RAL 6008 | RAL 6009 | RAL 6010 | |||
| RAL 6011 | RAL 6012 | RAL 6013 | RAL 6014 | |||
| RAL 6015 | RAL 6016 | RAL 6017 | RAL 6018 | |||
| RAL 6019 | RAL 6020 | RAL 6021 | RAL 6022 | |||
| RAL 6024 | RAL 6025 | RAL 6026 | RAL 6027 | |||
| RAL 6028 | RAL 6029 | RAL 6032 | RAL 6033 | |||
| RAL 6034 | RAL 7000 | RAL 7001 | RAL 7002 | |||
| RAL 7003 | RAL 7004 | RAL 7005 | RAL 7006 | |||
| RAL 7008 | RAL 7009 | RAL 7010 | RAL 7011 | |||
| RAL 7012 | RAL 7013 | RAL 7015 | RAL 7016 | |||
| RAL 7021 | RAL 7022 | RAL 7023 | RAL 7024 | |||
| RAL 7026 | RAL 7030 | RAL 7031 | RAL 7032 | |||
| RAL 7033 | RAL 7034 | RAL 7035 | RAL 7036 | |||
| RAL 7037 | RAL 7038 | RAL 7039 | RAL 7040 | |||
| RAL 7042 | RAL 7043 | RAL 7044 | RAL 7045 | |||
| RAL 7046 | RAL 7047 | RAL 8000 | RAL 8001 | |||
| RAL 8002 | RAL 8003 | RAL 8004 | RAL 8007 | |||
| RAL 8015 | RAL 8016 | RAL 8017 | RAL 8019 | |||
| RAL 8022 | RAL 8023 | RAL 8024 | RAL 8025 | |||
| RAL 8028 | RAL 9001 | RAL 9002 | RAL 9003 | |||
| RAL 9004 | RAL 9005 | RAL 9006 | RAL 9007 | |||
| RAL 9010 | RAL 9011 | RAL 9016 | RAL 9017 | |||
| RAL 9018 |
16 отличных цветовых решений сайтов
В идеале цветовая палитра сайта или лендинга должна отражать ценности, убеждения и цели компании.
Яркие цвета могут указывать на желание бренда сделать свой дизайн запоминающимся, в то время как приглушенные оттенки придают ему более утонченный образ.
Цветовая палитра — наравне с макетом и типографикой — формирует первое впечатление о дизайне, и, если все подобрано идеально, может положительно влиять на оценку компании в целом.
Однако с учетом тысяч возможных цветовых сочетаний выбрать правильную и подходящую именно вам цветовую палитру не так-то и просто. В этой статье мы разберем 16 цветовых палитр реальных сайтов, идеально подобранных для передачи пользователям нужных эмоций и чувств.
Содержание статьи
Почему цветовая схема так важна?
1. Tori’s Eye
2. Mea Cuppa
3. The Big Top
4. BarkBox
5. Cheese Survival Kit
6. Nordic Ruby
7. Lake Nona
8. Lemon Stand
9. Mint
10. Odopod
11. Fiverr
12. Digital Photography School
13. Ahrefs
14. Millo.co
15. Brian Gardner
16. Loom
Тестирование цветовых палитр
Заключение
Почему цветовая схема так важна?
Прежде чем перейти к выбору цветовой схемы, важно понять, почему она так важна:
- Цвет повышает узнаваемость бренда на 80%.
- На 90% формирует первое впечатление о сайте.
- Гармоничная цветовая палитра создает ощущение баланса и порядка. Вы можете использовать ее для установления иерархии контента на своих страницах.
- Позволяет выделить определенные элементы на странице («призывы к действию»).
- Упрощает связанные с дизайном решения. Сокращает время, необходимое для создания новых страниц.
Количество используемых цветов будет зависеть от сложности выбранного вами типа цветовых сочетаний. К примеру, если вы решите использовать монохромную палитру, вам может потребоваться семь или даже больше оттенков одного цвета, чтобы создать достаточное разнообразие на экране.
Необходимо будет определиться с цветом различных элементов, таких как текст, ссылки (обычный и при наведении), кнопки CTA, заголовки и цвет фона.
1. Tori’s Eye
Tori’s Eye — это инструмент для визуализации информации на Twitter. Этот сайт — отличный пример преимущественно однотонной цветовой схемы. В данном случае мы видим простую, но при этом мощную цветовую палитру, основанную на оттенках зеленого.
Такую цветовую схему легко скопировать, поскольку один оттенок цвета практически всегда будет сочетаться с другим оттенком того же цвета.
2. Mea Cuppa
Веб-сайт кофейни Mea Cuppa использует приятную для глаз цветовую палитру, включающую в себя пару ярких оттенков (рубиновый и изумрудный) для максимальной живости, но в остальном полагается на нейтральную монохромную палитру коричневых и серых оттенков.
Цветовая палитра сайта ассоциируется с кафе и отражается в основном изображении, что формирует целостность и связность всех элементов.
3. The Big Top
Сайт BigTop — сообщества, специализирующегося на оказании помощи сети стартапов — использует необычное, но чрезвычайно привлекающее внимание сочетание тонов, варьирующихся от фиолетового и синего до ярко-оранжевого и желтого.
Все основные цвета — это холодные оттенки. На их фоне отлично выделяются оранжевый и желтый. Благодаря такому сочетанию внимание пользователя на домашней странице в первую очередь приковывает «призыв к действию».
4. BarkBox
Доминирующий розовый цвет на домашней странице BarkBox повторяется по всему сайту в разных оттенках. Он прекрасно контрастирует с синим цветом, используемым в логотипе и CTA.
Использование комплиментарных цветов для привлечения внимания посетителей к определенным элементам поможет улучшить любую цветовую палитру веб-сайта.
Читайте также: Яркие цветовые решения для приложений и сайтов5. Cheese Survival Kit
Красный — чрезвычайно популярный цвет в веб-дизайне. Он может передавать богатую смесь эмоций, что делает его весьма универсальным.
Особенно он эффективен при использовании в малых дозах, как, например, на веб-сайте Cheese Survival Kit.
Красный смягчают более нейтральные цвета, а синий используется для CTA и других элементов, к которым необходимо привлечь внимание пользователя.
6. Nordic Ruby
Веб-сайт Nordic Ruby, конференции проводимой в Стокгольме, оформлен в глубоких темных тонах. Цвета, выбранные для данной палитры, придают сайту изысканный вид и выгодным образом выделяют его среди конкурентов.
7. Lake Nona
Lake Nona — это веб-сайт отеля, расположенного на побережье. Следовательно, использование синего цвета здесь вполне ожидаемо и является правильным решением. Другие нейтральные цвета выделяют и хорошо подчеркивают его.
8. Lemon Stand
И снова нет ничего удивительного в том, что компания Lemon Stand, чье название содержит в себе слово «лимон», использует желтый цвет в своей цветовой палитре. Голубой и серый цвета прекрасно сочетаются с желтым и помогают смягчить его яркость.
Читайте также: Принципы контраста и подобия как средства выразительности в веб-дизайне9. Mint
Веб-сайт Mint посвящен финансам, поэтому использование здесь зеленых и синих оттенков является отличным выбором. Данные цвета помогают сформировать атмосферу спокойствия, миролюбия и доверия. Нейтральные оттенки в коричневой гамме создают общую природную цветовую гамму, обладающую умиротворяющим эффектом.
10. Odopod
Веб-сайт цифрового агентства Odopod имеет монотонную цветовую палитру, которая при этом не выглядит скучно благодаря градиенту. Крупная типографика обеспечивает превосходный контраст, и пользователю предельно очевидно, куда необходимо нажимать.
11. Fiverr
Вы могли заметить, что многие компании резервируют определенный цвет исключительно для CTA-элементов, и не задействуют его больше ни в каком другом месте сайта. В случае с Fiverr таким цветом является зеленый. Основными же здесь являются более нейтральные цвета.
12. Digital Photography School
Как правило, мы ожидаем, что у сайта, связанного с изобразительным искусством, будет удачно подобранная цветовая палитра, и Digital Photography School не является здесь исключением. Яркие цвета помогают привлечь внимание зрителя. И, как и в случае с Fiverr, оранжевый цвет, используемый в дизайне CTA (и логотипа), больше нигде не появляется в палитре, поскольку он используется для точечного воздействия на пользователя.
13. Ahrefs
Ahrefs — пример веб-сайта, свободно использующего свою цветовую палитру. Темно-синий служит доминирующим цветом, но его вариации встречаются по всему сайту. То же самое касается оранжевого, розового и бирюзового цветов.
Читайте также: 8 ярких цветовых трендов 2019 года14. Millo.co
Millo.co использует очень простую цветовую палитру, и это лучшее решение для него. Благодаря такому цветовому решению посетителю очень легко ориентироваться на сайте.
15. Brian Gardner
Некоторые компании и частные лица доводят монохромную цветовую палитру до крайности. Так, веб-дизайнер Брайан Гарднер (Brian Gardner) использует в дизайне своего сайта черно-белую цветовую схему. Она основывается на минимализме его бренда, и таким образом прекрасно отражает его ценности и убеждения.
16. Loom
Если вы хотите, чтобы ваш лендинг оказывал успокаивающее воздействие на пользователей, то остановите свой выбор на мягких цветах. Так, компания Loom обширно использует в дизайне своего сайта лососевый и светло-голубой цвета. Такое сочетание хорошо работает особенно в комбинации с фиолетово-синим цветом CTA и других важных элементов на странице.
Тестирование цветовых палитр
Когда вы создаете лендинг, вы тестируете свои CTA-элементы, заголовки и другие элементы. Так почему же в случае с цветом все должно быть иначе?
Инструмент сплит-тестирование от платформы LPgenerator дает прекрасную возможность выяснить, как аудитория реагирует на вашу текущую цветовую палитру.
Чтобы запустить тест, вам нужно создать копию/копии уже существующей посадочной страницы («Копировать вариант»), указать соотношение распределения трафика («Вес») на каждую из версий, внести изменения и наблюдать за реакцией посетителей:
По прошествии определенного срока после запуска теста, проанализируйте данные и выберите, какой из вариантов приносит лучший результат. Количество конверсий расскажет вам, привлекают ли цвета вашего лендинга ваших потенциальных клиентов.
Читайте также: Сколько времени нужно на сплит-тестирование?Заключение
Цветовая палитра должна не только выражать ценности вашего бренда, но и привлекать целевую аудиторию. В противном случае людей может неосознанно отталкивать ваш лендинг.
Выберите палитру, которая выгодным образом будет отличаться от других компаний в вашей нише, и после этого приступайте к тестированию.
Не упускайте возможности сделать вашу посадочную страницу или сайт максимально привлекательными для пользователей.
Высоких вам конверсий!
По материалам: crazyegg.com
06-02-2019
Цветовая гамма композитных панелей в Самаре
КОЛЕРНАЯ КАРТА В ФОРМАТЕ PDF
ВНИМАНИЕ! Возможности экрана не позволяют точно передать цветовую гамму композитных панелей AlcoteK®. Назначение представленной палитры на сайте сориентировать заказчика в вариантах покрытий. Коллекции представлены не в полном объеме.
Для подбора цвета КП AlcoteK® на объект запрашивайте колерную карту в центральном офисе или у представителей компании. Возможен заказ индивидуального цвета в соответствии с предоставленным клиентом образцом.
При заказе нестандартных позиций по всем вопросам, включая сроки поставки, необходимо обращаться к менеджерам ТД “АлкотеК” или региональным представителям и дилерам.
СПЕЦИАЛЬНЫЕ ПОКРЫТИЯ:
Superclean. Суперчистое покрытие. Любая окрашенная поверхность КП AlcoteK покрывается специальным лаком, в состав которого входят FEVE смолы и модифицированные кремниевые наночастицы, препятствующие глубокому проникновению различных загрязнителей в лакокрасочное покрытие панели.
Загрязнения легко удаляются водой, грязь на поверхности не задерживается.
Protect Color. Защита цвета. Эмали созданные на основе фторированных смол Lumiflon (FEVE покрытие), отличаются высоким уровнем блеска, отличной устойчивостью к воздействию агрессивных сред и к УФ излучению. Обладают эффектом самоочищения и позволяют сохранить исходный исходный блеск и цвет поверхности в сложных условиях эксплуатации на срок более 50 лет. Образцы предоставляются по запросу.
Antibacterial Cover. Антибактериальные РЕ покрытия. Для использования в медицинских учреждениях, на пищевых складах. В составе применяется высокоэффективный, экологически чистый биоцид на основе нанодисперсий серебра, препятствующих развитию колоний бактерий на поверхности окрашенного проката.
Срок поставки:
- стандартные цвета АКП AlcoteK® от 1 дня до 2 недель.
- цвета под заказ АКП AlcoteK® от 3 до 10 недель.
50 великолепных цветовых схем с потрясающих веб-сайтов
Цвет является такой важной частью нашего восприятия мира, что мы часто принимаем это как должное. Подумайте об этом: от молодого и ярко-оранжевого на чьей-то одежде до серого и мрачного неба над нами — цвета могут формировать наше восприятие других и даже обстоятельства, в которых мы находимся.
Вот почему один из самых мощных инструментов в арсенале дизайнера — это цвет. Это может либо создать, либо разрушить дизайн; это может быть определяющим фактором в привлечении зрителей или их быстрой отправке в путь.
Как не дизайнер, мне часто бывает трудно подобрать подходящие цвета для своих любительских проектов. Создаю ли я простое изображение для поддержки своего контента или более сложные проекты, такие как слайд-колода или инфографика, я часто трачу много времени на поиск идеальной цветовой схемы. Я задаю себе такие вопросы: хочу ли я, чтобы мой дизайн был привлекательным? Провокационно и дерзко? Или умно и элегантно?
Если вы не опытный дизайнер, вам потребуется время и усилия, чтобы найти цветовую комбинацию, которая соответствует принципам дизайна вашего веб-сайта, поэтому команда дизайнеров Visme решила предоставить нашим пользователям удобный список красивых цветовых схем с веб-сайтов.
которые были признаны Awwwards, самой престижной наградой для веб-дизайнеров и разработчиков.
Получив множество положительных отзывов о нашем первом руководстве по сочетанию цветов, мы поняли, что наша аудитория оценит еще один раунд великолепных палитр на выбор.
Вы можете легко применить их к любому из ваших проектов Visme, используя шестнадцатеричные коды, предоставленные справа от каждого изображения, как показано на GIF-изображении выше.
СВЯЗАННО: 50 красивых цветовых комбинаций (и как их применить к вашим дизайнам)
1 Красочный и сбалансированный
Активная теория
В этой красочной, но не подавляющей палитре сочетаются теплые и прохладные оттенки.Эта цветовая гамма от привлекательного и яркого голубовато-зеленого до землистого терракотового цвета хорошо подходит для молодежного и современного дизайна.
2 ярких акцентных цвета
Paypr
В этой комбинации оттенки синего и фиолетового сочетаются с красными и оранжевыми акцентами. Обратите внимание, как контраст между ярким синим фоном и красно-оранжевыми акцентами сразу же привлекает внимание к нужным местам, от верхней части страницы до видео внизу.
3 Натуральный и землистый
Resn
Чувство окружения умиротворяющим голубым небом и умиротворяющей сценой на природе сразу же вызывает эта очень «приземленная» цветовая схема.Эта приятная цветовая комбинация идеально подходит для проектов, связанных с природой и экологичностью, и может пригодиться для проектов, которые подчеркивают экологическое сознание.
4 Прохладный и свежий
Grosse Lanterne
Темно-синий и изумрудно-зеленый сочетаются в этой схеме, чтобы создать чистую и освежающую палитру. Эта комбинация, напоминающая океан или любую обстановку, связанную с водой, идеально подходит для дизайнов, призванных передать спокойный и надежный образ.
5 Смелый и яркий
W&CO
Эта привлекательная комбинация кораллово-красного и бирюзового цветов, а также других оттенков синего, яркая и смелая.
Более прохладный синий цвет прекрасно сочетается с ярким цветовым оформлением, что делает эту цветовую схему идеальной для любого стильного и современного дизайна.
6 вермиллионов и русская зелень
Stinkdigital
Эта страница, часто используемая на современных сайтах, создает привлекательный контраст, сочетая черный фон с яркими акцентными цветами. При этом вариации красного цвета, такие как киноварь и каштановый, дополняются уникальным русским зеленым.
7 Стильный и изысканный
Bordel Studio
В этой элегантной цветовой гамме сочетаются темные приглушенные тона, чтобы создать чистый и изысканный вид.Его оттенки серого и синего идеально подходят для более консервативных дизайнов.
8 фиолетовых оттенков и тонов
ReedBe
Оттенки темно-красновато-коричневого в сочетании с глубоким тосканским красным и старой лавандой создают уникальную палитру, которая привлекает вас своей теплотой и глубиной. Эта схема идеально подходит для элегантных вещей, которые хотят добавить энергии и богатства.
9 глубоких фиолетовых и блюзовых оттенков
Самсы
Эта темная и загадочная цветовая схема с ярким синим акцентом соответствует преобладающей тенденции веб-дизайна: использование темных фоновых цветов с яркими и смелыми акцентными цветами.
10 Современные и смелые
Брайан Джеймс
Очаровательная комбинация розового, красного, черного и серого цветов. Эта современная палитра вызывает ощущение роскоши, изысканности и минимализма.
11 Живые и манящие
Антон и Ирен
Это прекрасное сочетание конфетно-розового, зелено-желтого, лавандово-серого и пастельно-коричневого цветов идеально подходит для создания яркого и привлекательного образа.
12 Поразительно и просто
Берт
Трудно отвести взгляд, столкнувшись с таким минималистичным, но ярким дизайном, как этот.Темный дымчато-черный фон в сочетании с ярким электрическим синим цветом делают эту цветовую схему выигрышной, полезной для множества проектов.
13 Красный и живой
BrightMedia
Этот привлекательный веб-сайт, использующий красный польский флаг в качестве основы для своей цветовой схемы, сочетает темно-алый красный с темно-розовым на светло-сером фоне. Он живой и креативный, и в то же время изысканный в использовании минималистской цветовой схемы с разными оттенками одного и того же оттенка.
14 Вычурное и творческое
Джули Флогак
Это красочное сочетание золотарника, киновари, темно-синего и голландского белого воплощает в себе этот вычурный и креативный дизайн для онлайн-архива музыкальных произведений.
15 Элегантный, но доступный
Эпический
Это уникальное сочетание телесных тонов и более элегантных цветов, таких как темно-синий и рубиновый, делает эту цветовую схему идеальной для дизайнов с тонкими сообщениями. Зарезервировано, но доступно; сложные, но забавные: это типы серых сообщений, которые эффективно отправляются с помощью этой приятной для глаз комбинации.
16 Изящный и футуристический
MediaMonks
Это привлекательное сочетание синего сапфира, бронзового серого и платины, с одной стороны, и персиково-оранжевого и коричневого, с другой, создает современную и элегантную цветовую схему.Используемые здесь для создания футуристического образа, холодные металлические цвета эффективно смягчаются более человечными, землистыми тонами.
17 Новаторский и смелый
Интерактивный дизайн eDesign
Эта яркая комбинация портлендского апельсина, ярко-желтого и нефрита на темно-сером, почти черном фоне требует вашего внимания. Смелая и полная энергии, эта цветовая комбинация идеально подходит, если вы хотите создать современный и смелый образ.
18 Текстурированный и динамический
HAUS
Темная сиена, уголь и вспышка бледно-красно-фиолетового делают эту цветовую схему незаменимой для тех, кто ищет элегантный, футуристический, но динамичный вид.Эта цветовая комбинация достаточно универсальна, ее можно использовать в проектах, начиная от современных корпоративных отчетов и заканчивая журналами и редакционным контентом в целом.
19 Минимальный, но теплый
Идентификаторы удовольствия
Белая яичная скорлупа, темная ваниль и серо-коричневый с оттенками красного мармелада — все вместе в этом минималистском, но теплом и уютном месте. Всплеск ярких красок по всему дизайну делает этот сайт элегантным и в то же время привлекательным.
20 Яркие и четкие
FCINQ
Темно-вишневый, королевский пурпурный и темно-сланцево-синий сочетаются в этом красивом и привлекательном месте.Темно-вишневый цвет выступает в качестве акцентного цвета на темно-фиолетовом фоне, приводя взгляд зрителей к меню навигации, как только они попадают на сайт.
21 Чистый и энергичный
Изменить цифровой
Оттенки синего и фиолетового на этом сайте особенно приятны для глаз и вызывают одновременно энергию и умиротворение. Черника и небесно-голубой искусно сочетаются с аметистом, создавая освежающую и приятную для глаз цветовую комбинацию, подходящую для любого дизайна, призванного вызвать положительные эмоции.
22 Корпоративное и традиционное
Уотсон / ДГ
Если вы ищете более приглушенный и корпоративный вид, эта цветовая схема сочетает в себе оттенки зеленого, синего и коричневого, которые передают профессионализм и надежность. Фтало-зеленый, темно-сланцево-серый и оловянно-синий — это лишь некоторые из используемых здесь цветов.
23 Синий и освежающий
Supremo
Диапазон синего, от яркого лазурита до голубого, делает эту цветовую схему сдержанной, но красивой.Его можно использовать в самых разных визуальных эффектах, от приглушенных корпоративных проектов до связанных с дизайном, как в данном случае.
24 Чистый и современный
Umwelt A / S
Красивый зеленый мирт и кеппель сочетаются здесь с лазурно-белым и однотонным белым в простой, но эффектной комбинации.
25 Яркий и элегантный
Waaark
В этой яркой и элегантной цветовой гамме очень насыщенный светло-холодный синий сочетается с другими оттенками, такими как темно-синий и бледно-васильковый.
Это сочетание элегантно дополняет яркий и яркий оттенок розового.
26 Молодость и веселье
Пятьсот
Эта игривая и красочная композиция сочетает в себе несколько ярких оттенков: яркую бирюзу, желтый мандарин и темную орхидею.
27 Великолепный контраст
Иммерсивный сад
Этот элегантный и ультрасовременный сайт может похвастаться элегантным и привлекательным сочетанием с эффективным контрастом. Яркий желто-зеленый хорошо сочетается с черным и серым фоном.
28 эффективных акцентных цветов
SMFB
Это еще один пример сайта, на котором эффективно используется яркий цветовой акцент, чтобы очертить путь для глаз зрителей. В этом случае ярко-желтый цвет привлекает внимание сначала к заголовку, затем к тропе в гору и, наконец, к кнопкам с призывом к действию внизу страницы.
29 Современность в полном расцвете
Nurture Digital
Это сочетание зелени океана, аквамарина и морской зелени прекрасно передает концепцию современности и в то же время жизни и плодородия, что полностью соответствует некоторым словам в центральном послании сайта: цифровой, воспитание и цветение.
30 Рядом с природой
Родился 05
Эта землистая комбинация зеленого с диапазоном синего, от бледно-лазурного до бирюзово-синего, идеально подходит для консервативных дизайнов, призванных создать образ стабильности, надежности и изобилия.
31 Ярко-розовый и пастель
Stinkdigital
Этот оживленный сайт сочетает ярко-розовый малиновый с более мягкими цветами, такими как пастельный синий и светло-пастельный фиолетовый. Результат — чудесно свежая и беззаботная цветовая гамма.
32 Уникальная комбинация
AILOVE
Это невероятное сочетание темно-розового с синим делает эту уникальную и привлекательную комбинацию, которую можно использовать для множества проектов в разных областях.
33 ярких цитрусовых цвета
Чизкейк супергероя
Эта свежая и цитрусовая смесь светло-зеленовато-желтых, зеленовато-зеленого и черного цветов является фаворитом среди брендов, связанных со спортивными напитками с высоким уровнем адреналина и энергетическими напитками.
34 Яркие синие и оранжевые
Бюрократик
Яркий бирюзовый фон и оранжевая кнопка с призывом к действию на этом сайте могут показаться немного громкими для некоторых посетителей, но комбинация определенно передает энергичные эмоции, которые сочетаются с изображением на заднем плане.
35 Красная роза и черника
Google Brand Studio
Эта серия розовых и красных цветов с ярко-синей кнопкой с призывом к действию создает большой визуальный интерес и сразу привлекает к себе внимание.
36 Смелый и уникальный
Детали
Смелое и уникальное сочетание королевского синего и золотого цветов с яркими голубыми бликами привлекает внимание. Его неожиданное и несколько нестандартное мышление помогает сделать этот сайт победителем.
37 Веселая и энергичная
Шер Ами
Голубой, синий и оранжевый на этой странице делают этот дизайн особенно привлекательным и энергичным, который можно применять в проектах с оптимистичным и вдохновляющим посланием.
38 Снежный, но теплый
Оставляющий камень
Эта зимняя комбинация красного и синего вызывает одновременно прохладу и тепло, как и изображения, связанные с зимними праздниками.
39 Богатство и красочность
Elespacio
Эта яркая и насыщенная цветовая комбинация объединяет яркий желтый, синий и розовый в этом красивом минималистском дизайне, который можно использовать в ярких, но профессиональных проектах.
40 Модерн и минимализм
SFCD
Этот сайт обладает привлекательным дизайном с несколькими элементами и хорошо подобранной цветовой схемой.Турецкая роза, средние зеленые и желтые геометрические фигуры на черном и сером фоне достаточно, чтобы привлечь внимание зрителя.
41 Бесстрашный и бесстрашный
Great Works Копенгаген
В этой эффектной цветовой комбинации используются оттенки синего и красного, чтобы создать ощущение смелости и пылкого профессионализма, что идеально подходит для дизайна, стремящегося передать силу и компетентность.
42 цвета Flat Design
Resn
Даже если вы не знакомы с термином «плоский дизайн», вы, вероятно, видели его раньше: веб-сайты без падающих теней, без градиентов, без скосов; Короче говоря, никаких трехмерных элементов.
Хотя сайт выше добавляет немного теневого эффекта мальчику справа, технически его можно квалифицировать как плоский дизайн 2.0, который является не чем иным, как добавлением нескольких очень тонких трехмерных эффектов.
Как видно здесь, цвета плоского дизайна имеют тенденцию быть очень яркими и перенасыщенными.
43 Эклектичный и мирный
Играть
Это уникальное сочетание кофейного тона с небесно-голубым и различными оттенками коричневого делает эту цветовую схему успокаивающей и успокаивающей: чем-то напоминающим вашу любимую кофейню или гостиную.
44 Классный и традиционный
details.ch
Эта комбинация камео-розового, синего UCLA и гранитно-серого напоминает одежду, которую используют состоятельные, опрятные студенты колледжей. Хотя это имеет смысл с учетом целевой аудитории сайта, эту схему также можно использовать в любом дизайне, который требует серьезности и немного живости.
45 ярких акцентных цветов
stinkdigital
Этот сайт Spotify идеально использует акцент виноградного цвета на фоне очень темного ненасыщенного фиолетового.Эту цветовую схему можно использовать для любого дизайна, где у вас есть несколько элементов или центральное сообщение, которое вы действительно хотите показать.
46 Корпоративное и серьезное
EPIC
Оксфордский синий с несколькими ярко-синими и красными акцентами делает этот сайт очень традиционным и корпоративным. Синий и зеленый, которые говорят о профессионализме и стабильности, обычно используются в корпоративных отчетах.
47 Гламурно и модно
Апартамент
Эта смесь золота, пурпурного и черного напоминает такие слова, как богатство и экстравагантность.
Соответственно, эта комбинация может быть применена к дизайну, относящемуся к моде, роскоши и товарам высокого класса.
48 Привлекающий внимание и гладкий
ФУТУРАМО
Это прекрасное сочетание ярко-зеленого и телемагенты на темном фоне создает повышенный визуальный интерес и привлекает зрителя с первого взгляда. Смелая, но профессиональная, эта цветовая комбинация при правильном использовании может быть применена даже к корпоративному дизайну.
49 Громко и прямо в лицо
Паника
В то время как предыдущая цветовая схема была привлекательной — но не слишком яркой — эта комбинация намеренно громкая до такой степени, что может оттолкнуть некоторых зрителей.Однако, если вы хотите сделать смелое заявление, эта комбинация может хорошо работать, если все сделано правильно, как в этом случае.
50 Живых, но успокаивающих
madeo
Это расслабляющее, но веселое сочетание лимона, желтого, мяты и темно-голубого делает эту цветовую схему идеальной для любого послания, которое призвано передать энергию, оптимизм и в то же время гармонию и рост.
Начало графического дизайна: Цвет
/ en / начало-графический-дизайн / типография / содержание /
Сила цвета
Цвет играет жизненно важную роль в дизайне и повседневной жизни .Он может привлечь ваше внимание к изображению. Иногда это может вызвать эмоциональную реакцию. Он даже может сообщить что-то важное, вообще не используя слов.
Так как же узнать, какие цвета хорошо смотрятся вместе, а какие нет? Ответ прост: Теория цвета .
Художники и дизайнеры веками следовали теории цвета , но каждый может узнать о ней больше. Это может помочь вам чувствовать себя уверенно в самых разных ситуациях, будь то , выбирая цвета для дизайна или , составляя идеальный наряд .Немного поняв, вы взглянете на цвет по-новому.
Посмотрите видео ниже, чтобы узнать больше о цвете.
Основы цвета
Давайте начнем с самого начала с напоминания об основах. Помните, как в школе изучали основных и дополнительных цветов? Значит, у вас уже есть некоторые знания в области теории цвета.
Дополнительные цвета создаются путем объединения двух основных цветов .Красный и желтый составляют оранжевый; желтый и синий составляют зеленый; а синий и красный — фиолетовый.
Если мы смешаем эти цветов вместе, мы получим еще больше промежуточных оттенков , таких как красно-оранжевый и желто-зеленый. Все вместе они образуют так называемое цветовое колесо . (Вы, наверное, видите, откуда он получил свое название.)
Присмотритесь
Теперь, когда вы знаете о цветовом круге, давайте сделаем еще один шаг с оттенком , насыщенностью и значением .С этими терминами вы можете не встретиться в повседневной жизни, но они ключ к пониманию более тонких цветов — как все эти маленькие кусочки краски в магазине товаров для дома.
оттенок
Hue самый простой; это просто другое слово для цвета . В приведенном ниже примере вы можете описать оттенок как кораллово-розовый или светло-красный , в зависимости от вашей интерпретации.
Насыщенность
Насыщенность относится к интенсивности — другими словами, выглядит ли цвет более тонким или более ярким .Сильно насыщенные цвета становятся ярче или насыщеннее. Ненасыщенные цвета имеют меньше пигмента и, следовательно, меньше oomph .
Значение
Значение связано с тем, насколько темный или светлый цвет, в диапазоне от черного до белого.
Как вы можете видеть ниже, это дает нам много разных оттенков, от глубокого красновато-коричневого до светло-пастельно-розового.
Создание цветовых схем
Итак, как нам собрать все это вместе, чтобы создать профессиональные цветовые схемы? На самом деле существуют проверенные формулы, основанные на так называемой цветовой гармонии , которая может помочь.
Color Harmony использует цветовое колесо для иллюстрации проверенных временем цветовых комбинаций. Ниже мы рассмотрим некоторые из наиболее распространенных типов гармонии.
Монохромный
Самая простая формула гармонии — монохроматический , потому что он использует только одноцветный или оттенок . Чтобы создать монохроматическую цветовую схему, выберите пятно на цветовом круге, затем используйте свои знания о насыщенности и значении для создания вариаций.
Самое лучшее в монохроматических цветовых схемах — это то, что они гарантированно соответствуют . Цвета идеально подходят друг другу, потому что все они из одной семьи.
Аналог
Аналогичная цветовая схема использует цвета, которые расположены рядом друг с другом на колесе, например красный и оранжевый или синий и зеленый.
Не бойтесь играть с палитрой и создайте свою уникальную интерпретацию . Вот в чем суть цветовой гармонии; формулы — это просто отправные точки, которые помогут вам направить и вдохновить.
Дополнительные
Дополнительные цветов — это напротив друг друга на колесе; например, синий и оранжевый или классический красный и зеленый.
Чтобы избежать слишком упрощенных дополнительных цветовых схем, добавляет некоторое разнообразие , вводя более светлые, темные или ненасыщенные тона.
Раздельно-комплементарная
Цветовая схема с дополнительным разделением использует цвета по обе стороны от дополнительного .
Это дает вам тот же уровень контрастности , что и дополнительная цветовая схема, но с большим количеством цветов для работы (и потенциально более интересными результатами).
Триадический
В трехцветной схеме используются три цвета , которые равномерно распределены по , образуя идеальный треугольник на колесе.
Эти комбинации, как правило, довольно поразительны, особенно когда они включают основных или дополнительных цветов, поэтому будьте внимательны, используя их в своей работе.
Тетрадик
Цветовые схемы Tetradic образуют прямоугольник на колесе, используя не одну, а две дополнительные пары цветов . Эта формула работает лучше всего, если вы позволяете одному цвету доминировать, а другие служат акцентом.
Как избежать распространенных ошибок
Есть несколько классических правил, которые можно и нельзя, когда дело касается цвета. Например, вы когда-нибудь видели цвета, которые кажутся вибрирующими , когда их кладут рядом друг с другом?
Решение состоит в том, чтобы смягчить его — буквально — и есть простой способ сделать это.Начните с одного цвета и попробуйте настроить его яркости , темноты или насыщенности . Иногда немного контраста — это все, что нужно вашей цветовой палитре.
Читаемость — важный фактор в любом дизайне. Ваши цвета должны быть разборчивыми, и удобными для глаз , особенно при работе с текстом.
Иногда это означает НЕ использование цвета — по крайней мере, не в каждой маленькой детали .
Нейтральные цвета, такие как черный, белый и серый, могут помочь вам сбалансировать ваш дизайн, поэтому, когда вы используете цвет, он действительно выделяется.
Правильный выбор цветов
Каждый цвет передает сообщение. Важно рассмотреть тон вашего проекта и выбрать подходящую цветовую палитру.
Например, ярких цветов , как правило, имеют веселую или современную атмосферу.
Ненасыщенные цветов часто кажутся более серьезными или деловыми.
Иногда это просто зависит от контекста . Благодаря практике и творчеству у вас нет предела тому, что вы можете сделать.
В поисках вдохновения
Вы можете найти идей для цветовых решений во всевозможных интересных местах, от рекламы и брендов до известных произведений искусства.
Вы даже можете использовать веб-ресурс для просмотра цветовых палитр или создания собственных.
Опытные дизайнеры часто черпают вдохновение в окружающем их мире. Нет ничего плохого в том, чтобы найти то, что вам нравится, и сделать своим собственным .
Собираем все вместе
Куда бы вы ни посмотрели, везде есть цвет, цвет и многое другое.Использование его в работе может показаться пугающим, но это не обязательно. Просто продолжайте экспериментировать , и вспомните, что вы узнали о теории цвета . Скоро выбор красивых цветов станет вашей второй натурой.
Надеемся, вам понравилось изучать основы цвета!
Обязательно ознакомьтесь с остальными нашими темами о графическом дизайне, в том числе:
/ ru / начало-графический-дизайн / макет-и-композиция / содержание /
Цветовые схемы веб-сайта: теория, практика и вдохновение
Создание цветовой схемы веб-сайта — важный и захватывающий аспект веб-дизайна! Цвет является ключевым компонентом брендинга вашего бизнеса, а также помогает передавать важные сообщения пользователям, когда они взаимодействуют с вашим сайтом.
Поэтому выбор цвета всегда следует тщательно планировать и проверять.
Существует множество передовых методов и элементов цветовых схем, которые вы должны рассмотреть, прежде чем внедрять что-то новое на свой сайт (или у вашего клиента). В этой статье я углублюсь в:
- Как думать о цветовых схемах и своем бренде
- Определение целевого рынка (и того, как они будут реагировать на цветовые схемы)
- Психология цвета
- Как выбрать цветовую схему
- Инструменты для выбора цветовой палитры
- Как применить ваши цвета на вашем веб-сайте
- Цветовые схемы для вдохновляющих веб-сайтов в 2019 году
Как думать о цветовых схемах и вашем бренде
Перед тем, как выбрать какие-либо цвета или схемы, вам необходимо иметь глубокое понимание вашего бренда и пользователей, взаимодействующих с вашим сайтом.
Как дизайнеры, мы любим цвет. Бесконечная цветовая палитра и возможность выбирать варианты, представляющие бренд, делают это увлекательной частью процесса веб-дизайна. Бренд, для которого вы создаете дизайн, всегда должен быть в центре внимания при создании цветовой схемы.
Это может показаться очевидным, но важно знать, с чего вы начинаете в отношении бренда. Прежде чем заходить слишком далеко, убедитесь, что вы работаете с установленной цветовой схемой бренда или начинаете с нуля.Вы будете удивлены, как часто это можно упустить из виду на этапе открытия, так что это определенно нужно подтвердить вашему клиенту.
Pro-tip: Чтобы избежать сюрпризов в будущем, попробуйте использовать анкету для клиентов, которая охватывает все, что вам нужно знать о бренде и существующих цветовых схемах. Эти 9 основных вопросов (плюс бесплатный шаблон!) Помогут вам начать с правильного пути.
Основная цель брендинга — сделать его легко узнаваемым, и цвет играет в этом огромную роль.Независимо от того, работаете ли вы с устоявшимся брендом или начинаете с самого начала, выбранные вами цвета будут влиять на выделение вас среди конкурентов.
Бренд представляет бизнес и то, как он воспринимается на рынке.
«Выбор цвета всегда должен соответствовать ценностям бренда. ”
Консультации для известных брендов
Начиная проект веб-дизайна, вы можете работать с известным брендом. Независимо от того, на каком этапе находится клиент, постарайтесь помнить о том, что уже признано на рынке (и, следовательно, не должно меняться) и какие есть возможности для изменений.
Например, возьмите Coca-Cola, один из самых популярных брендов в мире. Какой цвет приходит на ум?
Большинство людей скажут красный. Потребители привыкли видеть этот бренд в магазинах, ресторанах и других местах. Чтобы оставаться в бренде, веб-сайт Coca-Cola включает красный цвет, чтобы он соответствовал общему бренду. Однако сплошным красным веб-сайтом будет непросто пользоваться, поэтому есть другие акцентные цвета (например, черный и белый). Красный цвет является доминирующим, а акцентные цвета создают ощущение цельности.
Весьма вероятно, что у признанных брендов есть задокументированные руководства по бренду, в которых живут любые правила цветовой палитры. Если это так с вашим клиентом, выбор цветовой схемы для его веб-сайта будет в некоторой степени предопределен. Но как дизайнеру, все же есть шанс, что вам нужно будет выбрать второстепенные цвета или проверить визуальное воздействие в своем дизайне, чтобы найти идеальное сочетание.
Совет для новых брендов
Для новых брендов (или уже существующих брендов, проходящих полный редизайн), возможно, еще не существует рекомендаций по цвету, особенно если веб-сайт создается впервые.Если вы оказались в такой ситуации и вам необходимо разработать правила использования бренда, важно продумать цветовую схему, прежде чем полностью запустить веб-сайт. Вы всегда можете протестировать и изменить что-то позже, но это поможет сначала просмотреть макеты цветовой схемы, прежде чем создавать ее.
Ознакомьтесь с 13 основными тенденциями дизайна
В этом году так много тенденций в веб-дизайне, что трудно понять, что такое именно , а какая общая тема в мире дизайна.
Смотрите здесь 13 главных тенденций!
Определение вашего целевого рынка (и его реакции на цветовые схемы)
Это наиболее важное исследование, которое необходимо сделать перед разработкой вашей цветовой схемы. Цвет очень субъективен, и вы (или ваш клиент) можете обнаружить, что ориентируетесь на цвета, которые вам нравятся или которые сейчас модны. Но важно в первую очередь учитывать посетителей сайта, а не зацикливаться на личных цветовых предпочтениях.
Подумайте, кто ваша целевая аудитория и какие потребности у нее есть.Например, вы ориентируетесь на более старшую аудиторию? Если это так, то убедитесь, что они могут легко просматривать содержимое, является ключевым моментом. Цветовой контраст, более крупный текст (возможно, даже более жирный) и четкие обозначения элементов, требующих выполнения, должны быть запланированы в процессе разработки.
Что делать, если ваша аудитория моложе? Визуально интересная цветовая палитра, яркая и игривая, поможет им оставаться вовлеченными. Контент сайта также должен быть интересным, но цвет будет играть большую роль.
Не забывайте сохранять непредвзятость и позвольте исследованиям сообщить вам окончательные цветовые решения.
Психология цвета
При выборе цветовой схемы веб-сайта не забывайте о психологии цвета и о том, какое влияние цвет может оказать на эмоции посетителей вашего сайта. Хотя соблюдение «правил» психологии цвета не является обязательным, это может помочь вам сосредоточиться на сообщении и чувстве, которое вы хотите передать своим сайтом.
Например, часто клиенты говорят что-то вроде: «Мне очень нравится фиолетовый цвет, и я хочу использовать его на своем веб-сайте.«Сиренево-фиолетовый — красивый цвет, но если вы разрабатываете веб-сайт для компании по производству мужских инструментов, он может быть не лучшим вариантом.
Вот обзор психологии цвета и того, что означают разные цвета:
- Красный: Яркий цвет, вызывающий сильные эмоции. Своей интенсивностью он создает ощущение безотлагательности.
- Оранжевый: Веселый и уверенный, оранжевый передает идею энтузиазма. Однако это также может показаться цветом предостережения.
- Желтый: Желтый, как и оранжевый, дает ощущение бодрости. Он олицетворяет оптимизм и обычно привлекает внимание. Однако следует учитывать, что некоторые оттенки могут утомлять глаза.
- Зеленый: Символизирует рост и природу. Это означает здоровье, безмятежность и умиротворение. Это связано с богатством.
- Синий: Этот цвет ассоциируется с водой и дает ощущение спокойствия и безмятежности. Синий создает чувство безопасности и доверия и часто используется в корпорациях.
- Бирюза: Изысканный, а также связанный с исцелением.
- Фиолетовый: Цвет богатства и успеха. Это яркий цвет, но он также олицетворяет творчество.
- Коричневый: Дружелюбный, землистый, обычно обозначает природу.
- Черный: Цвет, создающий изысканное ощущение. Мы часто думаем о «элегантных» брендах из-за их исключительности и загадочности.
- Серый: Обеспечивает ощущение безопасности, надежности и интеллекта.
- Белый: Обеспечивает ощущение чистоты или нейтральности. Это ключевой цвет, потому что он добавляет пространство для передышки и так называемое «белое пространство».
Своей интенсивностью он создает ощущение безотлагательности.Примечание: Это написано с точки зрения США. Создавая глобальный дизайн, обязательно проведите исследование, потому что цвета будут иметь разное значение в разных частях мира.
Это очень сжатое объяснение психологии цвета, но оно должно дать вам хорошее начало.
Как выбрать цветовую схему
Теперь, когда вы обдумали весь контекст цветов, следующий шаг — начать с ключевого цвета бренда; основной.Как только это будет определено, вы можете начать думать о вторичных цветах.
Окончательное количество цветов в вашей схеме будет варьироваться от бренда к бренду, но выбор трех — хорошее место для начала. Вы должны убедиться, что цвета не противоречат друг другу, а экран не становится слишком хаотичным.
Имейте в виду, что у вас будут дополнительные цвета, например нейтральные для текста, фона и других второстепенных элементов. Они также должны согласовываться с вашими основными и акцентными цветами.Когда вы просматриваете свои любимые веб-сайты, вы можете заметить белый, серый или вариации основных цветов (светлые, светлые или темные варианты).
Инструменты для выбора цветовых решений
Если вам нужна помощь в выборе окончательной цветовой схемы, существует множество инструментов, которые помогут вам в ее планировании.
Эти генераторы цветовых схем сайта бесплатны и просты в использовании:
Этот генератор цветовой палитры хорош тем, что имеет несколько различных режимов, например имитацию дальтоника.Это полезно для того, чтобы увидеть, как разные посетители будут рассматривать вашу цветовую схему, что особенно полезно, если у вас нет возможности проводить много личного пользовательского тестирования на сайте.
Этот удобный инструмент отлично подходит для тестирования разных цветов рядом друг с другом. Благодаря интерфейсу перетаскивания, он позволяет вам не только настраивать цветовую палитру, но и перемещать объекты, чтобы увидеть, что лучше всего выглядит или конфликтует рядом с другим цветом.
Этот красочный инструмент от команды Canva — отличный ресурс для выбора новой палитры и изучения теории цвета! Это поможет вам обнаружить различные комбинации, основанные на этих теориях, чтобы вы знали, что ваше решение подкреплено искусством и наукой.
Как применить ваши цвета к вашему сайту
А теперь самое интересное: собственно, приступаем к реализации вашей цветовой схемы! Однако, прежде чем зайти слишком далеко, важно рассмотреть несколько моментов, чтобы убедиться, что вы покрыты всем.
Контрастность и доступность
Если вы пробуете несколько идей или планируете окончательную схему, важно убедиться, что цветовая схема будет работать для всех пользователей вашего сайта. Например, убедитесь, что между элементами сайта и фоном достаточно контраста, чтобы дальтоникам было легко различать разные части.
Есть несколько инструментов, которые помогают с этим типом тестирования, но Contrast Checker довольно прост в использовании.
Где использовать определенные цвета
После того, как вы создали цветовую схему и проверили ее на доступность, как на самом деле воплотить ее в жизнь? Не существует единого стандартного метода, который работает для каждого проекта, но есть несколько полезных вещей, о которых стоит подумать.
Хорошая отправная точка — разбить вещи на основной цвет, второстепенные цвета и нейтральные цвета.
- Основной цвет : здесь внимание пользователя. Для призыва к действию, кнопок и любой другой важной информации должен использоваться основной цвет.
- Дополнительный цвет : Дополнительные цвета используются для выделения менее важных элементов. Вспомогательные кнопки действий, менее важный текст и все остальное, что не требует немедленного внимания, должны быть выделены второстепенным цветом.
- Нейтральные / дополнительные цвета : Нейтральные цвета обычно используются для текста, фона или всего, что не требует привлечения внимания.
Объединение всех этих цветов поможет вам создать гармоничный веб-сайт. Затем, когда ваши цвета станут привычными, важно, чтобы они последовательно использовались во всех маркетинговых каналах.
Вдохновляющие цветовые схемы веб-сайтов в 2019 году
И последнее, но не менее важное: я оставлю вам немного вдохновения, чтобы начать творческий мозговой штурм с использованием цветовой схемы!
Вокин
Это глобальное цифровое агентство предлагает смелую, но простую цветовую палитру, в которой используется цвет года по версии Pantone «Живой коралл.
«Мне нравится использование одного основного цвета (кораллового) поверх двух нейтральных (светло-серого и белого) для создания минималистичного дизайна с максимальным цветовым воздействием.
Студия Style Maker
Эта цветовая схема склоняется к традиционному женскому ощущению, которое может дать розовый, но компенсирует его использованием черного в качестве дополнительного жирного цвета (а не только для текста). Цветовая палитра поддерживается более светлым оттенком розового, который также присутствует повсюду, для создания утонченного монохромного ощущения.
Джейсон Эндрюс
Сайт-портфолио Джейсона Эндрюса яркий и смелый, но он уравновешен его работами: простые, черно-белые макеты (с редкими всплесками синего).Хотя создание такого большого контраста не сработает для всех сайтов, это, безусловно, незабываемый опыт для его личного бренда!
Кайл Рибант
Этот сайт использует очень простую цветовую схему. Фактически, единственный цвет — это фон, который переключается между несколькими светлыми (почти пастельными) цветами. Если вы застряли, пытаясь расположить цвета рядом друг с другом, это хорошее напоминание о том, что иногда лучше меньше, да лучше.
Для еще большего вдохновения вы всегда можете взглянуть на доску цветовой схемы на Pinterest!
Чтобы все настроить, в процессе веб-дизайна потребуется метод проб и ошибок, и это нормально.С помощью нескольких советов и приемов и четкого плана становится проще создать работающую цветовую схему веб-сайта. Осознание того, что является первичным, вторичным и где это вписывается в дизайн, поможет вашим пользователям определить, какие действия им нужно предпринять на вашем веб-сайте.
Получите больше результатов, которые вы ищете, с помощью своих плагинов! Мы исследовали, протестировали и скомпилировали лучшие плагины для WordPress, которые должен использовать каждый веб-дизайнер! Независимо от того, ищете ли вы новый плагин для защиты от спама, конструктора страниц или SEO, этот исчерпывающий список предлагает немного каждого плагина для ваших нужд WordPress.
Это 20 лучших плагинов для дизайнеров WordPress, любимых нами, нашими клиентами и клиентами наших клиентов. Полный список читайте здесь!
Data Viz Color Palette Generator (для диаграмм и информационных панелей)
Как использовать
Используйте средство выбора палитры, чтобы создать серию цветов, которые находятся на визуально равноудаленных . Это полезно для многих визуализаций данных, таких как круговые диаграммы, сгруппированные гистограммы и карты.
Примечание: кроме режима палитры есть еще два режима — обратите внимание на шкалы с одним оттенком и с расходящимися шкалами.
Создание визуально равноудаленных палитр вручную практически невозможно, но чрезвычайно важен для визуализации данных. Почему? Когда цвета визуально не равноудалены, труднее (а) отличить их друг от друга на диаграмме и (б) сравнить диаграмму с ключом. Я уверен, что все мы видели диаграммы, где вряд ли можно использовать ключ, поскольку цвета данных очень похожи.
Например, Google Analytics выполняет ужасную работу со следующим:
Просто попробуйте использовать этот ключ.Попробуй.Лучше использовать диапазон оттенков , чтобы пользователям было проще делать перекрестные ссылки с ключом. Нашему мозгу гораздо проще отличить, скажем, желтый от оранжевого , чем синий от синего, но на 15% светлее .
Ах! Намного лучше.Эта палитра цветов позволяет указать обе конечные точки палитры. Вы можете выбрать хотя бы один цвет бренда, что дает вам значительную гибкость в создании палитры, которая будет работать для ваших визуализаций, но при этом настраиваться для вашего бренда.
Вот несколько советов, как получить лучшую палитру:
- Попробуйте выбрать очень разных цветов конечных точек — например, один теплый, один прохладный; один яркий, другой темный — так что ваша палитра охватывает более широкий диапазон
- Если вы используете фирменный цвет для одной конечной точки, не бойтесь немного изменить насыщенность и яркость , если это создаст более приятную палитру. Пользователи узнают цвет вашего бренда по оттенку , гораздо больше, чем , чем по его точной насыщенности / яркости.
- Для визуализации данных, где вы показываете силу одного значения , попробуйте вместо этого использовать генератор палитры одного оттенка.
Пользователи узнают цвет вашего бренда по оттенку , гораздо больше, чем , чем по его точной насыщенности / яркости.Ох, и …
Подробнее о цвете
Если вы новичок в использовании цвета в дизайне пользовательского интерфейса, я настоятельно рекомендую следующие ресурсы:
Так или иначе, я создал это как инструмент, который мне хотелось бы иметь для создания палитр визуализации данных.Есть ли в нем еще одна особенность? Дай мне знать.
Использование цвета | Система веб-дизайна США (USWDS)
Жетоны дизайна
Цвет — практичный и эмоциональный инструмент. Он передает индивидуальность, задает тон, привлекает внимание и указывает на важность.
Введение
USWDS организует свои жетоны цветов в жетоны тем, жетоны состояния и жетоны системы. Системные жетоны — это полный набор цветов, доступных для USWDS.Жетоны проекта — это меньшее по размеру подмножество, основанное на ролях, адаптированное к индивидуальности, тону и потребностям вашего проекта. Он будет использовать только несколько цветовых семейств из более широкого набора из 24 цветовых семейств, доступных в наборе системных маркеров.
Используйте цветные маркеры USWDS и по возможности избегайте нестандартных цветов. В конечном итоге, когда есть согласованность между сайтами и сервисами, это улучшит взаимодействие с пользователем во всех государственных учреждениях. Конечно, ваша миссия, потребности проекта и потребности пользователей всегда на первом месте, но если вы планируете внести свою работу обратно в систему, что помогает системе учиться, адаптироваться и улучшаться, эта работа должна соответствовать системным стандартам и стандартам.
использовать токены USWDS.
Цвет, семейство цветов и сорт
В нашей документации и руководствах мы будем использовать термины цвет, семейство цветов и сорт, но что мы имеем в виду, когда используем их?
Цвет — это любой конкретный образец в наших палитрах токенов, например красный-50 , primary-base или indigo-warm-60v .
Цветовое семейство — это группа цветов, имеющих одинаковый оттенок на цветовом круге (см. Цветные круги USWDS ниже).Они содержат несколько отдельных цветов, различающихся яркостью или насыщенностью каждого отдельного цвета. Семейство цветов токенов системы обычно представляет собой обычное название цвета, например красный или теплый синий , а семейство цветов токенов темы — это ролевое имя, например первичный .
Оценка — это способ выразить, насколько светлый или темный цвет. USWDS использует 100-балльную шкалу для обозначения оценки, где 0 — чистый белый цвет, а 100 — чистый черный цвет.Мы упорядочили эти оценки по цветовым семействам: цвет класса 50 в одном цветовом семействе должен иметь тот же уровень яркости, что и цвет класса 50 в другом цветовом семействе. Это имеет важные последствия для цветового контраста и доступности, которые мы обсудим позже.
Цвет и доступность
Color — мощное средство, но ненадежное — его эффекты непостоянны и непредсказуемы для популяции. Примерно 0,5% взрослых женщин и 8% взрослых мужчин (4.5% от общей численности населения) имеют некоторую нечувствительность к цвету. Нечувствительность к цвету может затруднить различение оттенков (наиболее распространенная форма — дальтонизм на красный / зеленый), а некоторые редкие условия вообще препятствуют восприятию оттенка. Обычные проблемы со зрением, такие как близорукость, близорукость и астигматизм (среди прочего), также влияют на то, насколько хорошо люди воспринимают цвет и контраст.
Доступность — не особый случай. Во втором квартале 2018 года сайты, использующие USWDS, превысили 1,4 миллиарда просмотров страниц.4,5% из 1,4 миллиарда — это около 60 миллионов просмотров страниц. Когда дело доходит до доступности, широкое и всеобъемлющее мышление — это не просто хорошая идея, это наша миссия и ответственность.
Раздел 508, который соответствует уровню AA WCAG 2.0, устанавливает юридический стандарт необходимого уровня контрастности между текстом и его фоном. Базовый стандарт контрастности AA составляет 4,5: 1 для большей части текста и 3: 1 для крупного текста (19 пикселей + полужирный или 24 пикселей + обычный текст).
Доступные сочетания цветов
USWDS помогает командам выбирать доступные цвета с помощью системы цветовой оценки.Давайте посмотрим на семейство цветов серый в классах 5–90 (оценка 0 — белый ):
Вверху: Каждая цветовая семья имеет десять градаций от 5 до 90. Чистый белый эквивалентен сорту 0, а чистый черный эквивалентен сорту 100.
Магическое число
Мы называем разницу в оценке между любыми двумя цветами магическим числом . Магические числа имеют важное значение контраста:
- Магическое число 40+ приводит к WCAG 2.0 AA Контрастность крупного текста (пример:
серый-90ииндиго-теплый-50v). - Магическое число 50+ приводит к контрасту WCAG 2.0 AA или контрасту большого текста AAA (пример:
серый-90икрасный-40). - Магическое число 70+ приводит к контрасту WCAG 2.0 AAA (пример:
серый-10икрасный-80). - Цвета класса 50 , указанные в разделе 508 AA, контрастируют как с чисто белым (класс
0), так и с чисто черным (класс100).
Используйте магические числа USWDS для выбора доступных цветовых комбинаций из любой палитры и цветового семейства.
Магическое число USWDS работает, потому что каждый класс соответствует определенному диапазону значений относительной яркости. Цветовой контраст WCAG и Section 508 рассчитывается как отношение относительных яркостей двух цветов, поэтому, пока наши цвета попадают в определенный диапазон яркости для каждого класса, соотношение будет соответствовать требованиям контрастности.
| сорт | минимальная яркость | максимальная яркость |
|---|---|---|
0 | 1.000 | 1.000 |
5 | 0,850 | 0,930 |
10 | 0,750 | 0,820 |
20 | 0,500 | 0,650 |
30 | 0.350 | 0,450 |
40 | 0,250 | 0,300 |
50 | 0,175 | 0,183 |
60 | 0,100 | 0,125 |
70 | 0.050 | 0,070 |
80 | 0,020 | 0,040 |
90 | 0,005 | 0,015 |
100 | 0,000 | 0,000 |
Доступные примеры сочетания цветов
Вверху: Поскольку 90-50 = 40 , на фоне серый-90 используйте классы 40 и ниже, чтобы обеспечить контраст раздела 508 AA.
Для крупного текста допустимы оценки 50 и ниже.
Выше: Система цветовой градации работает для всех цветовых семейств.
Цвет, контраст и читаемость
Читаемость — это легкость, с которой читатель может понять письменный текст. Это сложное явление, на которое помимо цвета и контрастности влияет множество факторов, включая (но не ограничиваясь) размер шрифта, шрифт, длину строки, высоту строки, пробелы, выбор слов, дизайн контента и стиль письма.Проблемы с удобочитаемостью могут быть особенно важны, если ваш сайт содержит документацию или подробный текст, требующий концентрации.
Но когда дело доходит до цвета, обратите внимание на следующие общие рекомендации:
- Раздел 508 AA + цветовой контраст помогает при дальтонизме и цветовосприятии.
- Избегание чисто черного текста на белом помогает при дислексии, синдроме Ирлена, светочувствительности и аутизме.
- Лучшая комбинация — это максимальный цветовой контраст белого / светлого текста на черном / темном фоне, который, кажется, визуально подходит для всех.
- Наилучший вариант, когда это возможно, — предоставить пользователям возможность выбирать собственный цвет текста и фона.
Цветные диски USWDS
Следующие ниже цветовые круги позволяют визуализировать всю палитру системы USWDS и ее рубрику именования цветовых семейств. Цветовые круги расположены вокруг 360 ° цветовой модели HSL. Каждое цветовое семейство помечено своим положением (в градусах) на этой модели. Как правило, цвета внутри цветовых семейств остаются близкими к указанному значению оттенка, но это настраиваемая палитра, не генерируемая алгоритмом.Изменение оттенка внутри цветовых семейств является преднамеренным — мы пытаемся найти хорошие цвета, а не только те, которые соответствуют функции.
Вверху: Колесо цветных маркеров стандартной системы USWDS
Вверху: Колесо жетонов системы ярких цветов USWDS
Общее руководство по цвету
Если мы используем цвет намеренно, последовательно и осмотрительно, это может существенно повлиять на то, как люди понимают наши страницы, наши продукты и услуги и наше сообщение и связываются с ними.
Цвет является важным компонентом визуального и эмоционального познания, и именно поэтому его трудно использовать правильно: то, что является сильным и уверенным для одного человека, может раздражать или тревожить другого.
Старт в черно-белом цвете. Начните с основной идеи и используйте шкалу типов и иерархию, чтобы проверить и уточнить ее эффективность. Затем добавьте цвет, чтобы поддержать это сообщение. Цвет может затруднить интерпретацию, и, поскольку примерно 4,5% населения имеют некоторую нечувствительность к цвету, важно не полагаться на цвет при передаче информации, важной для вашего сообщения.
Ставьте практическое выше эмоционального. Поскольку цвет может на многое, фокусировка может быть разумной. Ограничьте сложность цвета, сконцентрировавшись в первую очередь на функциональных требованиях (например, состояниях или направлениях). Затем используйте цвет в качестве постепенного улучшения, чтобы усилить или сбалансировать эмоциональные потребности контента. Тем не менее, имейте в виду, что эффекты цвета часто являются личными и культурными в большей или большей степени, чем физиологическими. Поймите, что использование цвета для оптимизации тона обязательно исключает тонкими и не очень тонкими способами.
Используйте доски настроения в качестве руководства. Получить подходящие цветовые палитры может быть непросто, и имеет смысл позволить существующим цветам и палитрам быть вашим ориентиром. Соберите изображения из других источников, которые вызывают желаемый тон, чтобы найти общие черты. Затем найдите близкие совпадения в системной палитре, чтобы помочь создать свою тему.
Спросите визуальных дизайнеров. В вашей группе или агентстве могут быть визуальные дизайнеры в штате или в качестве подрядчиков. Они могут быть бесценным ресурсом для создания палитр или получения отзывов о существующих.USWDS использует коллективный опыт визуальных дизайнеров из разных агентств для создания нашей системной палитры и предоставления ряда готовых палитр тем проекта.
Если у вас есть ресурсы для визуального дизайна, используйте их.
Не используйте цвет исключительно для передачи смысла. Даже контраст, соответствующий Разделу 508, не гарантирует, что цвета будут различимы для значительного процента вашей аудитории. Примерно 0,5% взрослых женщин и 8% взрослых мужчин имеют некоторую нечувствительность к цвету, особенно между красным и зеленым.Цвет следует использовать только как прогрессивное улучшение — если цвет является единственным сигналом, этот сигнал не пройдет должным образом для всех.
Список литературы
Что такое теория цвета? | Фонд дизайна взаимодействия (IxDF)
Выбор наилучшего сочетания цветов для интерактивного макета — это, как может показаться, не игра в угадывание. Зная, какие из них использовать, вы сэкономите время (и избавитесь от головной боли). Если вы сделаете это правильно, ваши пользователи останутся на связи.
С первых дней развития искусства и дизайна использование цвета следовало многим правилам и рекомендациям, которые вместе известны как теория цвета .
Цветовая схема — один из первых элементов, передающих идею дизайна как на визуальном, так и на психологическом уровне. На самом деле цветовая гамма — один из важнейших элементов; это потому, что при правильном использовании цвет может отражать нишу и даже общую маркетинговую стратегию бизнеса.
В этой статье мы кратко рассмотрим различные цветовые классификации, чтобы освежить вашу память о тех классах графического дизайна, которые вы посещали в университете. Мы уверены, что этот контент будет не только звонком, но и вдохновит вас на творчество.
Цветовой круг
Отношения между цветами можно показать с помощью цветового круга.
Цветовой круг показывает связи между разными цветами на основе красного, желтого и синего содержимого каждого цвета. Впервые он был разработан сэром Исааком Ньютоном в 1666 году.
Автор / правообладатель: Maximkaaa.
Условия авторского права и лицензия: Public Domain
Самый полезный и наиболее часто используемый вариант цветового круга показан на изображении выше, который включает красный, красно-оранжевый, оранжевый, оранжево-желтый, желтый, желто-зеленый, зеленый, зелено-синие, синие, сине-пурпурные, пурпурные и пурпурно-красные сочетания.(Камень, 2008).
Блейхер (2011) заявил, что цветовое колесо можно разделить на три основных типа цветов на основе комбинации основных цветов, используемых для создания окончательного цвета, следующим образом:
- Основные цвета — желтый, красный и синий. Это основные цвета, которые нельзя разделить на более простые цвета.
- Дополнительные цвета — создаются путем смешивания двух основных цветов. Вторичные цвета — оранжевый, зеленый и фиолетовый.Смешивание желтого и красного дает оранжевый; смешивание синего и желтого дает зеленый цвет, а смешивание синего и красного дает фиолетовый.
- Промежуточные или третичные цвета создаются путем смешивания первичных и вторичных цветов для образования гибрида, например желто-оранжевого, красно-оранжевого, красно-пурпурного, сине-пурпурного, сине-зеленого и желто-зеленого. На цветовом круге большего размера, чем показанный выше, смесь промежуточных, вторичных и основных цветов создаст четвертичные цвета.
Тщательное понимание цветового круга и взаимосвязи между цветами позволяет дизайнерам лучше понимать цвет и знать, как выбирать цвета для своего дизайна.Мы скоро к этому вернемся.
Достижение гармонии в цвете
Цвета должны быть выбраны так, чтобы обеспечить повышенную эстетическую привлекательность и удобство использования. Это означает, что неплохо подумать о том, какую цветовую схему вы будете использовать в начале процесса дизайна. То, как сочетаются цвета, может либо улучшить внешний вид, либо ухудшить его.
Автор / правообладатель: Неизвестен.
Условия авторского права и лицензия: Неизвестно
Согласно Bleicher (2011), существует пять основных цветовых схем (а также некоторые комбинации и варианты этих схем), которые позволяют дизайнерам достичь гармонии в своих проектах:
Монохроматическая схема
монохроматическая схема основана на цветах, созданных из разных оттенков (созданных путем добавления черного или белого к исходному цвету), тонов и оттенков одного оттенка.Теоретически это самая простая из всех схем. Монохроматическая схема обычно используется в минималистичных дизайнах, потому что один оттенок должен приводить к менее отвлекающему макету.
С другой стороны, эта схема означает, что вы не можете использовать несколько цветов для облегчения визуализации информации в пользовательском интерфейсе (UI). Это единственная цена простоты.
Аналогичная цветовая схема
Аналогичная схема основана на трех цветах, расположенных рядом друг с другом на цветовом круге (например,г., красный, красно-оранжевый и красно-фиолетовый). Эту схему легко найти в природе — представьте себе деревья осенью, когда листья меняют цвет.
Есть вариант этой схемы, аналог «high-key». Это достигается путем смешивания ваших аналогичных оттенков с белым. Эта версия обычно встречается в искусстве импрессионизма, особенно в раннем искусстве импрессионизма. Достигается эффект, при котором цвета кажутся «переливающимися» и «размытыми» друг в друге — если смотреть с расстояния, это может создать иллюзию того, что используется только один цвет.
Дополнительные схемы
Дополнительные цветовые схемы используют одну (или несколько) пар цветов, которые при объединении «компенсируют друг друга». Например, когда вы комбинируете два цвета, получается белый или черный (или что-то очень похожее на шкале серого). По этой причине эта схема также известна как схема «противоположных цветов».
Когда вы кладете два дополнительных цвета рядом друг с другом, они показывают наибольший контраст.
В современной теории цвета используются пары красный / голубой, зеленый / пурпурный и синий / желтый.
Раздельно-дополнительная (иногда «Составная гармония») Схема
Это комбинация использования дополнительной цветовой схемы и аналогичной цветовой схемы. По сути, выбираются дополнительные цвета, а затем цвета по обе стороны от них на цветовом круге также используются в дизайне. Считается, что это смягчает воздействие дополнительной цветовой схемы, которая в некоторых ситуациях может быть слишком смелой или слишком резкой для глаза зрителя.
Триадный
Триадическая схема основана на использовании трех цветов на равном расстоянии друг от друга на цветовом круге.Самый простой способ найти триадную схему — поставить равносторонний треугольник на колесо так, чтобы каждый угол касался одного цвета. Три цвета будут расположены точно на 120 ° друг от друга.
Эти схемы считаются яркими (даже если сами оттенки нет) — они сохраняют гармонию, но обеспечивают высокий уровень визуального контраста. Вы можете найти триадические схемы во многих произведениях искусства, поскольку с помощью триадной схемы легче добиться приятного визуального результата, чем при использовании дополнительной схемы.
Tetradic
Tetradic схемы используют два набора дополнительных пар: четыре цвета. Они могут создавать очень интересные визуальные впечатления, но их трудно поддерживать в равновесии. Почему? Это потому, что один цвет тетрадной схемы должен преобладать над другими цветами, не подавляя их полностью. Равное количество каждого цвета часто приводит к очень неловкому виду, а это последнее, что вы хотите, чтобы ваши пользователи видели.
Квадрат (вариант тетрадика)
Квадратная схема — это вариант тетрадной схемы.Вместо того, чтобы выбирать две дополнительные пары, вы помещаете квадрат на цветовом круге и выбираете цвета, лежащие в его углах. Таким образом, вы найдете четыре цвета, равномерно разнесенные под углом 90 ° друг от друга.
В отличие от четырехцветной цветовой схемы, этот подход часто работает лучше всего, когда все цвета равномерно используются во всем дизайне.
Цветовая температура
Цвета можно использовать для передачи эмоционального контента, а также для улучшения внешнего вида вашего веб-сайта. Сейчас мы говорим о перемещении людей, о пробуждении страстей и чувств у наших пользователей.Здесь стоит отметить, что культура, пол, опыт людей и т. Д. Также будут влиять на то, как цвета будут резонировать с ними, и что исследования пользователей являются лучшим индикатором эмоциональной реакции на цвет, чем следующие рекомендации, основанные на цветовом круге. Например, знаете ли вы, что в Китае красный цвет распространен, потому что он символизирует счастье и процветание, а белый цвет считается погребальным или символизирует несчастье? Кроме того, китайская культура имеет уникальный цвет — qing — что-то вроде голубовато-зеленого серого, или «grue».В Греции желтый цвет означает печаль, а красный — это понятие в Южной Африке. Цвет — это большая проблема в том, как люди из разных уголков мира интерпретируют ваш дизайн. Небольшое исследование имеет большое значение.
Однако, если вы хотите следовать подходу цветового круга, есть три индикатора цветовой температуры: «теплый», «холодный» и «нейтральный»:
- Теплые цвета — Это цвета, расположенные на половине цветовой круг, включающий желтый, оранжевый и красный.Считается, что эти цвета отражают такие чувства, как страсть, сила, счастье и энергия.
- Холодные цвета — Это цвета, расположенные по другую сторону цветового круга, включая зеленый, синий и фиолетовый. Считается, что холодные цвета отражают спокойствие, медитацию и успокаивающие впечатления.
- Нейтральные цвета — Не сказано, что они отражают какие-либо особые эмоции. Эти цвета включают серый, коричневый, белый и черный.
Ваш выбор цветовых категорий будет зависеть от того, чего вы пытаетесь достичь с помощью своего веб-сайта.
По возможности всегда следует тестировать свои цветовые палитры с пользователями, чтобы убедиться, что сделанный вами выбор отражает их реалии. Почти всегда легче установить и протестировать цветовую палитру на ранних этапах процесса разработки, чем в конце. Помимо всего прочего, это может сэкономить ваше драгоценное время.
The Take Away
Цвет, несомненно, является важной частью эстетической привлекательности дизайна. Основание вашей цветовой палитры на одной из существующих цветовых схем может облегчить достижение правильного баланса с самого начала.
Цветовой круг — это основной инструмент, созданный сэром Исааком Ньютоном в 1666 году. В нем мы находим:
- Основные цвета
- Вторичные цвета
- Промежуточные или Третичные цвета
Мы должны стремиться точно настроить наш выбор цветов, чтобы создать максимальную гармонию, учитывая в то же время следующее, чтобы выбрать наиболее подходящую схему:
- Монохроматическая схема
- Аналогичная цветовая схема
- Дополнительные схемы
- Сплит-комплементарные (составная гармония) схема
- Триадические
- Тетрадические
- Квадратные
Цветовая температура — еще одно важное соображение; это та роль, которая может заинтересовать людей и заставить их увлечься нашей работой.Вы всегда должны проводить пользовательское тестирование цветовых схем, если это возможно, а в идеале — в начале процесса проектирования. Кроме того, всегда помните, что цвета имеют множество культурных коннотаций, поэтому убедитесь, что вы знаете о них!
С другой стороны, помните, что вы должны передавать , а не , то есть , только с цветом. Около 8% людей, в основном мужчины, страдают дальтонизмом, и цвет не всегда доступен.
Даже в этом случае цвет — это инструмент, который может улучшить другие элементы вашего дизайна.Считайте его крупным ингредиентом, который может оживить вашу работу и привлечь ваших пользователей, заставив их больше заботиться о вашем продукте, услуге или сообщении.
Где узнать больше
Ссылка
Изображение героя: Автор / Правообладатель: Джордж Филд. Условия авторского права и лицензия: Public Domain.
цветов — Ant Design
Цветовая модель#
Команда дизайнеров Ant Design предпочла использовать цветовую модель HSB, которая позволяет дизайнерам иметь четкое психологическое представление о цвете при настройке цветов, а также облегчает общение в командах. .
Система цвета на уровне системы #
Система цвета на уровне системы Ant Design также происходит из «естественного» языка дизайна. Дизайнеры абстрагируют естественные сцены с помощью захвата в сочетании с техническим геном Ant Financial, формируя уникальные 12 цветов. В результате большого количества наблюдений, чтобы запечатлеть различные цвета естественного света в соответствии с законом изменения, с искусством рисования идей были получены 12 цветов. Определение нейтральной цветовой палитры сбалансировано с удобочитаемостью, эстетикой и удобством использования.
Базовые цветовые палитры #
Базовая цветовая палитра Ant Design насчитывает 120 цветов, включая 12 основных цветов и их производные. Эти цвета могут в основном включать потребность в цвете в дизайне фоновых приложений.
Пыльно-красный / 薄暮 斗志 、 奔放
красный-1
красный-2
красный-3
красный-4
красный-5
красный-6
красный-7
красный-8
красный-9
красный-10
вулкан / 火山 醒目 、 澎湃
вулкан-1
вулкан-2
вулкан-3
вулкан-4
вулкан-5
вулкан30003
вулкан -7
вулкан-8
вулкан-9
вулкан-10
Оранжевый закат / 日暮 温暖 、 欢快
оранжевый-1
оранжевый-2
оранжевый-3
оранжевый-4
оранжевый- 5
оранжевый-6
оранжевый-7
оранжевый-8
оранжевый-9
оранжевый-10
Calendula Gold / 金盏花 活力 、 积极
gold-1
gold-2
gold -3
золото-4
золото-5
золото-6
золото-7
золото-8
золото-9
золото-10
Sunr ise Желтый / 日出 出生 、 阳光
желтый-1
желтый-2
желтый-3
желтый-4
желтый-5
желтый-6
желтый-7
желтый-8
желтый-9
желтый-10
лайм / 青柠 自然 、 生机
лайм-1
лайм-2
лайм-3
лайм-4
лайм-5
лайм-6
лайм -7
лайм-8
лайм-9
лайм-10
Полярный зеленый / 极光 绿 健康 、 创新
зеленый-1
зеленый-2
зеленый-3
зеленый-4
зеленый -5
зеленый-6
зеленый-7
зеленый-8
зеленый-9
зеленый-10
Голубой / 明 青 希望 、 坚强
голубой-1
голубой-2
голубой- 3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
cyan-10
Daybreak Blue / 拂晓 蓝 包容 、 科技 普惠
синий-1
синий-2
синий-3
синий-4
синий-5
синий-6
синий-7
синий-8
синий-9
синий-10
Geek Blue / 极 客 蓝 探索 、 钻研
geekblue-1
geekblue-2
geekblue-3
geekblue-4
geekblue-5
geekblue-6
geek
geekblue-9
geekblue-10
Golden Purple / 酱紫 优雅 、 浪漫
purple-1
purple-2
purple-3
purple-4
Purple-5
Purple-6
пурпурный-7пурпурный-8
пурпурный-9
пурпурный-10
пурпурный / 法式 洋红 明快 、 感性
пурпурный-1
пурпурный-2
пурпурный-3
пурпурный-4
пурпурный-4
пурпурный -5
пурпурный-6
пурпурный-7
пурпурный-8
пурпурный-9
пурпурный-10
A Цветовая палитра nt Design также может расширяться.После тщательной разработки дизайнерами и программистами мы разработали набор инструментов для создания цвета, сочетающих естественные вариации цветов. Когда возникает необходимость в дополнительном цветовом дизайне, дизайнеры просто определяют основные цвета в соответствии с определенными правилами и автоматически получают полный диапазон производных цветов.
Палитра нейтральных цветов #
серый-1
серый-2
серый-3
серый-4
серый-5
серый-6
серый-7
серый-8
серый- 9
серый-10
серый-11
серый-12
серый-13
Цветовая палитра визуализации данных #
Цветовая палитра визуализации данных основана на базовой цветовой палитре и нейтральной цветовой палитре и основана на принцип, что AntV «эффективен, ясен, точен и красив».Просмотр палитры
Инструмент создания палитры №
Если указанные выше палитры не соответствуют вашим потребностям, вы можете выбрать основной цвет ниже, и алгоритм генерации цвета Ant Design сгенерирует палитру для вас.
Выберите основной цвет
color-1 # e6f7ff
color-2 # bae7ff
color-3 # 91d5ff
color-4 # 69c0ff
color-5 # 40a9ff
color-6 #
ff
color-7 # 096dd9color-8 # 0050b3
color-9 # 003a8c
color-10 # 002766
Программное использование #
Мы предоставляем разработчикам меньше возможностей и JavaScript.
Меньше
@import '~ antd / lib / style / themes / default.less'; .selector { цвет: @ синий-5; цвет фона: @ gold-2; }Бесцветные переменные: бесцветные.
JavaScript
npm install @ ant-design / colorsimport {blue} from '@ ant-design / colors'; console.log (синий); console.log (blue.primary);Другие API: @ ant-design / colors
Система цвета на уровне продукта #
Цвет бренда #
Цвет бренда — один из наиболее интуитивно понятных визуальных элементов, используемых для отражения характеристик продукта и обмениваться идеями.