Цветовая палитра
Все элементы в SIMAI Framewrok используют цветовую палитру с поддержкой цветовых тем.
Описание
Все элементы в SIMAI Framework используют палитру состоящую из 8 цветов по 10 оттенков, а также черного, белого и прозрачного цвета.
Группы цветов
Ниже приведены группы цветов. Все значения цветов представлены для базового состояния (без учета темы).
Прозрачный, черный, белый
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| transparent | --sf-transparent |
rgba(0,0,0,0) |
|
| white | --sf-white |
rgba(255,255,255,var(--sf-alfa)) |
|
| black | --sf-black |
rgba(0,0,0,var(--sf-alfa)) |
Gray
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| gray-0 | --sf-gray-0 |
rgba(250,251,252,var(--sf-alfa)) |
|
| gray-1 | --sf-gray-1 |
rgba(246,248,250,var(--sf-alfa)) |
|
| gray-2 | --sf-gray-2 |
rgba(225,228,232,var(--sf-alfa)) |
|
| gray-3 | --sf-gray-3 |
rgba(209,213,218,var(--sf-alfa)) |
|
| gray-4 | --sf-gray-4 |
rgba(149,157,165,var(--sf-alfa)) |
|
| gray-5 | --sf-gray-5 |
rgba(106,115,125,var(--sf-alfa)) |
|
| gray-6 | --sf-gray-6 |
rgba(88,96,105,var(--sf-alfa)) |
|
| gray-7 | --sf-gray-7 |
rgba(68,77,86,var(--sf-alfa)) |
|
| gray-8 | --sf-gray-8 |
rgba(47,54,61,var(--sf-alfa)) |
|
| gray-9 | --sf-gray-9 |
rgba(36,41,46,var(--sf-alfa)) |
Red
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| red-0 | --sf-red-0 |
rgba(255,238,240,var(--sf-alfa)) |
|
| red-1 | --sf-red-1 |
rgba(255,220,224,var(--sf-alfa)) |
|
| red-2 | --sf-red-2 |
rgba(253,174,183,var(--sf-alfa)) |
|
| red-3 | --sf-red-3 |
rgba(249,117,131,var(--sf-alfa)) |
|
| red-4 | --sf-red-4 |
rgba(234,74,90,var(--sf-alfa)) |
|
| red-5 | --sf-red-5 |
rgba(215,58,73,var(--sf-alfa)) |
|
| red-6 | --sf-red-6 |
rgba(203,36,49,var(--sf-alfa)) |
|
| red-7 | --sf-red-7 |
rgba(179,29,40,var(--sf-alfa)) |
|
| red-8 | --sf-red-8 |
rgba(158,28,35,var(--sf-alfa)) |
|
| red-9 | --sf-red-9 |
rgba(134,24,29,var(--sf-alfa)) |
Orange
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| orange-0 | --sf-orange-0 |
rgba(255,248,242,var(--sf-alfa)) |
|
| orange-1 | --sf-orange-1 |
rgba(255,235,218,var(--sf-alfa)) |
|
| orange-2 | --sf-orange-2 |
rgba(255,209,172,var(--sf-alfa)) |
|
| orange-3 | --sf-orange-3 |
rgba(255,171,112,var(--sf-alfa)) |
|
| orange-4 | --sf-orange-4 |
rgba(251,133,50,var(--sf-alfa)) |
|
| orange-5 | --sf-orange-5 |
rgba(246,106,10,var(--sf-alfa)) |
|
| orange-6 | --sf-orange-6 |
rgba(227,98,9,var(--sf-alfa)) |
|
| orange-7 | --sf-orange-7 |
rgba(209,87,4,var(--sf-alfa)) |
|
| orange-8 | --sf-orange-8 |
rgba(194,78,0,var(--sf-alfa)) |
|
| orange-9 | --sf-orange-9 |
rgba(160,65,0,var(--sf-alfa)) |
Yellow
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| yellow-0 | --sf-yellow-0 |
rgba(255,253,239,var(--sf-alfa)) |
|
| yellow-1 | --sf-yellow-1 |
rgba(255,251,221,var(--sf-alfa)) |
|
| yellow-2 | --sf-yellow-2 |
rgba(255,245,177,var(--sf-alfa)) |
|
| yellow-3 | --sf-yellow-3 |
rgba(255,234,127,var(--sf-alfa)) |
|
| yellow-4 | --sf-yellow-4 |
rgba(255,223,93,var(--sf-alfa)) |
|
| yellow-5 | --sf-yellow-5 |
rgba(255,211,61,var(--sf-alfa)) |
|
| yellow-6 | --sf-yellow-6 |
rgba(249,197,19,var(--sf-alfa)) |
|
| yellow-7 | --sf-yellow-7 |
rgba(219,171,9,var(--sf-alfa)) |
|
| yellow-8 | --sf-yellow-8 |
rgba(176,136,0,var(--sf-alfa)) |
|
| yellow-9 | --sf-yellow-9 |
rgba(115,92,15,var(--sf-alfa)) |
Green
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| green-0 | --sf-green-0 |
rgba(240,255,244,var(--sf-alfa)) |
|
| green-1 | --sf-green-1 |
rgba(220,255,228,var(--sf-alfa)) |
|
| green-2 | --sf-green-2 |
rgba(190,245,203,var(--sf-alfa)) |
|
| green-3 | --sf-green-3 |
rgba(133,232,157,var(--sf-alfa)) |
|
| green-4 | --sf-green-4 |
rgba(52,208,88,var(--sf-alfa)) |
|
| green-5 | --sf-green-5 |
rgba(40,167,69,var(--sf-alfa)) |
|
| green-6 | --sf-green-6 |
rgba(34,134,58,var(--sf-alfa)) |
|
| green-7 | --sf-green-7 |
rgba(23,111,44,var(--sf-alfa)) |
|
| green-8 | --sf-green-8 |
rgba(22,92,38,var(--sf-alfa)) |
|
| green-9 | --sf-green-9 |
rgba(20,70,32,var(--sf-alfa)) |
Blue
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| blue-0 | --sf-blue-0 |
rgba(241,248,255,var(--sf-alfa)) |
|
| blue-1 | --sf-blue-1 |
rgba(219,237,255,var(--sf-alfa)) |
|
| blue-2 | --sf-blue-2 |
rgba(200,225,255,var(--sf-alfa)) |
|
| blue-3 | --sf-blue-3 |
rgba(121,184,255,var(--sf-alfa)) |
|
| blue-4 | --sf-blue-4 |
rgba(33,136,255,var(--sf-alfa)) |
|
| blue-5 | --sf-blue-5 |
rgba(3,102,214,var(--sf-alfa)) |
|
| blue-6 | --sf-blue-6 |
rgba(0,92,197,var(--sf-alfa)) |
|
| blue-7 | --sf-blue-7 |
rgba(4,66,137,var(--sf-alfa)) |
|
| blue-8 | --sf-blue-8 |
rgba(3,47,98,var(--sf-alfa)) |
|
| blue-9 | --sf-blue-9 |
rgba(5,38,76,var(--sf-alfa)) |
Purple
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| purple-0 | --sf-purple-0 |
rgba(245,240,255,var(--sf-alfa)) |
|
| purple-1 | --sf-purple-1 |
rgba(230,220,253,var(--sf-alfa)) |
|
| purple-2 | --sf-purple-2 |
rgba(209,188,249,var(--sf-alfa)) |
|
| purple-3 | --sf-purple-3 |
rgba(179,146,240,var(--sf-alfa)) |
|
| purple-4 | --sf-purple-4 |
rgba(138,99,210,var(--sf-alfa)) |
|
| purple-5 | --sf-purple-5 |
rgba(111,66,193,var(--sf-alfa)) |
|
| purple-6 | --sf-purple-6 |
rgba(90,50,163,var(--sf-alfa)) |
|
| purple-7 | --sf-purple-7 |
rgba(76,40,136,var(--sf-alfa)) |
|
| purple-8 | --sf-purple-8 |
rgba(58,29,110,var(--sf-alfa)) |
|
| purple-9 | --sf-purple-9 |
rgba(41,19,78,var(--sf-alfa)) |
Pink
| Название | CSS переменная | Цвет | Значение |
|---|---|---|---|
| pink-0 | --sf-pink-0 |
rgba(255,238,248,var(--sf-alfa)) |
|
| pink-1 | --sf-pink-1 |
rgba(254,219,240,var(--sf-alfa)) |
|
| pink-2 | --sf-pink-2 |
rgba(249,179,221,var(--sf-alfa)) |
|
| pink-3 | --sf-pink-3 |
rgba(246,146,206,var(--sf-alfa)) |
|
| pink-4 | --sf-pink-4 |
rgba(236,108,185,var(--sf-alfa)) |
|
| pink-5 | --sf-pink-5 |
rgba(234,74,170,var(--sf-alfa)) |
|
| pink-6 | --sf-pink-6 |
rgba(208,53,146,var(--sf-alfa)) |
|
| pink-7 | --sf-pink-7 |
rgba(185,58,134,var(--sf-alfa)) |
|
| pink-8 | --sf-pink-8 |
rgba(153,48,111,var(--sf-alfa)) |
|
| pink-9 | --sf-pink-9 |
rgba(109,34,79,var(--sf-alfa)) |
Пример
При использовании в классах - используте CSS переменные представленны в таблице.
<style>
.demo-color {
background-color: var(--sf-color--blue-5);
width: 2rem;
height: 2rem;
}
</style>
<div class="demo-color"></div>