Подбор цветов и генерация цветовых схем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значение оттенка основного цвета. Кликните для ввода числового значения.

Угол/дистанция оттенка вторичных цветов. Кликните для ввода числового значения. Имеет смысл только в цветовых схемах, использующих вторичные цвета.

Значение RGB основного цвета. Кликните для ввода числового значения.

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

Значения RGB основного цвета.

Пресеты цветовых схем. Кликните и выберите предопределенные комбинации яркости, насыщенности и контрастности цветовой схемы.

Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).

Контрастность цветовой схемы. Перетаскивайте ползунок по квадрату для регулировки контрастности вариантов цвета в схеме (вверх/вниз для темного варианта, влево/вправо для светлого варианта).

Контрастность цветовой схемы. Панель для регулировки яркости и насыщенности сразу всех вариантов схемы.

Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.

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

Схема палитры. Представлены четыре основных цвета, для легкого составления впечатления о схеме.

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

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

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

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

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

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

Цвета HTML. Таблица из 147 имён цветов для HTML и CSS — ColorScheme.Ru

ColorScheme

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

Цветовой Круг Онлайн ⇒

Карта СайтаНазвания ЦветовЦвета АвтомобилейИмена цветов в HTMLКонвертер Цветов

На данной странице представлены специальные ключевые слова, которые можно применять для обозначения того или иного цвета на интернет сайтах, и при разработке на языках программирования для Web, таких как HTML, CSS, JavaScript, Flash, и др.

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

Таблица HTML цветов

Имена цветов в HTML не чувствительны к регистру, и могут записываться в любой форме

Также стоит отметить, что имея 147 различных ключевых слов (17 старых и 130 новых), не все цвета в этом списке уникальны. Некоторые имена обозначают один и тот же цвет. Так, например, и Grey, и Gray обозначают 50-процентный серый цвет #808080, а Magenta — это лишь синоним HTML цвета Fuchsia, и ссылается на шестнадцатеричный код цвета #FF00FF.

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

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

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

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

Искусство Джазмин Варела (@jazminvarela). Ознакомьтесь с ее курсом в ресурсах в конце этого поста!

1. Khroma

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

Крома.

2. Colormind

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

Иллюстрация учителя Домастики Андонеллы (@andonella).

3. Color Drop

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

Капля цвета.

4. Adobe Color

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

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

Цветовая палитра Adobe.

5. ColorSpace

У вас есть любимый цвет, но вы не знаете, с чем его сочетать, чтобы добиться желаемого эффекта? ColorSpace — самый простой и быстрый инструмент в этом списке!

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

Цветовое пространство.

6. Колоркулер

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

Бесплатная версия анализирует ваши последние девять изображений, а версия за 2,99 долл. США обрабатывает всю вашу учетную запись и создает как палитру, так и ключевой «цвет профиля», который вы можете использовать в графике, чтобы придать своей учетной записи четкий брендинг.

Цветовая палитра Domestika, созданная с помощью Colorkuler.

7. Color Lisa

Хотите вдохновиться культовым художником или картиной ? Чтобы перенести настроение и атмосферу известных произведений в свои работы, попробуйте Color Lisa. Просмотрите по фамилии художника и найдите пятицветные наборы от Баскии, да Винчи, Кало и Эшера.

Цветовая палитра для фильма Жана-Мишеля Баскии «Пыльные головы» через Color Lisa.

8. Brand Colors

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

Фирменные цвета.

9. Coolors

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

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

Трендовые палитры на Coolors.

10. Цветовая палитра Cinema

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

Изображение из «Вечного сияния чистого разума» через @colorpalette.cinema в Instagram.

Углубите свои знания в области теории цвета и примените их с помощью этих ресурсов

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

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

2. Просмотрите эти семь бесплатных учебных пособий по цвету, чтобы узнать, как использовать цвет различными способами.

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

4. Изучите технику цветной трафаретной печати для одежды с помощью этого курса от YUK FUN.

7 лучших онлайн-генераторов цветовых палитр

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

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

Here are the color palette generators we’ll cover:

1. Coolors 
2. Adobe Color CC
3. Color Hunt
4. Color Space
5. Paletton
6. Khroma 
7. Material Design Color Tool 
8. Final thoughts 

Let’s нырнуть в!

1. Охладители

Начав этот список с фаворита всей отрасли, Coolors стал популярным благодаря своей простоте и растущей библиотеке цветовых палитр для iOS и Android. Благодаря интуитивно понятному интерфейсу перетаскивания Coolors является полезным ресурсом для начинающих. Вы можете отредактировать свои цвета, изменить их порядок и развернуть их, чтобы отобразить выбор альтернатив. Одним нажатием пробела генератор автоматически сгенерирует варианты для других цветов. После того, как вы создали палитру, которой вы довольны, вы можете либо скопировать шестнадцатеричные коды цветов, либо экспортировать палитру в формате URL/PNG.

2. Adobe Color CC

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

3. Color Hunt

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

4. Цветовое пространство

Уже придумали базовый цвет, но не знаете, как построить вокруг него цветовую палитру? Перейдите в Цветовое пространство. После того, как вы ввели выбранный оттенок, используя его значения RGB или шестнадцатеричный код, нажмите «Создать», и веб-сайт мгновенно создаст более чем большое количество цветовых комбинаций, соответствующих выбранному вами цвету. Это действительно настолько просто!

5. Paletton

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

6. Хрома

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

Материальный дизайн, разработанный Google, представляет собой систему, которая стремится продвигать стандартный, целостный внешний вид на всех цифровых платформах. Color Tool — это всего лишь одна из потрясающе богатой базы данных информации и инструментов, которые предоставляет Google Material Design.