Веб палитра цветов: «Безопасные» или Web Safe цвета для веб-дизайна

8 сайтов с палитрами — Каждый пиксель важен

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

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

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

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

Палитры можно сохранять и загружать заново.

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

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

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

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

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

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

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

Рассказать об этом:

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

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

Немного о цвете в веб-дизайне

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

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

В интернет-пространстве существует около 16,8 миллионов цветов. Однако все цвета являются составляющими трех базовых оттенков — красного, зеленого и голубого. Такая модель называется RGB, аббревиатура, которая состоит из первых букв представленных цветов: R — red (красный), G — green (зеленый), B — blue (голубой).

В зависимости от количества того или иного цвета, можно «вывести» новый цветовой оттенок, задавая определенные значения в модели RGB. Например:

Видно, что полученный оттенок содержит интенсивность 255 для красного, 100 для зеленого и 200 для голубого.

Также все цвета можно «разбавить» белым или черным цветом и получить различные оттенки. Например, оттенки синего:

Таким образом, дизайнеры имеют огромный выбор цветов для макета.

От того, какие цвета выберет разработчик, зависит:

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

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

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

Как дизайнеры составляют палитры

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

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

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

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

Больше о поиске идей мы писали здесь.

Преимущества яркой цветовой палитры

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

Запоминаемость ресурса

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

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

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

Эмоции

Яркие цвета — это всегда про эмоции. Яркие цвета влияют на настроение, создают особую атмосферу на сайте, вызывают определенные ассоциации с продуктом.

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

Стиль

Яркая цветовая палитра является одним из трендов веб-дизайна. «Скучный» минимализм уже никого не удивляет, и дизайнеры ищут новые направления, в которых можно создать уникальный дизайн и привлекать пользователей. Например, один из «законодателей» трендов в веб-дизайне Apple использует для своих баннеров цветной градиент:

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

Становление бренда

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

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

Такие цвета использует Google для своих логотипов:

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

Яркая цветовая палитра — отличная составляющая фирменного стиля. Бренды, использующие выразительные цвета вместе с интересными иллюстрациями или символами всегда больше запоминаются клиентами. Мы привыкли ассоциировать красную букву «Я» с компанией «Яндекс», различаем по цветам всех операторов, узнаем на улицах курьеров Delivery Club только по зеленой куртке и сумке. Несмотря на то, что цвет не является торговым знаком (зарегистрировать цвет очень сложно, хотя такие прецеденты случались в странах Европы) его можно с успехом использовать как ассоциативную составляющую бренда.

Креативность

Яркая цветовая палитра — отличный способ проявить креативность и создать по-настоящему уникальный дизайн. Сейчас структура, серые цвета без ярких акцентов и «серьезность» ушли в прошлое — в трендах яркие оттенки, креативные текстуры, анимация и многое другое.

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

Яркий пример — сайт «Тинькофф журнал». Издание стало популярным не только благодаря интересному контенту, но и необычному дизайну и интересной типографике:

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

Повышение продаж

Еще одна причина, почему яркие цвета популярны в веб-дизайне — повышение уровня конверсии. Дизайнеры научились управлять вниманием пользователей с помощью цвета — например, выделять особо важные элементы (призывы к действию, социальные доказательства) более яркими оттенками.

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

Больше об оформлении промо-сайтов мы писали в этой статье.

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

Недостатки яркой цветовой палитры

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

Сложности с юзабилити

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

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

Сложности с восприятием контента

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

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

Несоответствие тематике

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

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

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

12 уникальных инструментов выбора цвета для веб-дизайнеров и графических дизайнеров

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

Мы, дизайнеры, серьезно относимся к цвету, потому что он серьезен. Цвета, которые вы выберете, повлияют не только на то, как люди будут себя чувствовать на вашем сайте, но и на то, что увидят пользователи с различными типами дальтонизма. Так что выбирайте с умом.

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

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

1. Расширение ColorPick Eyedropper для Chrome

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

ColorPick позволяет найти шестнадцатеричный код цвета любого элемента.

2. ColorSnapper 2

Используйте лупу ColorSnapper 2, чтобы получить именно тот оттенок, который вам нужен, и сохраните его на потом.

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

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

3. Расширение Webflow для Chrome

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

Удобно, правда?

Генераторы цветовых схем и палитр

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

На самом деле выбрать цвета может быть непросто — к счастью, есть инструменты, которые помогают нам в этом!

4. Happy Hues

Созданный полностью в Webflow никем иным, как Маккензи Чайлд, Happy Hues предлагает вам различные цветовые палитры для вдохновения и показывает реальные примеры того, как эти цвета можно использовать в профессиональном дизайне.

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

5. Цвет

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

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

