эстетичные палитры с кодами

· Инструмент для подбора цветов и генерации цветовых схем ·

Схема:
Насыщенность/Яркость

Схема:
Контрастность

Выбранный Вариант:
Насыщенность/Яркость

Постоянный адрес текущей цветовой схемы:

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

Также монохроматические вариации сделаны для каждого цвета в других схемах.

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

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

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

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

Источник

Разбираемся с цветами, палитрами, фильтрами CSS и не только

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

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

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

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

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

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

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

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

Художники использовали этот тип частоты света ещё до того, как у нас появились мониторы. Сёра и пуантилисты использовали красный и зелёный цвета, чтобы получить жёлтый, на таких картинах, как «La Grande Jatte» (хотя сам Сёра предпочитал термин «хромо-люминаризм»). Другие люди называют подход дивизионизмом.

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

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

Битовая глубина 2 даст 4 цвета, и так далее, пока мы не достигнем битовой глубины 32, хотя обычно мониторы, отображающие веб-страницы, имеют плотность 24 битовой глубины и 16 777 216 цветов, — это True Color и альфа-канал.

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

Значения цвета

Последний раздел иллюстрирует, что rbga(x, x, x, y); передаёт информацию, но давайте разберём цветовые значения немного подробнее и покажем некоторые другие свойства и их использование. Цвета в канале RGB задаются в диапазоне 0-255.

Hex (шестнадцатеричные цвета)

Шестнадцатеричные цвета — это немного другой формат для представления значений тем же способом. И это, пожалуй, самый распространённый способ обозначения цвета в Интернете.

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

Один байт представляет собой число в диапазоне от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 в десятичной системе счисления. Первый байт — красный, творой байт — зелёный, а байт 3 — синий.

Шестнадцатеричная система называется так потому, что в ней используется система оснований 16. В качестве значений используются диапазоны от 0-9 и от A-F, причём 0 — наименьшее значение, а F — наибольшее, то есть #00000 — чёрный, а #FFFFFF — белый.

Значения hsl работают с диапазонами, как и RGB, но вместо того, чтобы работать со значениями, соответствующими логике интерпретации монитора, значения hsl — это оттенок, насыщенность, светлота. Похоже на значения RGB, но диапазоны отличаются. Эта система основана на колориметрической системе Манселла (он был первым, кто разделил цвет на эти три канала, или создал трёхмерную систему, основанную на математических принципах, привязанных к человеческому зрению).

Трёхмерное представление HSL

Оттенок вращается на 360 градусов, полный круг, а насыщенность и светлота — это проценты от 0 до 100. Представьте себе колесо, в центре которого находится плотное и насыщенное содержимое. Эта демонстрация довольно хорошо отражает систему.

https://css-tricks.com/examples/HSLaExplorer/

Если вы не особенно опытны в работе с цветом, hsla() позволяет использовать некоторые довольно простые правила для приятных эффектов для разработчиков. Подробнее об этом — в разделе “Генеративный цвет”.

Именованные цвета

Именованные цвета имеют репутацию неудобных из-за неточных названий.

Самые яркие, «знаменитые» примеры: тёмно-серый на самом деле светлее серого, а лайм и лайм-грин — совершенно разные цвета. Есть даже игра, где нужно угадать название цвета в вебе, созданная Крисом Хеилманном.

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

Именованные цвета могут быть полезны в быстрой демонстрации, но обычно разработчики используют Sass или другие препроцессоры для хранения значений цветов в формате hex, rgba или hsla и сопоставления их с названиями цветов, используемых в компании.

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

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

currentColor

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

Препроцессоры

Для настройки цветов отлично подходят препроцессоры CSS. Вот несколько ссылок на документацию по цветовым функциям различных препроцессоров:

А ниже несколько интересных вещей, которые мы можем сделать с помощью Sass:

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

Свойства цвета

Прямоугольник и тень текста

Свойства box-shadow и text-shadow принимают значение цвета. Тени текста принимают 2 или 3 значения, h-shadow (горизонтальная тень), v-shadow (вертикальная тень) и необязательный радиус размытия.

Градиенты

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

Синтаксис градиентов не так уж сложно написать, но мне очень нравится работать с этим генератором градиентов, потому что он создаёт сложное свойство фильтра, поддерживая IE6-9. Есть ещё один очень красивый Open Source генератор.

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

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

