Веб палитра: HTML CSS Палитра цветов

Нашли ошибку в тексте? Напишите нам.

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

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

• 1 19 генераторов цветовых палитр, упрощающих веб-дизайн
  • 1.1 1. Охладители
  • 1,2 2. Палеттон
  • 1,3 3. Adobe Color СС
  • 1,4 4. Колоротация
  • 1,5 5. Цветная сфера Mudcube
  • 1,6 6. КолРД
  • 1,7 7. ColorHexa
  • 1,8 8. ЦВЕТлюбители
  • 1,9 9. КОПАСО
  • 1.10 10. Цветная точка
  • 1.11 11. Цветовой код
  • 1.12 12. Палитра
  • 1.13 13. Палитра материалов
  • 1.14 14. ФОТОКОПА
  • 1,15 15. Colorfavs
  • 1,16 16. Живописный
  • 1,17 17. Палитра
  • 1,18 18. Цветовой блендер
  • 1.19 19. Сплоченные цвета
• 2 Заключение

19 генераторов цветовых палитр, упрощающих веб-дизайн

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

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

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

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

2. Поддон

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

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

3. Adobe Color CC

Adobe Color CC (ранее Adobe Kuler) дает вам возможность начать с нуля, загрузить изображение для вдохновения или выбрать цветовую палитру из сообщества Adobe CC. Когда у вас есть начальная точка, вы можете либо применить алгоритмические правила к своей палитре, либо внести изменения вручную. Если вы используете изображение для вдохновения, у вас есть несколько вариантов эффектов для настройки цветовой схемы.

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

4. Цветовращение

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

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

5. Цветная сфера Mudcube

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

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

6. ColRD

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

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

7. ColorHexa

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

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

8. COLORlovers

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

На веб-сайте COLORlovers также есть более продвинутый генератор цветовых палитр под названием COPASO (см. ниже).

9. КОПАСО

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

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

10. Цветная точка

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

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

11. Цветовой код

На первый взгляд, Colourcode почти идентичен Colordot, поскольку он имеет тот же преобразователь цвета на основе курсора (вы даже можете изменить всю цветовую палитру одновременно с движением курсора). Однако эта функция представляет собой только бесплатный инструмент для сборки в Colourcode; полный инструмент предлагает несколько других вариантов генерации палитры.

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

12. Поддон

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

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

13. Палитра материалов

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

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

14. ФОТОКОПА

PHOTOCOPA – это усовершенствованный генератор цветовых палитр на основе изображений, также созданный хорошими людьми из COLORlovers. После выбора базового изображения (загрузите свое собственное или выберите из огромной галереи) вам будут предложены 48 цветов. Вы также получаете шесть различных цветовых палитр на выбор с такими эффектами, как яркий, приглушенный, аналогичный и случайный.

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

15. Colorfavs

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

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

16. Живописный

Мы все знаем MailChimp из-за его популярного инструмента автоответчика, но одним из менее известных его инструментов является Pictaculous. Еще один генератор изображений Pictaculous создает палитру из пяти цветов после загрузки изображения. Его самая изящная особенность заключается в том, что он также получает предложения по палитре от сообществ Adobe Color CC (перечисленных как Kuler) и COLORLovers — по пять от каждого.

Хотя в Pictaculous отсутствуют параметры настройки, его удобное сочетание предложений от Adobe и COLOURLovers делает его достойным внимания. В качестве дополнительного бонуса вы можете экспортировать палитры в файл Adobe.

17. Поддон

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

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

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

18. Смеситель цветов

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

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

19. Сплошные цвета

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

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

Заключение

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

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

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

Более простой вариант, Colourcode имеет очень простой интерфейс с достаточным количеством параметров настройки для создания красивой палитры. Для палитр, вдохновленных изображениями, мы бы выбрали PHOTOCOPA; он интуитивно понятен и предлагает отличные варианты палитры.

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

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

Миниатюра статьи отeatcute/shutterstock.com

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

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

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

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

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

1. Khroma

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

2. Colormind

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

3. Color Drop

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

4. Adobe Color

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

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

5. ColorSpace

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

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

6. Colorkuler

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

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

7. Color Lisa

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

8. Brand Colors

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

9. Coolors

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

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

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

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

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

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