Охладители позволяют легко подобрать и усовершенствовать палитру.

Coolors – еще один популярный генератор палитр. Вы можете выбрать любой цвет и на основе выбранного цвета создать правильную цветовую схему для любого дизайн-проекта. Хотя (немного) менее интуитивный, чем Color (отсюда и дополнительная буква o), Coolors позволяет экспортировать, хранить и повторно использовать палитру в таких инструментах, как Adobe. У Coolors также есть мобильное приложение, поэтому вы можете просматривать и изменять свои цвета из любого места.

7. LOLColors

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

8. Цветовой круг Brandmark

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

Цветовое вдохновение

Благодаря достижениям в области HTML и CSS дизайнеры теперь могут в полной мере использовать цветные градиенты в Интернете, не беспокоясь о создании тяжелых изображений или написании сложного кода. Единственная проблема сейчас — попытаться сузить свой выбор!

Следующие четыре инструмента являются нашими лучшими помощниками при выборе цветовой палитры.

9.

CSS Gradient

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

10. Adobe Capture CC

Пользовательские цветовые палитры в Adobe Color.

Что может быть лучше, чем окружающий мир, чтобы черпать вдохновение в цветах? Экосистема Adobe Color имеет ряд ресурсов (включая генератор образцов), но больше всего я использую их приложение для iOS, Adobe Capture CC.

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

Читать по теме: Лучшие альтернативы Photoshop (бесплатные + платные) . Colormind может изучать цветовые стили по фотографиям, фильмам или другим источникам мультимедиа, которые вы можете использовать в качестве вдохновения, что делает его одним из самых умных генераторов цветовых палитр — цвет меня впечатлил.

12. Colorable

Программа Colorable, разработанная Jxnblk, позволяет веб-дизайнерам и полиграфистам легко тестировать различные цветовые комбинации, используя их шестнадцатеричные коды. Легко настраивайте значения RGB и HSV для точной настройки цветов. Сайт чрезвычайно прост в использовании: просто добавьте шестнадцатеричное значение для двух цветов, и система оценит комбинацию в соответствии с рекомендациями по доступности WCAG. Этот рейтинг гарантирует, что пользователи, страдающие дальтонизмом или слабовидящими, по-прежнему смогут читать дизайн с этими двумя цветами.

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

Это лишь некоторые из инструментов для работы с цветом, которые мы используем каждый день. Сообщите нам, какими инструментами вы пользуетесь в Twitter или Facebook.

Лучшие расширения Chrome для выбора цвета для получения цветовых кодов HEX, RGB и HSL

Для художников и любителей цвета

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

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

Содержание

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

Вы можете получить цветовой код для любого цвета, который вы видите на веб-странице, с помощью Color Picker Tool – Geco.

1. Нажмите кнопку расширения на панели инструментов.
2. Наведите курсор на цвет, который хотите определить.
3. Нажмите, чтобы сохранить цвет в списке расширений.

Затем вы увидите коды HEX, RGB и HSL в разделах New и Picked окна расширения. Выберите предыдущий цвет, который вы определили, и вы увидите эти коды в разделе New .

Дополнительные возможности:

• Автоматически копируйте HEX-код цвета в буфер обмена для удобной вставки в нужное место.
• Загрузите CSV-файл вашей цветовой палитры с кодами HEX, RGB и HSL.
• Настройте параметры для копирования в буфер обмена, включения уведомлений и использования щелчка правой кнопкой мыши.

Используйте пипетку от AKColor, чтобы получить код цвета с любого сайта, который вы видите в Интернете.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите пипетку слева и наведите курсор на цвет, который хотите определить.
3. Нажмите, чтобы просмотреть цветовые коды, а также ближайший цвет и средний цвет области.

Вы увидите красивое всплывающее окно с цветовыми кодами для RGB, RGBA, HEX, HSL и HSLA. Выберите любой из кодов, чтобы скопировать значения цвета в буфер обмена. Затем выберите Pick Again или Close .

Дополнительные возможности:

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

Если вы ищете палитру цветов, которую можно использовать не только в Интернете, но и в других местах, Pick Color — это инструмент для вас.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите Выберите свой цвет и затем выберите пипетку .
3. Наведите курсор на цвет, который хотите определить. Это может быть веб-сайт, рабочий стол или другое приложение.
4. Нажмите, чтобы сохранить цвет в расширении.

Затем вы увидите цветовые коды HEX, RGB и HSL в окне расширения. Вы можете скопировать HEX-код, выбрав значок копирования справа от него. Чтобы скопировать значения RGB или HSL, перейдите в раздел ниже и используйте эти значки копирования.

Бонусная функция

С помощью Pick Color вы можете быстро определить цвет на веб-странице и скопировать шестнадцатеричный код в буфер обмена всего за пару кликов.

