18 сервисов для подбора цветов и палитры

Мы в Telegram

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

Не всегда на серьёзных щах — шуточки тоже шутим =)

Подписаться

Станьте email-рокером 🤘

Пройдите бесплатный курс и запустите свою первую рассылку

Подробнее

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

Почему важно правильно подбирать цвета

Зрительное восприятие — основной источник получения информации. В первые полторы минуты мы оцениваем внешний вид, форму и цвет — так возникает первое впечатление. При этом до 90% впечатлений основаны на восприятии цветов.

Цвета влияют на поведение, настроение и эмоции. Например, покупатель может подсознательно решиться на покупку за доли секунды, просто потому что ему понравилось сочетание оттенков. По статистике, цвет влияет на 85% решений о покупке. При этом 93% покупателей обращают внимание только на внешний вид.

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

Есть много разных подходов к работе с цветом. Для профессионального подбора палитры нужно учитывать огромное количество факторов. Например, Институт цвета Pantone (Pantone Color Institute) ежегодно анализирует глобальные тренды, модные показы, социальные сети, кинематограф и выставки современного искусства, чтобы выбрать цвет года.

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

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

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

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

Coolors

Сайт. https://coolors.co/ Версии для работы. Веб-версия, iOS- и Android-приложения, плагин для Figma, расширение Chrome, расширение Adobe.  Стоимость. Бесплатно с ограничениями, про-версия — $3 в месяц.  Язык интерфейса. Английский.

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

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

Кроме веб-сервиса, у Coolors есть мобильные приложения, расширение для Chrome и Adobe, плагин для Figma. 

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

Paletton

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

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

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

Adobe Color CC

Сервис помогает создать палитру с учётом выбранного правила гармонии цветов и цветового режима. Основной цвет можно выбрать на круге или указать код вручную, а потом — скопировать коды цветов. Плюс работы с продуктами Adobe: после входу в систему можно сохранить палитру в Creative Cloud и потом использовать её в Photoshop, Illustrator, Fresco и других сервисах Adobe. 

Ещё из интересных возможностей сервиса:

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

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

Color Hunt

При изучении Color Hunt мне показалось, что создавать палитру здесь не очень удобно — подбирать цвета надо вручную, и без профессиональных навыков здесь не обойтись. Но сервис предлагает огромную библиотеку готовых палитр. Это поможет, если вы пока не понимаете, какую цветовую схему хотите, и вам нужно посмотреть разные варианты. 

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

А ещё у Color Hunt есть расширение для Chrome, которое показывает случайную палитру из лучших коллекций при каждом открытии новой вкладки.

In Color Balance

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

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

My Brand New Logo

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

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

Seo Checker: Color palette and schemes generator

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

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

ColorScheme

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

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

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

• просмотр примеров светлой и тёмной страницы в выбранной палитре;
• каталог цветов — можно посмотреть название и код понравившегося оттенка;
• отдельный каталог с названием автомобильных красок и именами цветов в HTML.

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

Color-Wizard

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

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

Palette Generator

Максимально простой генератор с узким функционалом. Palette Generator рандомно создаёт цветовые палитры при нажатии на пробел. Чтобы скопировать код, нужно просто кликнуть по нему или соответствующему цвету.

ColorSpace

Для создания палитры в ColorSpace достаточно указать цвет или его код — и запустить генерацию. Система сформирует 25 палитр по разным схемам на основе указанного цвета. Для каждого оттенка в палитре указан код. Также в сервисе можно создавать двух- и трёхцветные градиенты из выбранных цветов.

Colormind

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

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

CopyPalette

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

В созданной схеме HEX-код каждого цвета копируется по отдельности. Или готовую палитру можно скопировать в SVG и добавить Figma или Sketch для дальнейшего использования в дизайне.

Дополнительные сервисы для работы с цветом

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

Color Grid

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

Brand Colors

Здесь можно посмотреть фирменные цвета известных компаний. Список брендов с удобной поисковой строкой доступен на сайте.

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

Get UI Colors

Get UI Colors помогает проверить, как будет выглядеть текст белого цвета на цветном фоне. Для этого просто выберите цвет и кликните на кнопку, чтобы посмотреть результат. 

Multicolr Tineye

Инструмент помогает подбирать фото по цветам среди 20 млн. изображений с Flickr.

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

Shutterstock Spectrum

Инструмент помогает искать изображения с лицензией royalty-free — она предполагает оплату за использование контента только в момент покупки.

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

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

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы
и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

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

• 
  Дизайн
• 3 мин на чтение
• 
  5704

Михаил Аникин рассказал в статье на Medium как он и его коллеги подбирают цвета для выделения информационных блоков, объектных ответов; для управления вниманием и создания визуальной иерархии.

