Цвет: тон, насыщенность, светлота ⁠ ⁠

Прежде чем перейти к последнему виду контраста (контраст по площади) давайте поговорим о математике цвета.

Создано несколько моделей цветовых пространств: RGB, HSL, Lab. Сегодня рассмотрим HSL как наиболее простое для понимания. Данная цветовая модель характеризуется 3-мя

- Тон (Hue). Выражаясь простым языком это и есть "сам цвет" (красный, зеленый, синий и т.д.)

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

- Светлота (lightness). Субъективная яркость участка изображения, отнесённая к субъективной яркости поверхности, воспринимаемой человеком как белая. Каждый тон в максимальной насыщенности будет иметь разную яркость

Для примера. Все цвета в этом ряду имеют одинаковую яркость. (насыщенность цветов различается)

Про цвет все. Следующим постом закончу тему с контрастом.

Если интересно могу рассказать про модели цветового пространства, +/-, где используются, история создания.

651 пост 11.8K подписчиков

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

Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.

1. Публиковать сообщения, картинки, не соответствующие тематике;

2. Размещать ссылки рекламного характера;

3. Перегибать палку;

Если оступился:

в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;

А можете поподробней про третью картинку рассказать?Как ее трактовать?По горизонтали тон, по вертикали насыщенность, но вот именно такой картинки не видел.

Там показана субъективная яркость цветов?

довольно сухо, будто вики читаеш

Международная Церковь Конопли в США (Денвер, штат Колорадо)⁠ ⁠

В целом неплохо, но есть замечания⁠ ⁠

Дизайнерские игры для работы с цветом⁠ ⁠

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

Развитие цветового восприятия

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

Соответствие цветов

Научит лучше различать оттенки. Следи за цветом большой полосы и ищи соответствие на палитре. Просто? Не тут то было.

Внимательность и восприятие

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

Прокачать зрительную память

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

6 сервисов для игры с цветом⁠ ⁠

6 онлайн-сервисов для работы с колористикой. Цвета можно подбирать самому или воспользоваться готовой палитрой.

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

На сайте собраны палитры Flat и Material-дизайна, Metro-интерфейса и цвета популярных соц.сетей. У сервиса есть аналог: flatuicolors.com

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

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

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

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

Использование черного и белого в дизайне. МиниСоветы⁠ ⁠

Рубрика Мини советы.

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

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

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

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

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

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

Дизайн вырвиглаз⁠ ⁠

Захотелось роллов пожевать. Посмотрел что есть поблизости. Наткнулся на такой вот сайт. Написать им что ли в отзывах чтобы сменили дизайн сайта )

Большой список сайтов, по получению основных цветов из картинки или просто подбору подходящей палитры⁠ ⁠

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

Если вы хотите получить подобную палитру на основе картинки оффлайн, то, думаю, самый простой способ сделать это - провести "пикселизацию" картинки. В Adobe Photoshop это делается с помощью инструмента "Мозаика" (пункт Фильтр > Оформление > Мозаика).

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

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

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

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

Так же некоторые из этих сайтов-сервисов позволяют сгенерировать css, для выбранной палитры или скачать цвета в файл ASE, ACO или в картинку png или jpg. Некоторые принимают только .jpg картинки, а некоторые даже .gif. Некоторые позволяют создать аккаунт и сохранять подборки цветов, другие не имеют такого сервиса. Различий, функций и критериев очень много, надеюсь вы найдете то, что вам поможет.

Сайты для генерации палитры основных цветов по картинке

Сайты по поиску картинок определенного оттенка или цвета

Сайты для генерации палитры основных цветов определенного сайта

Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.

Палитры с подобранными цветами Material Design и динамическими макетами Android приложения