Цветовой дизайн: Дизайн в цвете. Цвет — это мощная сила в руках дизайнера — UXPUB

Содержание

Дизайн в цвете. Цвет — это мощная сила в руках дизайнера — UXPUB

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

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

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

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

Выбор цветовой палитры

Шаблон для палитры

Иногда цветовая палитра – это результат случайного вдохновения.

Но в большинстве случаев это итог системного подхода.

Определите цель

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

Спросите себя следующее:

  • Какой посыл вы хотите передать через дизайн?
  • Какова цель вашего дизайна? Быть информативным? Убеждать?
  • Какие эмоции вы хотите рождать своим дизайном у пользователей?

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

Определите свою аудиторию

Кто ваша аудитория, и как это влияет на дизайн?

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

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

Красный конверт в Китае

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

Узнайте больше о значениях цветов для разных стран и народностей в постах Психология цвета в маркетинге и брендинге и Значение цвета.

Изучите теорию цвета

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

Хороший материал для старта – Теория цвета от Design School и Цветовая теория 101 от Hubspot. Прочитайте об интересном применении теории цвета в посте Почему Facebook синий? Наука за цветами в маркетинге.

Поиск вдохновения

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

Обычным источником вдохновения для цветовых палитр являются сайты вроде Dribbble и Behance. Если вы хотите вдохновиться для конкретного стиля дизайна, например, material design, можете использовать сайт вроде MaterialUI. Эквивалент в плоском дизайне – FlatUIColors.

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

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

Дизайн интерьеров оживляет пространство с помощью цвета.

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

Корейские клипы отлично вдохновляют

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

Вдохновение повсюду, включая вашу повседневную жизнь.

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

Задайте дизайн-систему

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

В качестве примера дизайн-системы посмотрите на систему Salesforce. Больше примеров найдете в 50 дотошных руководствах по стилю, которые должен увидеть каждый стартап перед запуском.

Дизайн-система MashCreative

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

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

При выборе палитры для дизайна лучше следовать принципу KISS (Keep it simple, stupid – Делай проще, дурачок!). Чем меньше цветов, тем лучше. Для большинства систем дизайна такая структура отлично подойдет для старта:

  • Фон
  • Главный тон
  • Вспомогательный тон
  • Цвет ошибки
  • Цвет успешной операции

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

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

Состояния дизайна

Выбор цветовой палитры

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

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

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

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

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

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

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

Геометрическое представление может выглядеть примерно так.

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

Посмотрите на Airbnb, чтобы иметь представление, как цвета применяются в системах дизайна. Главный цвет в Airbnb – Rausch, который назван в честь улицы, на которой расположена сама компания. Kazan служит вспомогательным цветом, а два серых оттенка используются в качестве фоновых.

Цвета бренда Airbnb

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

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

Для сообщений об ошибках в Airbnb используется светло-красный, с натяжкой оттенок цвета rausch. Красный вместе с восклицательным знаком тут же привлекает взгляд и уведомляет о состоянии системы.

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

Начните без цветов, а затем медленно их добавляйте

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

Заключение

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

Я бы хотел знать, как вы работаете с цветами. Каков ваш процесс? Делитесь в комментариях.

Теория цвета для дизайнеров, часть 1: Значение цвета | by Nancy Pong | Цвет

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

В дизайне темно-фиолетовые цвета создают ощущение богатства и роскоши. Светло-фиолетовый выглядит более мягко и ассоциируется с весной и романтикой.

Примеры:

Темный оттенок, который здесь используется, делает упор на историческое “королевское” значение фиолетового. Такой эффект очень подходит Asprey — производителю люксовых вещей.Светлые и темные оттенки фиолетового в паре создают ощущение творчества.Яркий, с красноватым оттенком фиолетовый делает сайт богатым и энергичным.Темно-фиолетовый фон придает сайту настроение творчества.Темно-фиолетовые акценты создают ощущение эксклюзивности и утонченности.

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

Черный

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

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

Примеры:

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

Белый

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

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

Примеры:

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

Серый

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

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

Примеры:

Светло-серый цвет делает этот дизайн очень приглушенным и спокойным.Типографика делает этот сайт современным, а светло-серый фон усиливает этот эффект.Холодный серый цвет делает этот сайт утонченным и современным.Этот дизайн выглядит очень современно благодаря темно-серому фону и светло-серой типографике.Благодаря нескольким оттенкам серого, этот сайт выглядит одновременно профессионально и утонченно.

Коричневый

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

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

Примеры:

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

Бежевый и желто-коричневый

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

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

Примеры:

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

Кремовый и цвет слоновой кости

Кремовый цвет и цвет слоновой кости — достаточно утонченные цвета: в них есть чуть-чуть теплоты коричневого и много прохлады белого. Эти цвета обычно приглушенные, навевают мысли о прошлом. Цвет слоновой кости — очень спокойный; он теплее белого, но также несет ощущение чистоты.

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

Примеры:

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

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

  • Красный: страсть, любовь, гнев
  • Оранжевый: энергия, счастье, жизненная сила
  • Желтый: счастье, надежда, обман
  • Зеленый: новые начинания, изобилие, природа
  • Синий: спокойствие, ответственность, печаль
  • Фиолетовый: творчество, царственность, богатство
  • Черный: загадочность, элегантность, зло
  • Серый: угрюмость, консерватизм, формальность
  • Белый: невинность, чистота, добродетель
  • Коричневый: природа, целостность, надежность
  • Бежевый: консерватизм, набожность, скука
  • Кремовый: спокойствие, элегантность, чистота

Основы дизайна: Теория цвета — Miloskiy.com

В рамках серии статей “По стопам школы дизайна Баухауз”, мы знакомимся с основами дизайна. В данной заметке рассматриваем теорию цвета.

Иоханнес Иттен – преподаватель Баухауза в начале прошлого века – очень много времени посвятил изучению цвета. Результатом многолетних исследований стала книга “Искусство цвета”, в которой он детально рассматривает все аспекты теории цвета. О некоторых из них мы и поговорим в этом разделе.