Градиентный текст возможен только в webkit. Вот простой код на CSS-Tricks.

Генеративные цвета

Я использую его, чтобы сгенерировать эти цвета:

А также этот, с другим диапазоном (прокрутите очень быстро):

JavaScript

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

Смешение цветов и режимы смешения фонов

Если вы использовали эффекты слоёв в Photoshop, то, вероятно, знакомы с режимами смешивания (наложения). Почти каждый сайт в 90-е годы использовал их (мой тоже). Режимы смешивания и фонового наложения позволяют соединить два разных многослойных изображения, при этом доступно 16 режимов.

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

Если вы хотите прослыть настоящим занудой, знайте, что формулы для режимов наложения зависят от типа эффекта. Например, multiply — это destination source = backdrop. Другие эффекты — это вариации простой математики с вычитанием, умножением, сложением и делением. Формула линейного эффекта — A+B-1, а эффекта Color Burn — это 1-(1-B)*A.

Вот более обширная документация, а ниже простая демонстрация, иллюстрирующая работу цвета в таких эффектах:

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

Фильтры

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

Фильтры и режимы размытия могут работать вместе! Уна Кравец создала этот классный инструмент под названием CSS Gram, комбинируя некоторые эффекты, чтобы создать фильтры из Instagram. В конце есть хорошая документация.

feColorMatrix

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

Матрицу можно расширить и отрегулировать оттенок, насыщенность и так далее:

В статье Уны подробно рассматриваются все возможности этого инструмента. Ещё больше информации об этом и многих других сумасшедших цветах SVG, а также об инструментах градиента в книге Амелии Белами-Ройд от O’Reilly или в исследовательской демонстрации Майка Муллани.

Доступность и другие замечания

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

Доступность цвета можно измерить многими инструментами. Ниже некоторые из моих любимых:

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

Color Safe — отличный инструмент, который помогает в этом. Как только вы всё подготовите, WAVE (Web Accessibility Tool) поможет оценить веб-страницу.

Цвет и атмосфера

Атмосфера влияет на цвет. Знать это довольно важно, если вы собираетесь создать хоть какую-то иллюзию глубины. Предметы ближе к вам более насыщены и контрастны. Предметы дальше более размыты.

Ландшафт подчёркивает зависимость контраста от расстояния

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

Нативный ввод цвета

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

Отобразит элемент выбора цветов, например такой:

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

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

Полезное

Color Highlighter Plugin для Sublime Text я использую, чтобы увидеть, какой цвет интерпретирует браузер. Мне нравится использовать <"ha_style": "outlined">.

Существует несколько различных традиционных комбинаций палитры, а также интернет-ресурсы, которые помогут вам их составить. Вот более научное представление — Paletton или Adobe Color.

Бенджамин Найт написал аналог Adobe Color при помощи d3 на CodePen, инструмент довольно крут и заслуживает внимания.

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

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

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

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

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

Профессии и курсы

Data Science и Machine Learning

Источник

In Color Balance

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

Для создания палитр мы находим самые красивые картинки в сети и выбираем самые лучшие из них.

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

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

Ресурс IN COLOR BALANCE создан с целью предоставления вдохновения его посетителям, является общедоступным для всех пользователей и осуществляет свою деятельность с соблюдением действующего законодательства РФ.

Права IN COLOR BALANCE защищены в соответствии с лицензией CREATIVE COMMONS.

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

Мы ни в коем случае не используем изображения без разрешения авторов.

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

— исключительное право на воспроизведение;

— исключительное право на распространение;

— исключительное право на публичный показ;

— исключительное право на доведение до всеобщего сведения.

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

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

Источник

Генератор цветовой палитры

Цветовые палитры CSS для классных цветовых комбинаций и элементов пользовательского интерфейса

Что такое цветовая палитра?

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

Как сделать цветовую палитру?

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

Автоматически генерировать цветовые палитры

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

Использование цветовой палитры

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

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

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

Скопируйте код CSS

Используйте этот код CSS в своем веб-проекте, чтобы получить цветовую палитру:

Источник

Сочетание цветов

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

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

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

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

Вторичные цвета создаются путем объединения основных цветов в равных частях:

Наконец, у нас есть цвета третьего уровня, которые формируются комбинацией первично-вторичных в равных частях.

Значение цветов

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

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

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

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

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

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

Примеры хороший сочетаний цветов

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

Источник