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

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

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

Встроенные цвета CSS

HTML/CSS имеют 140 встроенных цветов, которые поддерживаются во всех браузерах. Чтобы использовать один из них, просто введите свойство, а затем имя цвета, который вы хотите использовать.

h1 {
    color: steelblue;
  }

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



Имена цветов — цветовые коды HTML
Как и шестнадцатеричные коды цветов, имена цветов HTML можно использовать со встроенными стилями HTML или в отдельной таблице стилей CSS. HTML…htmlcolorcodes.com



RGBA

RGBA (расшифровывается как Red Green Blue и Alpha) — распространенный способ определения цветов.

h1 {
      rgba(70, 130, 180, 1.0);
  }

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



Палитра цветов RGBA
Цветовое пространство — это математическая модель, используемая для представления физических цветов. Цветовое пространство RGB — это цветовое пространство, составленное…rgbacolorpicker.com



HSLA

HSLA (расшифровывается как Hue, Saturation, Lightness и Alpha) еще более адаптируется, чем RGB, когда дело доходит до внесения изменений в цвет после создания веб-сайта.

h1 {
      hsla(207.27, 44.00%, 49.02%, 1.0);
  }

Давайте разберем, что на самом деле означает каждый из этих компонентов:

  • Оттенок определяет угол, под которым цвет лежит на цветовом круге от 0 до 360 градусов. С красноватыми тонами около отметки 0/360 градусов и голубоватыми тонами около отметки 180 градусов.
  • Насыщенность — это интенсивность цвета в процентах, где 100 % — это полный цвет, а 0 % — полностью серый.
  • Яркость будет варьироваться в диапазоне от черного (0%) до белого (100%) с нейтральным освещением, попадающим в середину диапазона (50%).
  • Альфа диктует прозрачность цвета между полностью прозрачным (0,0) и совсем не прозрачным (1,0).

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

Шестнадцатеричные коды

Шестнадцатеричные (HEX) значения цвета определяются в формате: #RRGGBB.

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



Цветовые шестнадцатеричные коды цветов
Цветовой шестнадцатеричный код дает информацию о цветах, включая цветовые модели (RGB, HSL, HSV и CMYK), триадные цвета, монохроматические…www. цвет-hex.com



Градиенты

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

Градиентный фон задается с помощью свойства background-image вместо background-color и имеет 3 входа.

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

background-image: linear-gradient(to left, lightblue, darkblue);

Фоновые изображения

Пока мы говорим о свойстве background-image, я решил упомянуть, что оно, конечно же, используется не только для создания градиентов, но также позволяет использовать изображение в качестве фона для элемента.

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

  • background-image — это свойство, в котором вы указываете, какое изображение вы хотели бы использовать. Ссылка может быть относительной (ссылка на файл в структуре папок) или абсолютной (ссылка на изображение в Интернете).
  • background-repeat — по умолчанию установлено повторение изображения в фоновом пространстве. Например, если изображение имеет ширину 200 пикселей, а размер экрана 700 пикселей, изображение будет отображаться на экране 3,5 раза. Чтобы отключить это, добавьте свойство background-repeat в свой файл CSS и объявите «no-repeat».
  • background-size. Скорее всего, выбранное вами изображение имеет не идеальное соотношение сторон для экрана (особенно если учесть, что ваш сайт можно просматривать на разных устройствах). Свойство background-size помогает сообщить программе, как с этим справиться. Существует несколько вариантов, но два из основных — «обложка» и «содержать» — обложка обрезает изображение по размеру экрана, а содержит отрегулирует соотношение сторон изображения, но все равно отобразит его целиком.

Пример ниже показывает их в действии:

header {
    background-image: url("my-image-path");
    background-repeat: no-repeat;
    background-size: contain;
    }

Резервные цвета

Резервное свойство — это свойство, указанное для использования в случае, если браузер не поддерживает вызываемое свойство. Хотя большинство браузеров поддерживают различные методы цветопередачи (только IE8 и более ранние версии не поддерживают RGBA/HSLA), у них есть и другие преимущества.

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

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

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

h1 {
     background-color: black; //Fallback color
     background-image: url("my-image-path");

Получение вдохновения

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

Лично я использую Coolors почти для каждого проекта. Цветовые палитры легко найти по популярности или указав начальный цвет высокого уровня. Затем вы можете скопировать HEX-код одним нажатием кнопки и добавить его в свой проект.



Coolors — сверхбыстрый генератор цветовых палитр!
Создавайте или просматривайте красивые цветовые комбинации для своих дизайнов.coolors.co



Еще один альтернативный вариант — Color Hunt. Преимущество этого сайта в том, что ключевые слова внизу главной страницы позволяют фильтровать цветовые палитры в зависимости от настроения вашего сайта. Например, вы можете просматривать палитры с ощущением «Лето», «Природа» или «Рождество».



Цветовые палитры для дизайнеров и художников — Color Hunt
Откройте для себя новейшие подобранные вручную цветовые палитры Color Hunt. Получите вдохновение от цвета для своих дизайнерских и художественных проектов.colorhunt.co



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



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



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