Цвет, как таковой, не существует в природе. Он является продуктом обработки человеческим мозгом информации, которая поступает к нам через глаза в виде световой волны. Световые волны имеют различную длину, в зависимости от которой и формируется цвет.

В 1676 году Исаак Ньютон провёл эксперимент с расщеплением светового луча при помощи призмы, в результате которого он смог получить 7 чётко выраженных цветов: красный (длина волны 800-650 н/м), оранжевый (640-590 н/м), желтый (580-550 н/м), зелёный (530-490 н/м), голубой (480-460 н/м), синий (450-440 н/м), фиолетовый (430-390 н/м).

После этого учёный пропустил полученный спектр через собирательную линзу и получил белый цвет.

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

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

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

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

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

Далее, смешивая основные цвета с вторичными, мы получаем третичные цвета: желто-зелёный, желто-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зелёный, красно-оранжевый.

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

Есть несколько основных схем подбора цветов при помощи цветового круга:

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

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

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

Рекомендуем ознакомиться с другими статьями из серии “Основы дизайна. По стопам школы дизайна Баухауз”:

  • Тёмное и светлое – рассматриваем как формировать образ используя контраст тёмного и светлого

где найти и как выбрать / Skillbox Media

Различных инструментов создания палитры существует много; мы выбрали десятку самых популярных, среди которых сервисы и для начинающих дизайнеров, и для профессионалов.

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

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

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

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

Material Color Tool — сервис специально был создан в помощь дизайнерам пользовательских интерфейсов. Главная особенность в том, что выбранную цветовую палитру можно сразу применить к схеме веб-страницы и оценить, насколько удачным получится результат.

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

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

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

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

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

Цвет для чайников. Обширное руководство для начинающих.

| by Anton Guk

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

Дисперсия света

Исаак Ньютон один из первых кто смог разложить белый солнечный свет на цветовой спектр — позднее это назвали “Дисперсией света”.

Опыт заключался в следующем: он пропускал солнечный свет через призму. В ней луч света расслаивался на цвета и выводился на экран.

Обложка альбома группы Pink Floyd “Dark Side of the Moon», отображающая дисперсию света.

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

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

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

Дополнительные цвета

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

(красный + оранжевый + желтый) + (зеленый + синий + фиолетовый) = белый

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

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

Пример: Если мы удалим из спектра один цвет, к примеру красный и с помощью линзы соберем оставшееся цвета: оранжевый + жёлтый + зеленый + синий + фиолетовый, то результатом у нас будет зеленый цвет. Потому что зеленый является дополнительным цветом по отношению к удалённому нами красному. Почему именно такие соотношения “зеленый — красный” расписано ниже.

Вычитаемые цвета

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

Поглощаемые в физическом эксперименте цвета называются также вычитаемыми.

Параметры цвета

  1. Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.
  2. Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.
  3. Яркость / Brightness обозначает степень отличия цвета от белого или черного.

Что такое RGB, CMYK, HEX и чем они отличаются

RGB (Red, Green, Blue) — аддитивная (сложение) цветовая модель. Основные цвета которой красный, зеленый и синий. Это значит, что при сложении всех цветов у нас получится белый. Такая модель используется во всех электронных устройствах. Записывается в виде: rgb(0,0,0), каждый из цветов может варьироваться от 0 до 255 включительно, где (0,0,0) — черный цвет, (255,255,255) — белый. Дополнительно может добавляться четвертый параметр — аlpha канал, который означает насколько прозрачен цвет. Alpha канал может принимать значения от 0 до 1, к примеру rgba(31,104,2, 0.8).

HEX — это RGB в шестнадцатеричной системе. Выглядит таким образом #102945, первые две цифры отвечают за красный цвет, вторые за зеленый и третьи за синий. Каждый символ может принимать значения: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Где #000000 — черный цвет, а #ffffff — белый.

CMYK (Cyan, Magenta, Yellow, Key color) — субтрактивная (вычитание) схема формирования цвета. Состоит из голубого, пурпурного, жёлтого и ключевого — черного цвета. Эта модель используется в полиграфии при цветной печати. Бумага, как и все материалы, отражает свет, поэтому считают, какое количество света отразилось от поверхности. Несмотря на то, что чёрный цвет можно получать смешением в равной пропорции пурпурного, голубого и жёлтого красителей, по ряду причин (чистота цвета, переувлажнение бумаги, стоимость и др.) такой подход неудовлетворителен, поэтому используют отдельно черный цвет.

Почему мы видим цвета такими?

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

Цвет предметов возникает, главным образом, в процессе поглощения волн. Желтый сыр выглядит желтым потому, что он поглощает все остальные цвета светового луча и отражает только желтый. Когда мы говорим: «этот сыр желтый», то мы на самом деле имеем в виду, что молекулярный состав поверхности сыра таков, что он поглощает все световые лучи, кроме желтого. Сыр сам по себе не имеет никакого цвета, цвет создаётся при его освещении.

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

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

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

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

Цвет не является вербальным или рациональным. Он контекстен и эмоционален. Цвет — сильный инструмент, но сам по себе он не имеет смысла.

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

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

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

Цветовой круг по Иоханнесу Иттену (1961)

Композиционные схемы

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

Цветовая гамма в интерьере: как подобрать

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

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

Содержание:

 

Цветовая гамма в интерьере — что диктует стиль?

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

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

 

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

Если выбор стиля вызывает сложности, читайте: «Как выбрать стиль интерьера для будущей квартиры».

Желаемое настроение и цветовые пристрастия

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

Ни для кого не секрет, что психологи советуют выбирать для спальни спокойные светлые и холодные оттенки, а для кухни — теплые цвета, пробуждающие аппетит. Не нужно заучивать эти правила наизусть: подумайте, какую атмосферу вы бы хотели создать в помещении, и основа цветовой гаммы придет сама собой, на ассоциациях. Дизайнер и декоратор Ольга Розет называет это интуитивным подходом. Из рассказа о ее лекции вы почерпнете много полезного: «Цвет в интерьере: от научного подхода к интуитивному».

