Создание Color Wheel на Jade и Sass

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

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

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

Основная разметка цветового круга

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

Итак, мы создадим div с классом .color-wheel, в котором будут находится три неупорядоченных списка:

color-wheel.jade

.color-wheel
  .lighten-colors
    ul
      each i in new Array(12)
        li   
  .default-colors
    ul
      each i in new Array(12)
        li  
  .darken-colors
    ul
      each i in new Array(12)
        li 

Одним из интересных моментов в Jade, является использование циклов для создания нескольких элементов li.

Настало время определить переменные для нашего цветового круга. Все цвета и оттенки будут автоматически рассчитываться от $main-color, также необходимо добавить две переменные для светлых и темных тонов - $how-dark и $how-light. Давайте посмотрим на классический цветовой круг от Boutet, который имеет 12 слотов:

Здесь представлен круг, который разделен на 12 слотов, т.е. один слот это 30 градусов. Создадим переменную $angle со значением 30:

color-wheel-variables.scss

$main-color : #13a3c7;
$how-dark: 25%;
$how-light: 25%;
$angle : 30;

Внутри класса .color-wheel, каждый контейнер будет иметь свойства border-radius: 50% и overflow: hidden:

color-wheel{
  position: relative;
  div {
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
  }
} 

Так как цветовые слоты это элементы li в виде треугольников, они будут вращать $new-angle исходного $angle * $i счетчика первоначальной позиции.

color-wheel-loop.scss

@for $i from 1 through 12 {
  $new-angle:$angle*$i; 
  ul li:nth-of-type(#{$i}){
    border-left: 205px solid transparent;
    border-top: 120px solid  $main-color;
    height: 0;
    left: 50%;
    list-style: none;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    transform: rotate(#{$new-angle}deg);
  }
}

Теперь у нас есть целый круг, но все слоты имеют одинаковый цвет. Таким образом, мы создадим переменную $new-color, которая будет вычислять оттенок от переменной $main-color к $new-angle, каждый раз при запуске цикла.

Мы можем также обновить светлые и темные оттенки в переменной $new-color для наружного и внутреннего кольца, используя переменные $how-dark и $how-light.

color-wheel-loop-2.scss

@for $i from 1 through 12 {
  $new-angle:$angle*$i; 
  $new-color:adjust-hue($main-color,$new-angle);
  ul li:nth-of-type(#{$i}){
    border-left: 205px solid transparent;
    border-top: 120px solid  $new-color;
    height: 0;
    left: 50%;
    list-style: none;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    transform: rotate(#{$new-angle}deg);
  }
  .default-colors li:nth-of-type(#{$i}){
    border-top-color: $new-color;
  }
  .darken-colors li:nth-of-type(#{$i}){
    border-top-color: darken($new-color, $how-dark);
  }
  .lighten-colors li:nth-of-type(#{$i}){
    border-top-color: lighten($new-color, $how-light);
  }
}

Теперь мы можем добавить еще один цикл вставляет $i в содержание псевдо-элемента :after для каждого li.

protractor-loop.scss

.protractor {
  @for $i from 1 through 24 {
    $new-angle: 15*$i;
    ul li:nth-of-type(#{$i}){   
      transform: rotate(#{$new-angle}deg);
      &:after {
        content: "#{$new-angle}°";
      }
    }
  }
}

Основная структура готова! Теперь у нас есть 3 цветовых кольца с различными оттенками.

See the Pen Color Wheel with Protractor by Krystal Campioni (@krystalcampioni) on CodePen.

Создание цветовой гармонии

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

Для их реализации в Sass, мы можем манипулировать переменной $main-color, вращая насыщенность под разными углами. Чтобы получить дополнительные цвета, для примера, повернем $main-color на 180 градусов. Или, создадим квадратную цветовую схему, в которой будем поворачивать каждый цвет на 90 градусов от предыдущего.

square-colors.scss

.square-colors {
  @for $i from 1 through 3 {
    $new-angle: 90*$i;
    $new-color:adjust-hue($main-color,$new-angle);
    ul li:nth-of-type(#{$i}){
      background: $new-color;
    }
  }
}

See the Pen Sass + Jade Color palletes by Krystal Campioni (@krystalcampioni) on CodePen.

 

Перевод статьи Oiling the Color Wheel with Jade + Sass

Тэги: sassscssjade

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.