Знакомство с LESS / Цветовые функции, введение [4/14]
×

Цветовые функции, введение [4/14]

Комплементарные цвета на цветовом колесе

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

Все цвета модели RGB можно расположить на цветовом колесе, где они плавно переходят друг в друга.

С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного цвета и получить новый цвет. Функция принимает два параметра, синтаксис её такой:


spin(цвет, угол_поворота)

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

color: spin(red, 90); // цвет повернётся от красного на 90° по часовой
border-color: spin(#f0f, -45); // цвет на 45° от #f0f против часовой

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

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Цветовые функции, введение</title> <meta charset="utf-8"> <base href="/assets/course85/"> <link href="course.css" rel="stylesheet"> </head> <body> <article class="palette"> <h1>Базовые цвета</h1> <figure class="palette-item"> <figcaption>Основной</figcaption> <span class="color color-primary">primary</span> </figure> <figure class="palette-item"> <figcaption>Комплементарный</figcaption> <span class="color color-complementary">compl</span> </figure> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); @distance: 0; @complementary-color: spin(@base-color, @distance); .color-primary { background-color: @base-color; } .color-complementary { background-color: @complementary-color; }
HTML Academy
  1. Переменной @distance задайте значение 180.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.