Различные сервисы Яндекса работают с цветом для решения интерфейсных задач: выделения информационных блоков, объектных ответов; для управления вниманием и создания визуальной иерархии.

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

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

У нас в Yandex Launcher есть промо-карточки приложений: рейтинг, описание и кнопка «Установить». Это контекстные рекомендации— открываются поверх списка приложений или в папке на рабочем столе.

Первоначальная реализация

Цвет для фона карточки подбирался автоматически на основе иконки, кнопка — полупрозрачная белая. Алгоритм пытался определить основной цвет иконки, разбирая пиксели по hue. Такой подход не всегда давал красивый результат, обладал недостатками:
● неправильное определение цвета,
● «грязные» цвета из-за усреднения,
● тусклые кнопки, скучные карточки.

Примеры проблемных карточек

Чего на самом деле хотелось

Карточка должна была стать настоящим продолжением иконки. Цвета — сочными и яркими. Хотелось создать ощущение, что карточку бережно делали вручную, а не подсунули что-то небрежно сгенерированное автоматически.

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

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

В субботу я сдул пыль с редактора кода, расчехлил HTML5 и Canvas и стал придумывать. В понедельник пришёл к команде с предложением.

Новый алгоритм определения цветов

Шаг 1.

Берём иконку. Выкидываем белые, чёрные и прозрачные пиксели.

Исходная иконка → Квадрат из отфильтрованных пикселей

Шаг 2.

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

Результат после второго шага. Исходная иконка → Цвета

У нас отключен антиалиасинг, чтобы цвета не смешивались, не становились «грязными».

На деле получается так:
квадрат делится на четыре части; мы берём средний пиксель из верхнего ряда каждой четверти.

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

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

Шаг 3.

Почти всё готово. Осталось совсем чуть-чуть: достаем полученные цвета, переводим в HSL, сортируем по светлоте (L). Красим карточку.

Светлая схема:
● фон — самый светлый цвет,
● кнопка — ближайший к светлому,
● текст — самый тёмный.

Тёмная схема (если 2 и более цветов тёмные):
● фон — самый тёмный цвет,
● кнопка — ближайший к тёмному,
● текст — самый светлый.

Применяя цвета, проверяем контрастность: разница Lightness между фоном и кнопкой ≥ 20; между фоном и текстом ≥ 60. Если не соответствует, корректируем.

И ещё немного карточек для примера:

Результат

У нас получились красочные карточки, из настоящих цветов иконки, без «грязных» примесей. За счет использования нескольких цветов карточка выглядит гораздо живее. Особенно приятно, что при однородном фоне иконки, карточка становится её прямым продолжением: граница между ними совсем не заметна.

И самое главное:
Через 2 дня после предложения нового алгоритма первая реализация уже была доступна в dev-сборке. Опробовали внутри команды, настроили пороги для фильтра на первом шаге, предусмотрели особые случаи:
● иконка из одного цвета — делаем фон чуть темнее, чтобы не сливалась,
● иконка с фоном—смотрим пиксели по краям, если все одинаковы, ставим такой же фон карточки.

Доработанный алгоритм вошёл в ближайший релиз.

Отдельное спасибо Диме Овчарову, руководителю группы разработки Yandex Launcher, — за интерес, желание и терпение.

Напоследок, больше примеров

Источник: medium

• #дизайн
• #советы
• #статья
• #цвет

• 
  
• 
  4
• 
  

::выбор | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

 р::выбор {
  фон: #fff;
  цвет: #ff0000;
} 

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

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

 :: выбор { фон: желтый; } 

Есть только три свойства, с которыми будет работать ::selection :

• цвет
• background (в частности, background-color , background-image полные свойства)
• text-shadow

в list, то это свойство будет игнорироваться. Может быть сложно увидеть background в этом списке, потому что свойство будет отображать цвет только при использовании на ::selection и не будет отображать фоновое изображение или градиент.

Также не пытайтесь:

 p::-moz-selection,
p::selection { цвет: красный; } 

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

Одним из наиболее полезных применений ::selection является отключение text-shadow во время выбора. Текстовая тень может конфликтовать с цветом фона выделения и затруднять чтение текста. Установить text-shadow: нет; , чтобы сделать текст четким и легко читаемым во время выделения.

Fancy

::selection

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

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

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

Поддержка браузера

Рабочий стол

Safari

0083

Мобильный телефон/планшет

Дополнительная информация

• Спецификация уровня 4 модуля CSS псевдоэлементов

MDN и цвет фона в CSS

CSS (каскадные таблицы стилей) это язык, который позволяет создавать красивые веб-страницы.

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

Независимо от того, создаете ли вы с нуля или используете BootStrap CSS, вам пригодятся знания HTML и CSS. В этой статье мы рассмотрим, как изменить цвет текста и фона в CSS.

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

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

Его синтаксис имеет вид color:color/initial/inherit;.

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