1. Щелкните правой кнопкой мыши веб-страницу и выберите Выберите цвет на странице из контекстного меню.
2. Наведите курсор на цвет, и вы увидите прикрепленный HEX-код.
3. Нажмите, чтобы скопировать шестнадцатеричный код цвета в буфер обмена.

Чтобы узнать о другом расширении Chrome с полезными дополнительными функциями, взгляните на палитру цветов на сайте linangdata.com.

1. Нажмите кнопку расширения на панели инструментов и перейдите на вкладку Пипетка .
2. Выберите Пипетка и наведите курсор на цвет. Вы увидите, что шестнадцатеричный код появляется при перемещении указателя.
3. Нажмите, чтобы сохранить цвет в списке расширений и одновременно скопировать шестнадцатеричный код в буфер обмена.
4. Повторно откройте расширение с помощью кнопки на панели инструментов, и вы увидите коды HEX, RGB, HSL, HSV и CMYK. Выберите значок копирования справа от любого из кодов, чтобы поместить его в буфер обмена.

Дополнительные возможности:

• Используйте вкладку Color Picker для отображения основных цветов с их цветовыми кодами.
• Попробуйте цветовую шкалу 9Вкладка 0032 для просмотра различных цветовых оттенков с их цветовыми кодами.
• Откройте вкладку Color Blender для умножения, затемнения, осветления и наложения цветов.

Eye Dropper — хороший вариант выбора цвета для Chrome с несколькими бонусами, которые могут вам понравиться.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите Выберите цвет на веб-странице и наведите курсор на цвет. При перемещении указателя вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните цвет, чтобы сохранить его в списке расширений.
4. Когда вы снова откроете расширение, вы увидите цветовые коды HEX, HSL и RGB вместе с названием этого цвета в разделе Selected color.

Дополнительные возможности:

• Используйте вкладку Color Picker , чтобы смешивать собственные цвета.
• Экспортируйте историю цветов в виде файла CSV с кодами цветов.
• Настройте параметры копирования в буфер обмена, изменения внешнего вида указателя и отключения информации о цвете при перемещении курсора.

Если вы хотите идентифицировать цвета, а затем сгруппировать их для быстрого доступа, посмотрите Black-shrimp.

1. Нажмите кнопку расширения на панели инструментов. Откроется небольшое окно надстройки слева.
2. Наведите курсор на цвет, который хотите определить, и щелкните.
3. Вы сразу же увидите HEX-код в окне. Используйте раскрывающийся список рядом с определенным цветом, чтобы просмотреть цветовые коды RGB или HSL.
4. Чтобы сохранить цвет, выберите плюсик внизу окна.

Дополнительные возможности:

• Добавьте группу с помощью значка папки и перетащите в нее сохраненные цвета.
• Экспортируйте сохраненные цвета в файл ASE (Adobe Swatch Exchange).
• Используйте сочетания клавиш для добавления цвета, создания группы, удаления или экспорта.

Если модные дополнительные функции не для вас и вам нужно простое расширение, взгляните на Easy Color Picker.

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку Выберите в правом верхнем углу и наведите курсор на цвет. При перемещении указателя вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный цвет, а затем снова откройте расширение с помощью кнопки, чтобы просмотреть коды HEX, RGB и HSL.

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

Подобно Easy Color Picker, Colorfly Color Picker. Возьмите цвет, просмотрите код и скопируйте значения, если это необходимо.

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку Pick Color и наведите курсор на цвет. При перемещении курсора вы можете просматривать значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный цвет, и вы увидите коды HEX, RGB и HSL в окне расширения. Выберите любой цветовой код, чтобы скопировать его в буфер обмена.

9. Палитра цветов (от kipelovvycheslav)

Еще одно базовое расширение браузера Chrome имеет то же имя, что и другое в нашем списке, Color Picker, на этот раз от kipelovvycheslav.

1. Нажмите кнопку расширения на панели инструментов.
2. Наведите курсор на цвет, который хотите определить, и щелкните.
3. Повторно откройте расширение, чтобы просмотреть цветовые коды HEX, HSL и RGB.

Последнее, простое расширение Chrome без наворотов — Smart Color Picker.

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку Pick Color и наведите курсор на цвет. При перемещении курсора вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный цвет, а затем снова откройте расширение с помощью кнопки, чтобы просмотреть коды HEX, RGB и HSL. Выберите любой цветовой код, чтобы скопировать его в буфер обмена.

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

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

‘;document.getElementsByClassName(«post-ad-top»)[0].outerHTML=»;tocEl.outerHTML=tocHTML+newHTML;}}catch(e){console.log(e)}

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