Палитра цветов - памятка для начинающих

Цветовой палитрой называют фиксированный диапазон оттенков и цветов, который имеет цифровую или физическую реализацию в определённом виде.

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

Цветовые модели

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

Цветовая модель — это абстрактная форма описания цветового представления в виде определённых компонентов или координат, которые состоят из трёх или четырёх значений.

Цвета модели и способ их интерпретации определяют цветовое пространство. Для различных целей существует множество цветовых моделей, самые распространённые из которых — CMYK, HSV(B), RGB.

Цветовая модель CMYK

Цветовая модель CMYK

CMYK (Cyan, Magenta, Yellow, Black) — это субтрактивная модель образования цвета, которая чаще всего используется в полиграфии для триадной печати и обладает меньшим охватом цветов, чем RGB.

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

Данная цветовая модель является скорее набором данных для фотонаборного устройства.

Цветовая модель HSV(B)

Цветовая модель HSV(B)

HSV(B) (Hue, Saturation, Value (Brightness)) — модель цвета, координатами которой являются:

  • Hue — цветовой тон, который располагается в пределах от 0 до 360 градусов. В операционной системе Windows спектр цвета разделён на 240 оттенков;
  • Saturation — насыщенность, которая варьируется в пределах от 0 до 100. Чем ближе данный параметр к нулю, тем ближе цвет к серому и наоборот: чем выше цифра, тем цвет «чище»;
  • Value — насыщенность. Значение параметра варьируется от 0 до 100.

Цветовая модель RGB

Цветовая модель RGB

RGB (Red, Green, Blue) — это аддитивная модель цвета, которая описывает метод синтеза для цветовоспроизведения. Основные цвета данной модели связаны с особенностями восприятия цвета глазом человека, поэтому она широко применяется в технике.

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

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

В мониторах и телевизорах для синего, красного и зелёного каналов используют три светодиода или светофильтра. Яркость каждого определена интенсивностью свечения от 0 до 255. Таким образом, белый цвет точки в модели RGB имеет вид (R - 255, G - 255, B – 255), красный — (R – 255, G – 0, B – 0) и т. д.

Работа с цветом в среде HTML

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

На языке HTML код каждого цвета состоит из трёх шестнадцатеричных блоков, значения которых варьируются от 00 до ff.

Например:

  • Белый - #ffffff;
  • Чёрный - #000000;
  • Жёлтый - #ffff00;
  • Красный - #ff0000.

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

Например, если в поисковой системе Яндекс ввести RGB, вы увидите виджет для подбора цвета.

Работа с цветом в среде HTML

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

Работа с цветом в среде HTML - 2

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

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

Палитра должна содержать цветовые комбинации для каждого элемента сайта:

Однако изобретать велосипед вовсе необязательно. Есть великое множество простых онлайн-сервисов для создания и редактирования цветовой палитры на основе графического изображения или определённого цвета.

Вот только наиболее популярные из них:

  • Kuler;
  • Color Blender;
  • Color Scheme Designer;
  • Color Combos;
  • Color Palette Generator.

Надеемся, что прочитанный материал оказался для Вас полезен! До новых встреч!