Лучшие цветовые инструменты для веб-дизайнеров в 2021 году

Получите вдохновение на ходу и превратите его в цветовые палитры

Khroma использует AI, чтобы предлагать вам цвета например

04. Adobe Color CC

Это было примерно пока, но по-прежнему невероятно полезен

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

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

05. Colordot

Используйте простые жесты мыши, чтобы усилить свой цвет палитра

Colordot от Hailpixel — отличный бесплатный онлайн-инструмент для создания цветовой палитры. Используя простые жесты мыши, вы можете выбирать и сохранять цвета. Перемещайте мышь вперед и назад для выбора оттенка; вверх. и вниз для яркости; прокрутите до насыщенности и щелкните, чтобы сохранить цвет в палитре. Щелкните переключатель значок, чтобы увидеть значения RGB и HSL каждого цвета. Есть даже приложение для iOS, которое позволяет снимать цвета с помощью камеры.

06. Эгградиенты

Градиентное вдохновение и названия, заставляющие задуматься

Eggradients предлагает идеи для красивых градиентов для использования в вашей дизайнерской работе, созданные кем-то, у кого есть как отличное восприятие цвета, так и интересное чувство юмора. имеет собственное название, наводящее на размышления. Примеры включают "Broken Hea Возняка" rt »для бледно-голубого и бордового градиента под названием« Не облагаемый налогом доход ».

07. 147 цветов

Этот бесплатный инструмент включает стандартный CSS цвета

Когда вы отвечаете за создание легко читаемых CSS, иногда лучше использовать стандартные цвета и названия цветов. Благодаря 147 Colors от Брайана Майера-младшего вы вы можете увидеть их все и выбрать те, которые вам подходят. Он содержит 17 стандартных цветов плюс 130 других цветов CSS. твои имена. Отфильтруйте результаты по оттенкам синего, зеленого и т. Д. Или выберите из полной радуги.

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

Создание цветовой палитры на основе изображения

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

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

09. Палитра материального дизайна

Создайте палитру на основе Принципы Google Material Design

С помощью палитры Material Design вы можете выбрать два цвета, которые затем преобразуются в полную цветовую палитру для загрузки вместе с предварительным просмотром. Компания также предлагает Цвета материального дизайна, которые позволяют дизайнерам видеть разные оттенки f цвет вместе с соответствующими значениями HEX.

10. ColourCode

Сохранение и экспорт цветовых палитр как SCSS, LESS или файлы PNG

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

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

11. Калькулятор цвета

Выберите цвет и цветовая гармония, и этот инструмент сгенерирует цветовую палитру

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

12. Цветовой код HTML

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

HTML Color Codes — это обширный бесплатный набор инструментов от Dixon & Moe, который включает в себя подробный палитру цветов с множеством объяснений цветовых правил; серия цветовых диаграмм с плоскими цветами дизайна, схемой дизайна материалов Google и классической безопасной цветовой палитрой. е; и список стандартных названий цветов и кодов HTML.

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

13. W3Schools: Учебное пособие по цветам

Это бесплатно руководство включает ссылки на ряд удобных инструментов для работы с цветом

Если вы ищете универсальное решение, включающее руководство по цветам, а также ряд различных инструментов , то Учебник по цветам в W3Schools — идеальный выбор. Вы можете не только узнать о теории цвета, цветовом круге. s и цветовые оттенки, но вы также сможете использовать другие инструменты, которые у него есть, такие как Конвертер цветов. С помощью этого инструмента вы можете преобразовывать любые цвета в имена и обратно, HEX-коды, значения RGB, HSL, HWB и CMYK.

14. Цифровой измеритель цвета (Mac)

Встроенный инструмент Mac позволяет снимать цвета с экрана

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

Подробнее: