+7 (925) 801-48-20
+7 (925) 801-48-20
cbfg@jbbq-onfr.eh

Полная палитра цветов {less}

Полная палитра цветов {less}

Все цвета доступны в виде переменных { less }. LESS – это динамический язык стилей, препроцессор CSS, позволяющий писать ясный CSS с использованием программных конструкций вместо статических правил. LESS включает в себя такие расширения CSS, как переменные, вложенные блоки, примеси, операторы и функции.

Функции и операции

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

Список цветовых функций:
  • lighten(@color, 10%); // возвращает цвет, который на 10% светлее, чем @color
  • darken(@color, 10%); // возвращает цвет, который на 10% темнее, чем @color
  • saturate(@color, 10%); // возвращает цвет, который на 10% более насыщенный, чем @color
  • desaturate(@color, 10%); // возвращает цвет, который на 10% менее насыщенный, чем @color
  • fadein(@color, 10%); // возвращает цвет, который на 10% менее прозрачен, чем @color
  • fadeout(@color, 10%); // возвращает цвет, который на 10% более прозрачен, чем @color
  • fade(@color, 50%); // возвращает @color с 50%-ной прозрачностью
  • spin(@color, 10); // возвращает цвет с оттенком в 10 раз большим, чем @color
  • spin(@color, -10); // возвращает цвет с оттенком в 10 раз меньшим, чем @color
  • mix(@color1, @color2); // возвращает микс цветов @color1 и @color2
Пример (фрагмент кода LESS):
:root {
@blue: #0d6efd; // базовый цвет переменной “@blue”
--bs-blue-800: darken(@blue, 27%);
}
Будет скомпилирован следующий код в CSS:
:root {
--bs-blue-800: #005ca8;
}
/* ---------------------- Цвета -- */
:root {
@gray: #919ca6;
    --bs-gray-100: lighten(@gray, 36%);
    --bs-gray-200: lighten(@gray, 30%);
    --bs-gray-300: lighten(@gray, 20%);
    --bs-gray-400: lighten(@gray, 10%);
    --bs-gray: @gray;
    --bs-gray-600: darken(@gray, 10%);
    --bs-gray-700: darken(@gray, 20%);
    --bs-gray-800: darken(@gray, 30%);
    --bs-gray-900: darken(@gray, 40%);
@blue-gray: #6c92af;
    --bs-blue-gray-100: lighten(@blue-gray, 40%);
    --bs-blue-gray-200: lighten(@blue-gray, 30%);
    --bs-blue-gray-300: lighten(@blue-gray, 20%);
    --bs-blue-gray-400: lighten(@blue-gray, 10%);
    --bs-blue-gray: @blue-gray;
    --bs-blue-gray-600: darken(@blue-gray, 10%);
    --bs-blue-gray-700: darken(@blue-gray, 20%);
    --bs-blue-gray-800: darken(@blue-gray, 30%);
    --bs-blue-gray-900: darken(@blue-gray, 40%);
@cyan: #0dcaf0;
    --bs-cyan-100: lighten(@cyan, 40%);
    --bs-cyan-200: lighten(@cyan, 30%);
    --bs-cyan-300: lighten(@cyan, 20%);
    --bs-cyan-400: lighten(@cyan, 10%);
    --bs-cyan: @cyan;
    --bs-cyan-600: darken(@cyan, 10%);
    --bs-cyan-700: darken(@cyan, 20%);
    --bs-cyan-800: darken(@cyan, 30%);
    --bs-cyan-900: darken(@cyan, 37%);
@light-blue: #42aaff;
    --bs-light-blue-100: lighten(@light-blue, 36%);
    --bs-light-blue-200: lighten(@light-blue, 27%);
    --bs-light-blue-300: lighten(@light-blue, 18%);
    --bs-light-blue-400: lighten(@light-blue, 9%);
    --bs-light-blue: @light-blue;
    --bs-light-blue-600: darken(@light-blue, 10%);
    --bs-light-blue-700: darken(@light-blue, 20%);
    --bs-light-blue-800: darken(@light-blue, 30%);
    --bs-light-blue-900: darken(@light-blue, 40%);
@blue: #0077ff;
    --bs-blue-100: lighten(@blue, 40%);
    --bs-blue-200: lighten(@blue, 30%);
    --bs-blue-300: lighten(@blue, 20%);
    --bs-blue-400: lighten(@blue, 10%);
    --bs-blue: @blue;
    --bs-blue-600: darken(@blue, 9%);
    --bs-blue-700: darken(@blue, 18%);
    --bs-blue-800: darken(@blue, 27%);
    --bs-blue-900: darken(@blue, 36%);
@indigo: #8500e8;
    --bs-indigo-100: lighten(@indigo, 40%);
    --bs-indigo-200: lighten(@indigo, 30%);
    --bs-indigo-300: lighten(@indigo, 20%);
    --bs-indigo-400: lighten(@indigo, 10%);
    --bs-indigo: @indigo;
    --bs-indigo-600: darken(@indigo, 9%);
    --bs-indigo-700: darken(@indigo, 18%);
    --bs-indigo-800: darken(@indigo, 27%);
    --bs-indigo-900: darken(@indigo, 36%);
@purple: #e600e6;
    --bs-purple-100: lighten(@purple, 40%);
    --bs-purple-200: lighten(@purple, 30%);
    --bs-purple-300: lighten(@purple, 20%);
    --bs-purple-400: lighten(@purple, 10%);
    --bs-purple: @purple;
    --bs-purple-600: darken(@purple, 9%);
    --bs-purple-700: darken(@purple, 18%);
    --bs-purple-800: darken(@purple, 27%);
    --bs-purple-900: darken(@purple, 36%);
@pink: #eb238c;
    --bs-pink-100: lighten(@pink, 40%);
    --bs-pink-200: lighten(@pink, 30%);
    --bs-pink-300: lighten(@pink, 20%);
    --bs-pink-400: lighten(@pink, 10%);
    --bs-pink: @pink;
    --bs-pink-600: darken(@pink, 10%);
    --bs-pink-700: darken(@pink, 20%);
    --bs-pink-800: darken(@pink, 30%);
    --bs-pink-900: darken(@pink, 40%);
@red: #e83538;
    --bs-red-100: lighten(@red, 40%);
    --bs-red-200: lighten(@red, 30%);
    --bs-red-300: lighten(@red, 20%);
    --bs-red-400: lighten(@red, 10%);
    --bs-red: @red;
    --bs-red-600: darken(@red, 10%);
    --bs-red-700: darken(@red, 19%);
    --bs-red-800: darken(@red, 28%);
    --bs-red-900: darken(@red, 37%);
@orange: #ff6800;
    --bs-orange-100: lighten(@orange, 40%);
    --bs-orange-200: lighten(@orange, 30%);
    --bs-orange-300: lighten(@orange, 20%);
    --bs-orange-400: lighten(@orange, 10%);
    --bs-orange: @orange;
    --bs-orange-600: darken(@orange, 8%);
    --bs-orange-700: darken(@orange, 16%);
    --bs-orange-800: darken(@orange, 24%);
    --bs-orange-900: darken(@orange, 32%);
@yellow: #ffc107;
    --bs-yellow-100: lighten(@yellow, 40%);
    --bs-yellow-200: lighten(@yellow, 30%);
    --bs-yellow-300: lighten(@yellow, 20%);
    --bs-yellow-400: lighten(@yellow, 10%);
    --bs-yellow: @yellow;
    --bs-yellow-600: darken(@yellow, 9%);
    --bs-yellow-700: darken(@yellow, 18%);
    --bs-yellow-800: darken(@yellow, 27%);
    --bs-yellow-900: darken(@yellow, 36%);
@lime: #bfff00;
    --bs-lime-100: lighten(@lime, 40%);
    --bs-lime-200: lighten(@lime, 30%);
    --bs-lime-300: lighten(@lime, 20%);
    --bs-lime-400: lighten(@lime, 10%);
    --bs-lime: @lime;
    --bs-lime-600: darken(@lime, 9%);
    --bs-lime-700: darken(@lime, 18%);
    --bs-lime-800: darken(@lime, 27%);
    --bs-lime-900: darken(@lime, 36%);
@green: #3fa456;
    --bs-green-100: lighten(@green, 40%);
    --bs-green-200: lighten(@green, 30%);
    --bs-green-300: lighten(@green, 20%);
    --bs-green-400: lighten(@green, 10%);
    --bs-green: @green;
    --bs-green-600: darken(@green, 8%);
    --bs-green-700: darken(@green, 16%);
    --bs-green-800: darken(@green, 24%);
    --bs-green-900: darken(@green, 32%);
@teal: #00cccc;
    --bs-teal-100: lighten(@teal, 45%);
    --bs-teal-200: lighten(@teal, 33%);
    --bs-teal-300: lighten(@teal, 15%);
    --bs-teal-400: lighten(@teal, 6%);
    --bs-teal: @teal;
    --bs-teal-600: darken(@teal, 8%);
    --bs-teal-700: darken(@teal, 16%);
    --bs-teal-800: darken(@teal, 24%);
    --bs-teal-900: darken(@teal, 32%);
@brown: #795039;
    --bs-brown-100: lighten(@brown, 40%);
    --bs-brown-200: lighten(@brown, 30%);
    --bs-brown-300: lighten(@brown, 20%);
    --bs-brown-400: lighten(@brown, 10%);
    --bs-brown: @brown;
    --bs-brown-600: darken(@brown, 6%);
    --bs-brown-700: darken(@brown, 12%);
    --bs-brown-800: darken(@brown, 18%);
    --bs-brown-900: darken(@brown, 24%);
}
Например, чтобы получить такой код в CSS
.bg-gray-100 { background-color: var(--bs-gray-100); } .text-gray-100 { color: var(--bs-gray-100); }
…
.bg-gray-400 { background-color: var(--bs-gray-400); } .text-gray-400 { color: var(--bs-gray-400); }
.bg-gray { background-color: var(--bs-gray); }         .text-gray { color: var(--bs-gray); }
.bg-gray-600 { background-color: var(--bs-gray-600); } .text-gray-600 { color: var(--bs-gray-600); }
…
.bg-gray-900 { background-color: var(--bs-gray-900); } .text-gray-900 { color: var(--bs-gray-900); }
но для каждого из вышеперечисленных цветов. Нужно выполнить следующий код в LESS:
@colors: brown, teal, green, lime, yellow, orange, red,
pink, purple, indigo, blue, light-blue, cyan, blue-gray, gray;
@list-length: length(@colors);
.color-loop(@index) when (@index > 0) {
  @color: extract(@colors, @index);
.bg-@{color}-100 { background-color: var(~"--bs-@{color}-100") }
.text-@{color}-100 { color: var(~"--bs-@{color}-100") }
.bg-@{color}-200 { background-color: var(~"--bs-@{color}-200") }
.text-@{color}-200 { color: var(~"--bs-@{color}-200") }
.bg-@{color}-300 { background-color: var(~"--bs-@{color}-300") }
.text-@{color}-300 { color: var(~"--bs-@{color}-300") }
.bg-@{color}-400 { background-color: var(~"--bs-@{color}-400") }
.text-@{color}-400 { color: var(~"--bs-@{color}-400") }
.bg-@{color} { background-color: var(~"--bs-@{color}") }
.text-@{color} { color: var(~"--bs-@{color}") }
.bg-@{color}-600 { background-color: var(~"--bs-@{color}-600") }
.text-@{color}-600 { color: var(~"--bs-@{color}-600") }
.bg-@{color}-700 { background-color: var(~"--bs-@{color}-700") }
.text-@{color}-700 { color: var(~"--bs-@{color}-700") }
.bg-@{color}-800 { background-color: var(~"--bs-@{color}-800") }
.text-@{color}-800 { color: var(~"--bs-@{color}-800") }
.bg-@{color}-900 { background-color: var(~"--bs-@{color}-900") }
.text-@{color}-900 { color: var(~"--bs-@{color}-900") }
  .color-loop(@index - 1);
}
.color-loop(length(@colors));

Все цвета

@gray
#919ca6
--bs-gray-100
--bs-gray-200
--bs-gray-300
--bs-gray-400
--bs-gray
--bs-gray-600
--bs-gray-700
--bs-gray-800
--bs-gray-900
@blue-gray
#6c92af
--bs-blue-gray-100
--bs-blue-gray-200
--bs-blue-gray-300
--bs-blue-gray-400
--bs-blue-gray
--bs-blue-gray-600
--bs-blue-gray-700
--bs-blue-gray-800
--bs-blue-gray-900
@cyan
#0dcaf0
--bs-cyan-100
--bs-cyan-200
--bs-cyan-300
--bs-cyan-400
--bs-cyan
--bs-cyan-600
--bs-cyan-700
--bs-cyan-800
--bs-cyan-900
@light-blue
#42aaff
--bs-light-blue-100
--bs-light-blue-200
--bs-light-blue-300
--bs-light-blue-400
--bs-light-blue
--bs-light-blue-600
--bs-light-blue-700
--bs-light-blue-800
--bs-light-blue-900
@blue
#0d6efd
--bs-blue-100
--bs-blue-200
--bs-blue-300
--bs-blue-400
--bs-blue
--bs-blue-600
--bs-blue-700
--bs-blue-800
--bs-blue-900
@indigo
#8500e8
--bs-indigo-100
--bs-indigo-200
--bs-indigo-300
--bs-indigo-400
--bs-indigo
--bs-indigo-600
--bs-indigo-700
--bs-indigo-800
--bs-indigo-900
@purple
#e600e6
--bs-purple-100
--bs-purple-200
--bs-purple-300
--bs-purple-400
--bs-purple
--bs-purple-600
--bs-purple-700
--bs-purple-800
--bs-purple-900
@pink
#eb238c
--bs-pink-100
--bs-pink-200
--bs-pink-300
--bs-pink-400
--bs-pink
--bs-pink-600
--bs-pink-700
--bs-pink-800
--bs-pink-900
@red
#e83538
--bs-red-100
--bs-red-200
--bs-red-300
--bs-red-400
--bs-red
--bs-red-600
--bs-red-700
--bs-red-800
--bs-red-900
@orange
#ff6800
--bs-orange-100
--bs-orange-200
--bs-orange-300
--bs-orange-400
--bs-orange
--bs-orange-600
--bs-orange-700
--bs-orange-800
--bs-orange-900
@yellow
#ffc107
--bs-yellow-100
--bs-yellow-200
--bs-yellow-300
--bs-yellow-400
--bs-yellow
--bs-yellow-600
--bs-yellow-700
--bs-yellow-800
--bs-yellow-900
@lime
#bfff00
--bs-lime-100
--bs-lime-200
--bs-lime-300
--bs-lime-400
--bs-lime
--bs-lime-600
--bs-lime-700
--bs-lime-800
--bs-lime-900
@green
#3fa456
--bs-green-100
--bs-green-200
--bs-green-300
--bs-green-400
--bs-green
--bs-green-600
--bs-green-700
--bs-green-800
--bs-green-900
@teal
#00cccc
--bs-teal-100
--bs-teal-200
--bs-teal-300
--bs-teal-400
--bs-teal
--bs-teal-600
--bs-teal-700
--bs-teal-800
--bs-teal-900
@brown
#795039
--bs-brown-100
--bs-brown-200
--bs-brown-300
--bs-brown-400
--bs-brown
--bs-brown-600
--bs-brown-700
--bs-brown-800
--bs-brown-900
black
#000
white
#fff

Полезные ресурсы

Конвертер файловConvertio HTML пиктограммы
223 просмотра