Функции цветов Sass

Установка цвета с использованием модели Red-Green-Blue (RGB).
Указание значений RGB-цвета через rgb(red, green, blue).
Каждый параметр определяет интенсивность цвета, это может быть целое число от 0 до 255 или процентное значение (от 0% до 100%).

Пример:

rgb(0, 0, 255);
//呈现为蓝色，因为blue参数设置为其最高值(255)，其他参数设置为0

Устанавливает цвет с использованием модели Red-Green-Blue-Alpha (RGBA).
Цветовая стоимость RGBA является расширением цветовой стоимости RGB, имеющей alpha-канал - этот канал указывает на непрозрачность цвета.
alpha Параметр является числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

Пример:

rgba(0, 0, 255, 0.3); // Прозрачный синий

Устанавливает цвет с использованием модели Hue-Saturation-Lightness - и представляет собой цилиндрическую координатную систему цвета.
Hue (色调) - это градус на цветовом колесе (от 0 до 360); 0 или 360 - красный, 120 - зеленый, 240 - синий
Saturation (насыщенность) также выражается в процентах; 0% - серый, 100% - полная окраска.
Lightness (яркость) также выражается в процентах; 0% - черный, 100% - белый.

Пример:

hsl(120, 100%, 50%); // Зеленый
hsl(120, 100%, 75%); // Светло-зеленый
hsl(120, 100%, 25%); // Темно-зеленый
hsl(120, 60%, 70%); // Слабо-зеленый

Устанавливает цвет с использованием модели Hue-Saturation-Lightness-Alpha (HSLA).
Цветовая стоимость HSLA является расширением цветовой стоимости HSL, имеющей alpha-канал - он указывает на непрозрачность цвета.
alpha Параметр является числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

Пример:

hsl(120, 100%, 50%, 0.3); // Зеленый с непрозрачностью
hsl(120, 100%, 75%, 0.3); // Светло-зеленый с непрозрачностью

Устанавливает серый цвет с таким же уровнем яркости, как и цвет.

Пример:

grayscale(#7fffd4);

Результат: #c6c6c6

Устанавливает комплементарный цвет.

Пример:

complement(#7fffd4);

Результат: #ff7faa

Устанавливает негативный или инверсный цвет.
Создание смешанного цвета из цветов 1 и 2.Параметр является опциональным и должен быть числом между 0% и 100%. Значением по умолчанию является 100%.

Пример:

invert(white);

Результат: black

Возвращает красный цвет в диапазоне от 0 до 255 в виде числа.

Пример:

red(#7fffd4);

Результат: 127

red(red);

blue(blue);

Возвращает зеленый цвет в диапазоне от 0 до 255 в виде числа.

Пример:

green(#7fffd4);

blue(blue);

green(blue);

green(blue);

blue(

Пример:

Возвращает значение синего цвета в числовом формате от 0 до 255.

blue(#7fffd4);

результат: 212

blue(blue);

hue(

Пример:

Возвращает значение тона цвета в числовом формате от 0deg до 360deg.

hue(#7fffd4);

saturation(

Пример:

Возвращает значение насыщенности цвета в числовом формате от 0% до 100%.

saturation(#7fffd4);

lightness(

Пример:

Возвращает значение светимости цвета в числовом формате от 0% до 100%.

lightness(#7fffd4);

opacity(

Пример:

alpha(

alpha(#7fffd4);

opacity(

Пример:

Возвращает значение Alpha канала цвета в числовом формате от 0 до 1.

opacity(rgba(127, 255, 212, 0.5));

mix(
Создание смешанного цвета из цветов 1 и 2. вес
параметры должны быть между 0% и 100%. По умолчанию 50%. большая весовая категория означает, что должно быть использовано больше.
Меньшая весовая категория означает, что должно быть использовано больше color2.

Корректировка оттенка цвета в градусах от -360 до 360.

Пример:

adjust-hue(#7fffd4, 80deg);

Результат: #8080ff

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

Пример:

adjust-color(#7fffd4, blue: 25);

Результат:

Установка одного или нескольких параметров цвета в новый значения.

Пример:

change-color(#7fffd4, red: 255);

Результат: #ffffd4

Создание нового цвета с использованием заданного канала alpha.

Пример:

rgba(#7fffd4, 30%);

Результат: rgba(127, 255, 212, 0.3)