Выбираем основу

Основу цвета в интерьере обычно задают самые большие по площади объекты: пол, стены, потолок, крупная мебель. Но основным может быть не один цвет; будет даже лучше, если вы возьмете несколько близких оттенков, например, чуть темнее и светлее выбранного.

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

По теме:
Ultra violet: «новый черный» в интерьере

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

Выбираем акцент

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

Балансируем гамму

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

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

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

 
По теме:
Желтый в интерьере: приближаем весну

 

Проверяем цвета в реальных условиях

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

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

Больше полезного по теме

 

Фотографии: homedsgn.com, thompsonclarke.com, inmyinterior.com, mybeautifulrooms.com, home-designing.com, trendir.com, interiorbit. com, contemporaryhome.com

Дизайн интерьера, цвет, ремонт

Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем

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

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

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

На что влияет выбор цветовой палитры

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

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

50 великолепных цветовых схем для дизайна вашего сайта

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

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

1. Красочные и сбалансированные

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

2. Яркие цвета с сильным акцентом

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

3. Природные и земные цвета

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

4. Свежие и лаконичные цвета

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

5. Смелые и яркие

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

6. Черные с ярким акцентом

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

7. Стильные и утонченные

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

8. Оттенки красновато-коричневого

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

9. Мистические темные цвета

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

10. Современные и смелые

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

11.

Живые и привлекательные цвета

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

12. Поразительно простые цвета

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

13. Оттенки живого красного

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

14. Вычурные и креативные

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

15. Элегантные и доступные

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

16. Футуристические цвета

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

17. Инновационные и смелые

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

18. Текстурированные и динамичные

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

19. Теплые оттенки и минимализм

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

20. Яркие и контрастные цвета

Темно-розовый, фиолетовый и темно-синий цвета смешаны в этом красивом и привлекательном дизайне. Насыщенные неоновые оттенки действуют как акценты на темно-фиолетовом фоне, привлекая зрителей к навигационному меню, как только они открывают сайт.

21. Чистые и энергичные

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

22. Традиционная бизнес-классика

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

23. Глубокий сдержанный синий

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

24. Чистые и современные

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

25. Яркие и элегантные

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

26. Веселые и задорные цвета

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

27. Минималистичные контрастные цвета

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

28. Эффектные цвета с четким акцентом

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

29. Современные и актуальные цвета

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

30. Природные естественные цвета

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

31. Ярко-розовые и пастельные

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

32. Уникальная необычная комбинация цветов

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

33. Яркие цитрусовые цвета

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

34. Энергичные голубые и апельсиновые цвета

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

35. Оттенки бородово-красного и и синего

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

36. Дерзкие, смелые и современные

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

37. Веселые и энергичные

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

38. Снежный, но теплый

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

39. Богатство насыщенных красок

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

40. Элегантный минимализм

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

41. Простые и бесстрашные цвета

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

42. Плоские и простые цвета

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

43. Комфортный и спокойный

Это уникальное сочетание оттенков кофе с небесно-голубым и различных оттенков коричневого делает эту успокаивающую и утешительную цветовую схему: чем-то напоминающим вашу любимую кофейню или гостиную. Отлично подходит для сферы HoReCa.

44. Классический и традиционный

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

45. Популярные акцентные цвета

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

46. Серьезный корпоративный

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

47. Гламурные и стильные цвета

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

48. Привлекательный и насыщенный

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

49. Контрастные кислотные цвета

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

50. Оптимистичные, живые успокаивающие цвета 

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

Публикация адаптирована в веб-студии АВАНЗЕТ на основе опыта гуру индустрии дизайна и статьи Найоми Чибана. Вдохновляйтесь вместе с visme и найдите для себя идеальную цветовую палитру!

24.10.2021

← Поделиться с друзьями !

Permanent Color — ColorDesign Hair

Toggle navigation
  • Продукты
  • Технические характеристики
  • Salon Pros
  • Дистрибьюторы
  • Новости
  • 0 товаров: 0,00 $