Его синтаксис: элемент {свойство цвета фона}.

Параметры цвета текста и фона CSS

Изменить цвет текста на веб-странице легко с помощью свойства цвета CSS.

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

• Имена цветов HTML: в CSS поддерживается 140 названий цветов. Желтый, фуксия, темно-бордовый и небесно-голубой — вот лишь несколько примеров.
• Шестнадцатеричные коды цветов: Эти коды состоят из трех пар символов, представляющих интенсивность трех основных цветов. Возможные значения варьируются от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета). Шестнадцатеричный код цвета для черного — #000000, для красного — #FF0000, а для синего — #0000FF.

Источник изображения

• Значения RGB: RGB — это еще одна цветовая модель, основанная на сочетании основных цветов: красного, зеленого и синего. Состоит из трех чисел, разделенных запятыми, каждое из которых представляет интенсивность соответствующего основного цвета в виде целого числа от 0 до 255. Черный — это RGB (0, 0, 0), красный — это RGB (255, 0, 0), а синий — это RGB (0, 0, 255).

Источник изображения

Загрузить сейчас: бесплатное вводное руководство по HTML и CSS

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

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

Теперь давайте рассмотрим, как изменить цвет и цвет фона встроенного текста в CSS.

Изменение цвета встроенного текста в CSS

Чтобы изменить цвет встроенного текста, перейдите в раздел вашей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство цвета с нужным значением. Например, вы хотите изменить цвет всех абзацев на вашем сайте на темно-синий. Затем вы должны добавить p {color: #000080; } в раздел заголовка вашего HTML-файла.

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

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

 
   
 
    тело { 
 
   цвет: синий; 
 
 } 
 
   
 

Если в селекторе тела не определен ни селектор тела, ни цвет, цвет по умолчанию, скорее всего, черный.

Допустим, я хочу изменить цвет абзацев на темно-синий, как указано в примере выше, и все ссылки на моем веб-сайте на цвет морской волны. Затем я бы использовал селектор типа p и селектор атрибута a[href] и установил для свойства цвета значения #000080 и #00FFFF соответственно.

Вот CSS:

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

 
   
 
    р { 
 
   цвет: #000080; 
 
 } 
 
 а [ссылка] { 
 
   цвет: #00FFFF; 
 
 } 
 
   
 

Вот код HTML:

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

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

 
 
Другой абзац, содержащий ссылку. 
 

 
   
 

Вот результат:

См. Pen Изменение цвета встроенного текста в CSS от HubSpot (@hubspot) на CodePen.

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

Рекомендуемый ресурс

25 советов по кодированию HTML и CSS

Заполните форму, чтобы получить доступ к вашим советам по программированию и шаблонам.

Изменение цвета фона текста в CSS

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

Pro Tip: Этот код является интерактивным, попробуйте изменить его, чтобы увидеть разницу.

 
   
 
   а[ссылка] { 
 
    цвет: #000000; 
 
    фоновый цвет: #FFFF00; 
 
 } 
 
   
 

Цвет фона CSS

Свойство background-color CSS позволяет изменить цвет фона HTML-элемента. Вы можете установить цвет фона для многих элементов, включая таблицу, div, заголовок и элемент span.

При определении свойства цвета необходимо также определить цвет фона. Необходимо соответствовать W3C CSS и другим фреймворкам, иначе это не повредит.

Проверка цветового контраста

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

Взгляните еще раз на демо выше.

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

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

Это потребует времени и исследований. Однако, если вы только начинаете исследовать дальтонизм, то такой инструмент, как Contrast Checker, может помочь вам сделать доступные варианты при изменении цвета текста на вашем сайте.

Вы можете ввести цвет и цвет фона, и он скажет вам «пройдено», если пара имеет коэффициент контрастности 4,5: 1. Все, что ниже, провалится. Мы будем использовать этот инструмент для определения цветов в примере ниже.

Скажем, я хочу, чтобы мой текст был красным, а фон серым. Я мог бы начать с подключения # FF0000 и # 808080 к Contrast Checker и увидеть, что он имеет коэффициент контрастности только 1: 1. Это не хорошо.

Чтобы улучшить соотношение, я буду перемещать ползунок цвета переднего плана влево, а ползунок цвета фона вправо, пока не достигну минимума 4,5:1.

Так как я хочу, чтобы мой дизайн был как можно более четким, я выберу цвет #940000 и цвет фона #E0E0E0 с соотношением 7:1.

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

Вот CSS:

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

 
   
 
    a[ссылка] { 
 
   цвет: #940000; 
 
   фоновый цвет: #E0E0E0; 
 
   украшение текста: нет; 
 
 } 
 

Вот код HTML:

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

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

 
 
Другой абзац, содержащий ссылку.
 

 

Вот результат:

This entry was posted in Популярное