ColorDesign Hair // Продукция // Permanent ColorHome / Permanent ColorIntensive
  • 0003 # 1 Черный
  • # 2 Темно-коричневый

  • # 3 Темно-коричневый

  • # 4 Коричневый

  • # 5 Светло-коричневый

  • # 6 Темно-русый

  • # 7 Блондин

  • # 8 Светлый блондин

  • # 9 Очень светлый блондин

  • # 10 Платиновый блондин

  • Extra Intensive Naturals
    • # 4.0 Extra Intenisve Brown

    • # 5.0 Extra Intensive Light Brown

    • # 6.0 Extra Intensive Dark Blonde

    • # 7.0 Extra Intensive Blonde

    • # 8.0 Extra Intensive Light Blonde

    • # 9.0 Extra Интенсивный очень светлый блондин

    Medium Naturals
    • # 5.003 Medium Natural Light Brown

    • # 6.003 Medium Natural Dark Blonde

    • # 7.003 Medium Natural Blonde

    • # 8.003 Medium Natural Light Blonde

    • # 9.003 Medium Natural Very Light Blonde

    • # 10.003 Medium Natural Platinum Blonde

    Soft Naturals
    • # 5.03 Soft Natural Light Brown

    • # 6.03 Мягкий натуральный темный блондин

    • # 7.03 Мягкий натуральный блондин

    • # 8.03 Мягкий натуральный светлый блондин

    • # 10.03 Superlift Golden Blonde

    Ash Naturals
    • # 1.10 Blue Black

    • # 4.01 Ash Natural Brown

    • # 5.01 Ash Natural Light Brown

    • # 6.01 Ash Natural Dark Blonde

    • # 7.01 Пепельный натуральный блондин

    • # 8.01 Пепельный натуральный светлый блондин

    • # 9.01 Пепельный натуральный очень светлый блондин

    Бежевый
    • # 5.32 Светло-бежевый коричневый

    • # 6.32 Темно-бежевый блондин

    • # 7.32 Бежевый блондин

    • # 8.32 Светло-бежевый блондин

    • # 9.32 Очень светлый бежевый блондин

    • # 10.32 Платиновый бежевый блондин

    Золотистый
    • # 4.3 Золотистый Коричневый

    • # 5.3 Светло-золотистый коричневый

    • # 6.3 Темно-золотистый блондин

    • # 7.3 Золотистый блондин

    • # 8.3 Светло-золотистый блондин

    • # 9.3 Очень светлый золотистый блондин

    Медный
    • # 5.4 Светло-медно-коричневый

    • # 6.4 Темно-медный блондин

    • # 7.4 Медный блондин

    • # 7.444 Экстра интенсивный медный блондин

    • # 8.4 Светло-медный блондин

    Красное дерево
    • # 5.5 Светло-красное дерево коричневый

    • # 5.55 Интенсивное красное дерево Светло-коричневый

    • # 6.5 Темный блондин красного дерева

    Рыжий
    • # 4.62 Auburn Violet Brown

    • # 5.56 Light Mahogany Auburn Brown

    • # 5.6 Light Auburn Brown

    • # 6.6 Темно-каштановый блондин

    • # 6.66 Intensive Auburn Dark Blonde

    • 9.60003 Extra 9.60003 Рыжий темно-русый
    • # 7.46 Медно-каштановый блондин

    • # 7.62 Рыжий фиолетовый блондин

    • # 7.66 Интенсивный каштановый блондин

    • # 7.666 Extra Intensive Auburn Blonde

    Violet
    • # 1.2 Violet Black

    • # 4.2 Violet Brown

    • # 5.2 Light Violet Brown

    • # 5.22 Intensive Violet Light Brown

    • 6.2
    • Фиолетовый блондин
    • # 6.222 Экстра интенсивный фиолетовый темно-русый

    Табак
    • # 4.23 Табак коричневый

    • # 5.23 Светло табачный коричневый

    • # 6.23 Dark Tobacco Blonde

    • # 7.23 Tobacco Blonde

    Gold Copper
    • # 6.34 Dark Gold Copper Blonde

    • # 7.34 Gold Copper Blonde

    • # 8.34 Светло-золотой медный блондин

    • # 9,34 Очень светлый золотистый медный блондин

    Матовый
    • # 4/2 Матовый коричневый

    • # 5/2 Светлый матовый коричневый

    • # 6/2 Темный матовый блондин

    • # 7/2 Матовый Блондин

    • # 8/2 Светлый матовый блондин

    • # 9/2 Очень светлый матовый блондин

    Шоколадный
    • # 5.77 Светло-шоколадный коричневый

    • # 6.77 Темно-шоколадный блондин

    • # 7.77 Шоколадный блондин

    • # 8.77 Светло-шоколадный блондин

    Какао
    • # 5,35 Светлый какао-коричневый

    • # 6.35 Темный какао Блондин

    • # 7.35 Какао блондин

    Superlift
    • # 10.0 Superlift Natural Blonde

    • # 10.11 Extra Superlift Ash Blonde

    • # 11.0 Superlift Golden Blonde

    • # 11.11 Super Platinum

    • # 12.0 Superlift Extra Platino (Платина)

    • # 12/11 Special Blonde Intensive Ash

    • # 12/81 Special Blonde Pearl Ash

    Corrector
    • # 1SB

    • # 1SG

    • # 1SV

    • # Blue Corrector

    • # Clear / Neutral Corrector

    • # Dark Grey

    • # Dark Grey

    • # Светло-серый

    • # Красный корректор

    • # Фиолетовый корректор

    • Желтый корректор

    • Продукция
    • Компания
    • Расположение салона
    • Условия использования
    • Контактная информация
    • Моя учетная запись

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

    9050 9 Нет товаров
    ×

    Товар добавлен в корзину!

    Товаров нет.00 ColorDesign Hair // Товары // Цвет без аммиака 4 Коричневый AF
  • # 5 Светло-коричневый AF

  • # 6 Темно-русый AF

  • # 7 Светлый AF

  • # 8 Светло-русый AF

  • # 9 Очень светлый блондин AF

  • # 10 Платиновый блонд AF

  • Ash Naturals
    • # 1.10 Синий черный AF

    • # 4.01 Пепельный натуральный коричневый AF

    • # 5.01 Пепельный натуральный светло-коричневый AF

    • # 6.01 Пепельный натуральный темно-русый AF

    • # 7.01 Пепельный натуральный блондин AF

    • # 8.01 Пепельный натуральный светлый блондин AF

    • # 9.01 Пепельный натуральный очень светлый блондин AF

    Бежевый
    • # 8.32 Светло-бежевый блондин AF

    • # 9.32 Очень светлый бежевый блондин AF

    Золотистый
    • №5.3 Светло-золотисто-коричневый AF

    • # 6.3 Темно-золотистый блондин AF

    • # 7.3 Золотистый блондин AF

    • # 8.3 Светло-золотистый блондин AF

    • # 9.3 Очень светлый золотистый блондин AF

    Медь
    • # 4.4 Медно-коричневый

    • # 5.4 Светло-медно-коричневый AF

    • # 6.4 Темно-медный блондин AF

    • # 7.4 Медно-русый AF

    • # 8.4 Светло-медный блондин AF

    Красное дерево
    • # 5.5 Светло-коричневый цвет красного дерева AF

    • # 6.5 Темный блондин красного дерева AF

    • # 7,5 Светлый блондин красного дерева AF

    Темно-рыжий
    • # 4.62 Коричневый Вио

    • # 5.6 Светло-рыжий коричневый AF

    • # 6.6 Темно-рыжий блондин AF

    • # 7,46 Медно-рыжий блондин AF

    • # 7.666 Extra Intensive Auburn Blonde AF

    Фиолетовый

    2 # 40003 .2 Фиолетовый коричневый AF

  • # 5.2 Светло-фиолетовый коричневый AF

  • # 5.22 Интенсивный фиолетовый светло-коричневый AF

  • # 6.2 Темно-фиолетовый блондин AF

  • Шоколадный
    • # 5.77 Светло-шоколадно-коричневый AF

    • # 6.77 Темно-шоколадный блондин AF

    • # 7.77 Шоколадный блондин AF

    • # 8.77 Светло-шоколадный блондин AF

    Корректоры
    • # Прозрачный / нейтральный корректор AF

    • Продукция
    • Компания
    • Salon Locator
    • Связаться с
    • Конфиденциальность / Условия использования
    • Мой аккаунт

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

    Товаров нет
    ×

    Товар добавлен в корзину!

    Товаров нет

    Продолжить покупки

    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 Deep Purple и Blues

    Самсы

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

    10 Современный и смелый

    Брайан Джеймс

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

    11 Живые и манящие

    Антон и Ирен

    Это прекрасное сочетание конфетно-розового, зелено-желтого, лавандово-серого и пастельно-коричневого цветов идеально подходит для создания яркого и привлекательного образа.

    12 Поразительно и просто

    Берт

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

    13 Красный и живой

    BrightMedia

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

    14 Вычурное и творческое

    Джули Флогак

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

    15 Элегантный, но доступный

    Эпический

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

    16 Изящный и футуристический

    MediaMonks

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

    17 Новаторский и дерзкий

    eDesign Interactive

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

    18 Текстурированная и динамическая

    HAUS

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

    19 Минимальный, но теплый

    Идентификаторы удовольствия

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

    20 Яркие и четкие

    FCINQ

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

    21 Чистота и энергия

    Изменить цифровой

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

    22 Корпоративные и традиционные

    Watson / DG

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

    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 Copenhagen

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

    42 цвета Flat Design

    Resn

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

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

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

    43 Эклектичный и мирный

    Играть

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

    44 Классный и традиционный

    details.ch

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

    45 ярких акцентных цветов

    цифровая вонючая

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

    46 Корпоративное и серьезное

    EPIC

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

    47 Гламурно и модно

    Apart

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

    48 Привлекающий внимание и гладкий

    ФУТУРАМО

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

    49 Громко и прямо в лицо

    Паника

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

    50 живых, но успокаивающих

    Мадео

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

    Разработка систематических цветов. Как сделать тематически гибким, WCAG… | автор: Jeeyoung Jung

    Mineral UI — это система проектирования с открытым исходным кодом, которую CA Technologies создает для использования во всех наших продуктах.Цвет — это основной строительный блок любой системы дизайна, и он оказался одной из самых сложных проблем проектирования, которые мы решали, из-за большого разнообразия требований:

    • Mineral имеет специальных возможностей , встроенных по умолчанию , поэтому все наши цвета должны соответствовать рекомендациям WCAG 2.1 Level AA по контрастности.
    • Mineral оформлен в стиле для единообразного стиля , а цветовые палитры можно поменять местами в любое время. Значения линейного изменения, , а не отдельные цвета , применяются к элементу интерфейса.Например, цвет синий-60 должен иметь такой же воспринимаемый контраст, как красный-60 или бирюзовый-60.
    • Mineral в конечном итоге будет поддерживать темный режим , и мы хотели, чтобы цветовые шкалы были визуально привлекательными как в светлом, так и в темном пользовательском интерфейсе.
    • Цвет используется для описания статуса . Многие продукты CA Technologies используются для описания и / или отчета о состоянии различных вещей, таких как разрушительные действия, развитие сюжета, доступность маршрутизатора и т. Д. Варианты компонентов пользовательского интерфейса как основополагающие концепции в нашей системе.Эти цветные варианты пользовательского интерфейса должны гармонично сочетаться со всеми нашими цветовыми темами.

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

    Новые цветовые шкалы, описанные в этой статье, внедряются на сайте Mineral-ui.com. Если вы хотите попробовать их сейчас, ознакомьтесь с нашими дизайнерскими активами.

    Mineral-ui.com

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

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

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

    Из Plasma Design System . Основные элементы, такие как цвет, трудно изменить позже

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

    • Темы : Темы обеспечивают единообразный внешний вид для всех продуктов, и исключает догадки.
    • Тематическая гармония : Каждая цветовая тема должна иметь одинаковые значения ступеней тона.
    • Определенные контрольные точки оттенка : Многие из наших продуктов продаются в модулях или наборах, поэтому цвета должны быть достаточно похожими, чтобы ощущаться как одна семья, но при этом достаточно отчетливыми, чтобы указать пользователю, что они находятся в другом модуле внутри Семейство продуктов.
    • Масштабируемость и добавление : Цветовая палитра должна иметь систематический узор, который можно добавлять по мере роста потребностей системы дизайна.
    • Без критических изменений: В дальнейшем мы хотели, чтобы наша цветовая система работала в любой ситуации, чтобы больше не было серьезных изменений в дизайне, в котором в настоящее время используется Mineral.
    • Доступно : Наша цель — сделать так, чтобы у всех был отличный опыт использования наших продуктов. Mineral поддерживает цветовую контрастность уровня AA. Визуальное представление текста должно иметь цветовую контрастность 4,5: 1 в каждом компоненте пользовательского интерфейса.

    Мы провели глубокий анализ других тематических цветовых палитр, в которых используются линейные изменения, исследуя палитры из IBM Design, Material Design и Open-Color.(Примечание: если вы заинтересованы в изучении других систем дизайна, Адель от UXPin — отличное место для начала.) Целью исследования было не копировать и вставлять их идеи, а скорее «заглянуть под капот» и понять суть решения, лежащие в основе их выбора цвета.

    В ходе исследования мы сосредоточили внимание на следующем:

    • Оттенок : Использует ли каждая цветовая палитра одно значение оттенка? Или изменение оттенка происходит на одной рампе?
    • Шаблон : показывает ли выбор значения устойчивый шаблон? Если есть узор, используется ли согласованная техника для других палитр?
    • Насыщенность и яркость (яркость) : Как работают насыщенность и яркость, когда каждое значение увеличивается или уменьшается по линейному закону?

    RGB, HSB, HSL или HEX?

    Цветовое моделирование — сложная тема, заслуживающая отдельной статьи.Но вкратце вот что важно: в этих примерах я работаю с HSB (оттенок, насыщенность, яркость), потому что это один из наиболее удобных для пользователя палитр цветов — идеально подходит для проверки и настройки цветов. Тем не менее, HSB (360 × 100 × 100 = 3600000 цветов) может отображать только около 21,5% цветового пространства RGB (256 × 256 × 256 = 16 777 216 цветов).

    HSB — хороший инструмент для изучения цвета, но во избежание проблем с рендерингом между различными интерпретаторами (браузерами, программным обеспечением для проектирования, дисплеями и т. Д.) Окончательное определение цвета наиболее точно записывается как значения RGB или HEX.Еще одно важное замечание: HSL и HSB — это отдельные модели, которые имеют разные принципы, и их не следует путать. Эти примеры находятся в HSB .

    Я взял примерные цветовые палитры из каждой системы дизайна и сопоставил каждый образец с сеткой насыщенности и яркости. Я также отслеживал изменения оттенков внутри рампы.

    IBM Design

    Цветовая палитра IBM использует полный диапазон насыщенности и яркости, но было сложно идентифицировать однородные образцы среди различных линейных изменений.При взгляде на зеленый (см. Ниже) IBM в целом сдвигает значение оттенка от 78 до 120, что может быть сложно последовательно воспроизвести и управлять в рамках других цветов. IBM явно ценит доступность, потому что коэффициент контрастности всегда рассчитывается на 4,5: 1 или выше, когда значение составляет 50 или выше.

    Начало графического дизайна: Цвет

    / en / begin-graphic-design / typography / content /

    Сила цвета

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

    Итак, как мы узнаем, какие цвета хорошо смотрятся вместе, а какие нет? Ответ прост: Теория цвета .

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

    Посмотрите видео ниже, чтобы узнать больше о цвете.

    Основы цвета

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

    Дополнительные цвета создаются путем объединения двух основных цветов .Красный и желтый составляют оранжевый; желтый и синий составляют зеленый; а синий и красный — фиолетовый.

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

    Присмотритесь

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

    оттенок

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

    Насыщенность

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

    Значение

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

    Создание цветовых схем

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

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

    Монохромный

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

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

    Аналог

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

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

    Дополнительные

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

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

    Раздельно-комплементарная

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

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

    Триадический

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

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

    Тетрадик

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

    Как избежать типичных ошибок

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

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

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

    Иногда это означает НЕ использование цвета — по крайней мере, не в каждой маленькой детали .

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

    Правильный выбор цвета

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

    Например, ярких цветов имеют тенденцию иметь веселую или современную атмосферу.

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

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

    В поисках вдохновения

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

    Вы даже можете использовать веб-ресурс для просмотра цветовых палитр или создания собственных.

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

    Собираем все вместе

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

    Надеемся, вам понравилось изучать основы цвета!

    Обязательно ознакомьтесь с остальными нашими темами о графическом дизайне, в том числе:

    / ru / начало-графический-дизайн / макет-и-композиция / содержание /

    20 бесплатных инструментов и руководств для создания цветного дизайна

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

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

    Учебники

    Учебник по цветам от W3Schools предназначен для веб-дизайна. Выучите 140 названий цветов HTML, отсортируйте их по шестнадцатеричным значениям, группам цветов и оттенкам.Изучите оттенки, оттенки, оттенки, тона, схемы и многое другое. Получите значения для моделирования популярных брендов. Обзор популярных цветов с 2021 по 2016 год от Pantone Color Institute. Изучите различные международные стандарты цвета и многое другое.

    W3Schools Colors Инструменты

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

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

    Основы понимания теории цвета от 99designs — еще одно полезное объяснение науки и искусства теории цвета.Научитесь использовать цвет для эффективного маркетинга и создания бренда.

    Инструменты

    Adobe Color — это инструмент для создания, сохранения и просмотра цветовых палитр. Установите базовые цвета, выберите правила цвета для своих палитр, настройте цветными линиями и многое другое. Чтобы извлечь цветовую палитру из фотографии, сделайте снимок с помощью iPhone, и Adobe Color сгенерирует цветовую палитру из этого изображения. Вы также можете извлекать цветовые градиенты из изображений.

    Adobe Color

    Adobe Capture — это приложение-конвертер векторных изображений для преобразования фотографий в цветовые темы, узоры, шрифты, материалы, кисти и формы.Захватывайте и редактируйте цветовые темы и превращайте их в настраиваемые палитры для использования в приложениях Adobe Creative Cloud. Доступ к разнообразным фильтрам для преобразования ресурсов Capture.

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

    CSS Gradient позволяет создавать градиентный фон для веб-сайтов. Помимо того, что он является генератором градиентов CSS, сайт также публикует связанный контент, от технических статей до реальных примеров градиентов, таких как Stripe и Instagram.

    Градиент CSS

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

    HTML-коды цветов — это набор бесплатных цветовых инструментов, включая палитру цветов, цветовые диаграммы и названия, учебные пособия и ресурсы.Получите цветовые коды HTML, шестнадцатеричные цветовые коды и значения RGB и HSL. Откройте для себя цветовые гармонии, оттенки, оттенки и тона. Введите шестнадцатеричные коды и значения RGB и HSL и создайте стили HTML, CSS и SCSS. Ознакомьтесь с руководством, чтобы получить краткую информацию обо всех названиях цветов HTML, сгруппированных по цвету.

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

    Sessions College Color Calculator позволяет вам исследовать творческие варианты цвета. Выберите базовые цвета, выберите цветовую гармонию, при необходимости настройте и посмотрите результаты. Вы получите отчет о шестнадцатеричных значениях цвета, RGB и CMYK для вашего проекта и увидите, как ваши цвета применены к образцам дизайна.

    Сеансы Колледж Цветной калькулятор

    Multicolr — это система цветного поиска от TinEye Labs, которая извлекает цвета из 20 миллионов изображений Creative Commons на Flickr, чтобы сделать их доступными для поиска по цвету.Выберите до пяти цветов, слайд-разделители для настройки цветовой композиции и добавьте теги для уточнения результатов. Найдите идеальные изображения с правильными цветами.

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

    Color-hex предоставляет информацию о цветовых моделях (RGB, HSL, HSV и CMYK), триадных цветах, монохроматических цветах и ​​аналогичных (похожих) цветах, вычисленных на каждой цветной странице.Color-hex также генерирует простой код CSS для выбранного цвета. Просматривайте палитры, популярные цвета, безопасные для Интернета цвета и многое другое.

    Colordot — это простой способ создания цветовых палитр и обмена ими с помощью прокрутки и щелчка мышью. Проведите пальцем вперед и назад, чтобы изменить оттенок цвета, вверх и вниз, чтобы изменить яркость, и прокрутите до насыщенности. Щелкните, чтобы сохранить цвет в палитре. У Colordot также есть приложение для iOS.

    Colordot

    Colourlovers — это международное сообщество, в котором дизайнеры создают и обмениваются цветами, палитрами, узорами, формами и т. Д.

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

    ColorExplorer — это онлайн-набор инструментов для работы с цветовыми палитрами. Быстро получите цветовую палитру на основе вашей собственной графики.Создавайте соответствующие палитры и исследуйте алгоритмы сопоставления. Смотрите интерактивные виртуальные цветные колоды в «веерном» стиле.

    Кулеры — это инструмент для создания и сбора цветовых палитр. Быстро создавайте идеально подходящие цвета. Нажмите пробел, чтобы создать случайную цветовую палитру, щелкните цвет, чтобы заблокировать его, и повторяйте оба действия, пока не получите желаемый результат. Выберите цвета на фотографии с помощью палитры изображений и автоматически создайте палитру. Просмотрите тысячи популярных палитр других профессионалов.Создайте свой профиль и упорядочите все свои цветовые схемы с помощью тегов. Используйте приложение iOS, расширение Chrome или надстройку Adobe.

    Охладители

    Полное руководство по цветному дизайну по пользовательскому интерфейсу | Джастин Бейкер | Muzli

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

    «В природе свет создает цвет. На картинке цвет создает свет ».

    — Ханс Хофманн

    Международный консорциум International Color Consortium (ICC), основанный в 1993 году, состоит из восьми поставщиков, которые хотели стандартизировать независимую от поставщика систему управления цветом, которая прозрачно работала бы во всех операционных системах и программных пакетах.Профиль ICC — это набор данных, которые характеризуют устройство ввода или вывода цвета или цветовое пространство в соответствии со стандартами, опубликованными (ICC).

    DPreview

    Цветовое пространство — Цветовое пространство (цветовая модель, цветовая система) — это абстрактная математическая модель, которая описывает диапазон цветов в виде чисел, обычно в виде 3 или 4 значений или цветовых компонентов (например, RGB, CMYK ). Каждый цвет в системе представлен одной точкой.

    Основные цвета — В цветовой модели RYB (или субтрактивной) основными цветами являются красный, желтый и синий.

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

    Третичные цвета — Еще шесть третичных цветов создаются путем смешивания основных и дополнительных цветов.

    Дополнительные цвета — Цвета, противоположные друг другу на цветовом круге, например красный и зеленый

    Аналогичные (смежные) цвета — Цвета, расположенные рядом друг с другом на цветовом круге, например синий и фиолетовый.

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

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

    Цвета RGB — красный, зеленый и синий. В модели RGB наложение аддитивных цветов (красного, зеленого и синего) приводит к субтрактивным цветам (голубому, пурпурному и желтому). Это лучшие цвета для активов, отображаемых в цифровом виде. Красный, зеленый и синий используют по 8 бит каждый, которые имеют целочисленные значения от 0 до 255. Это дает 256 * 256 * 256 = 16777216 возможных цветов.

    Добавка RBG

    Цвета CMYK — голубой, пурпурный, желтый и черный. В модели CMYK наложение субтрактивных цветов (голубой, пурпурный и желтый) приводит к аддитивным цветам (красный, зеленый и синий).Это лучшие цвета для печатных материалов. Значения представлены как cmyk (C%, M%, Y%, K%), где C, M, Y и K — процентные значения для значений голубого, пурпурного, желтого и черного цвета.

    CMYK Subtractive

    «Все цвета — друзья своих соседей и любители своих противоположностей».

    — Марк Шагал

    Оттенок — Оттенок относится к цвету самого изображения. Оттенок — это градус на цветовом круге (от 0 до 360 градусов) — 0 (или 360) — красный, 120 — зеленый, 240 — синий.Формально он определяется как «степень, в которой стимул может быть описан как похожий или отличный от стимулов, которые описываются как красный, зеленый, синий и желтый» (источник).

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

    Оттенки и оттенки

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

    Оттенок — Оттенок — это результат смешения исходного цвета с добавлением черного. Оттенок темнее исходного цвета.

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

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

    Яркость / Светлота — Яркость — это относительная яркость или темнота определенного цвета, от черного (без яркости) до белого (полная яркость). Легкость в процентах; 0% — черный, 100% — белый.

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

    Яркость — это измерение яркости со шкалой от белого до черного. Яркость (%) — это интенсивность ахроматического сигнала, влияющего на наше цветовое восприятие. Значение насыщенности 0 обозначает в основном серый цвет, тогда как 100% яркости (или L = 255) — белый.

    Измерение — Оттенок, насыщенность и яркость (яркость) вычисляются из необработанных значений каналов R, G и B, масштабированных в диапазоне от 0 до 255.

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

    — Джозеф Альберс

    RGB — Значение цвета RGB задается с помощью: rgb (красный, зеленый, синий). Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом от 0 до 255 или процентным значением (от 0% до 100%) (W3School).

    RGBA — RGBA означает красный зеленый синий альфа-канал. Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом, который определяет непрозрачность объекта. Параметр альфа — это число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный) и значения RGB (W3School).

    Шестнадцатеричные цвета — Шестнадцатеричный цвет задается с помощью: #RRGGBB, где шестнадцатеричные числа RR (красный), GG (зеленый) и BB (синий) определяют компоненты цвета.Все значения должны быть от 00 до FF. Например, значение # 0000ff отображается как синий, потому что для синего компонента установлено максимальное значение (ff), а для остальных установлено значение 00 (W3School).

    HSL-цвета — HSL обозначает оттенок, насыщенность и яркость — и представляет представление цветов в цилиндрических координатах. Значение цвета HSL задается с помощью: hsl (оттенок, насыщенность, яркость). Оттенок — это градус на цветовом круге (от 0 до 360) — 0 (или 360) — красный, 120 — зеленый, 240 — синий.Насыщенность — это процентное значение; 0% означает оттенок серого, а 100% — полный цвет. Легкость тоже в процентах; 0% — черный, 100% — белый (W3School).

    Цвета HSLA

    Цвета HSLA — Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность объекта. Значение цвета HSLA задается с помощью: hsla (оттенок, насыщенность, яркость, альфа), где параметр альфа определяет непрозрачность. Параметр альфа — это число от 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный) (W3School).

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

    «Цвет — это сила, непосредственно влияющая на душу».

    — Василий Кандинский

    Ахроматические / нейтральные цвета

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

    Глоссарий дизайна MAU

    Теплые и холодные цвета

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

    теплых и холодных цветов

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

    Психология цвета

    Психология цвета относится к эмоциональной обусловленности цвета — его влиянию на то, как люди думают, чувствуют и действуют.

    Синий — Доверие, интеллект

    Красный — Любовь, Энергия, Страсть, Гнев, Голод

    Черный — Смелый, Богатый, Власть, Злое Сообразительность

    Зеленый , Естественный, Ревность, Уравновешенность, Успокаивающий

    Желтый — Бодрый, Детский, Теплый, Оптимистичный

    Оранжевый — Юный, Счастливый, Влечение, Дружелюбный

    Розовый — Чувствительный, Заботливый, Любовь, Сексуальность, Emotion

    Фиолетовый — Королевский, Роскошный, Таинственный, Печальный

    Логотипы

    • Синие логотипы пробуждают чувство уверенности, успеха и надежности
    • Зеленые логотипы вызывают восприятие экологичности, прочности, долговечности, мужественности и устойчивости
    • логотипы вызывают женственность, гламур и шарм
    • Розовые логотипы создают ощущение молодости, воображения и моды
    • 9 0003 Желтые логотипы вызывают восприятие веселья и современности
    • Красные логотипы вызывают чувство компетентности и уверенности в себе
    • От Design Shack

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

    «Цвет может подавлять … Надо понимать, что когда дело доходит до цвета,« меньше »часто« больше »- урок, преподанный нам мастерами, но игнорируемый многими художниками».

    — Джо Сингер

    Монохроматический (1 цвет)

    Смежная триада (3 цвета)

    Дополнительный (2 цвета)

    Триадический (3 цвета)

    Тетрадический (4 цвета)

    Примерно 8% мужчин и 0,5% женщин страдают дальтонизмом в той или иной форме. Дизайнеры должны помнить о пользователях с дальтонизмом и должны гарантировать, что важные взаимодействия UX не дискриминируют дальтонизм.

    Цветовая слепота

    Красно-зеленая цветовая слепота

    Эта цветовая слепота вызвана потерей или ограниченной функцией красных или зеленых колбочек фотопигментов (NIH).

    • Протаномалия: Красный, оранжевый и желтый кажутся более зелеными, а цвета не такими яркими. Это легкое заболевание, которое обычно не мешает повседневной жизни.
    • Протанопия: Красный отображается как черный. Некоторые оттенки оранжевого, желтого и зеленого кажутся желтыми.
    • Дейтераномалия: Желтый и зеленый кажутся краснее, и трудно отличить фиолетовый от синего.
    • Deuteranopia: Красные выглядят как коричневато-желтые, а зеленые как бежевые.

    Сине-желтая цветовая слепота

    Сине-желтая цветовая слепота встречается реже, чем красно-зеленая цветовая слепота. Фотопигменты синего цвета (тритан) либо отсутствуют, либо имеют ограниченную функцию (NIH).

    • Тританомалия: Синий выглядит зеленее, и бывает трудно отличить желтый и красный от розового.
    • Tritanopia: Синий выглядит зеленым, а желтый — фиолетовым или светло-серым.

    Complete Color Blindess

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

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

    Калибровка цвета

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

    Генераторы цветовой системы

    Используйте эти инструменты для создания эффективных цветовых схем.

    Muzli Colors — Создавайте красивые цветовые схемы, которые работают

    Stylify — Онлайн-генератор руководств по стилю

    SC5 — Еще один потрясающий веб-генератор руководств по стилю

    Paletton — Расширенный создатель цветовой палитры.

    Adobe Color CC — Еще один надежный генератор цветовой палитры.

    Colormind — палитра цветов на базе искусственного интеллекта.

    Canva — Извлечение цветовых профилей из фотографий.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Copyright © 2024 homyrouz.ru — Банкетный зал Хоми Роуз. All rights reserved.