- Головна
- Кольори (Colors)
Повна палітра CSS-змінних фреймворку Flex12-3D. Кожен колір має 6 рівнів прозорості: 100%, 80%, 60%, 40%, 20%, 10%.
💡 Натисніть на колір щоб скопіювати змінну
☀️ Light Theme
--text (Основний текст)
--text-dark (Темніший)
--neon (Неоновий)
--azure (Блакитний)
--blue (Синій)
--blue2 (Синій 2)
--purple (Фіолетовий)
--plum (Сливовий)
--red (Червоний)
--green (Зелений)
--lime (Лаймовий)
--orange (Помаранчевий)
--yellow (Жовтий)
--coral (Кораловий)
--black (Чорний)
--white (Білий)
Акцентні кольори
--neon
--azure
--blue
--blue2
--purple
--plum
--red
--green
--lime
--orange
--yellow
--coral
--black
--white
Фони та Glass-градієнти
--bg-color
--bg-input
--bg-glass-biruz
--bg-glass-blue
--bg-glass-white
--bg-glass-gray
Тіні (Shadows)
--shadow-1
--shadow-2
--shadow-3
Рамки та лінії
--br-gray
--br-biruz
--br-blue
Рамки та лінії
| Колонка 1 | Колонка 2 | Колонка 3 | Колонка 4 |
|---|---|---|---|
| Дані 1-1 | Дані 1-2 | Дані 1-3 | Дані 1-4 |
| Дані 2-1 | Дані 2-2 | Дані 2-3 | Дані 2-4 |
| Дані 3-1 | Дані 3-2 | Дані 3-3 | Дані 3-4 |
🌙 Dark Theme
--text (Основний текст)
--text-dark (Темніший)
--neon (Неоновий)
--azure (Блакитний)
--blue (Синій)
--blue2 (Синій 2)
--purple (Фіолетовий)
--plum (Сливовий)
--red (Червоний)
--green (Зелений)
--lime (Лаймовий)
--orange (Помаранчевий)
--yellow (Жовтий)
--coral (Кораловий)
--black (Чорний)
--white (Білий)
Акцентні кольори
--neon
--azure
--blue
--blue2
--purple
--plum
--red
--green
--lime
--orange
--yellow
--coral
--black
--white
Фони та Glass-градієнти
--bg-color
--bg-input
--bg-glass-biruz
--bg-glass-blue
--bg-glass-white
--bg-glass-gray
Тіні (Shadows)
--shadow-1
--shadow-2
--shadow-3
Рамки та лінії
--br-gray
--br-biruz
--br-blue
Рамки та лінії
| Колонка 1 | Колонка 2 | Колонка 3 | Колонка 4 |
|---|---|---|---|
| Дані 1-1 | Дані 1-2 | Дані 1-3 | Дані 1-4 |
| Дані 2-1 | Дані 2-2 | Дані 2-3 | Дані 2-4 |
| Дані 3-1 | Дані 3-2 | Дані 3-3 | Дані 3-4 |
Повна палітра — CSS Custom Properties
var(--c-white) — WHITE
100%
80%
60%
40%
20%
10%
var(--c-blue) — BLUE
100%
80%
60%
40%
20%
10%
var(--c-biruz) — BIRUZ
100%
80%
60%
40%
20%
10%
var(--c-purple) — PURPLE
100%
80%
60%
40%
20%
10%
var(--c-green) — GREEN
100%
80%
60%
40%
20%
10%
var(--c-red) — RED
100%
80%
60%
40%
20%
10%
var(--c-yellow) — YELLOW
100%
80%
60%
40%
20%
10%
var(--c-gray) — GRAY
100%
80%
60%
40%
20%
10%
var(--c-dark) — DARK
100%
80%
60%
40%
20%
10%
var(--c-white) — WHITE
100%
80%
60%
40%
20%
10%
var(--c-blue) — BLUE
100%
80%
60%
40%
20%
10%
var(--c-biruz) — BIRUZ
100%
80%
60%
40%
20%
10%
var(--c-purple) — PURPLE
100%
80%
60%
40%
20%
10%
var(--c-green) — GREEN
100%
80%
60%
40%
20%
10%
var(--c-red) — RED
100%
80%
60%
40%
20%
10%
var(--c-yellow) — YELLOW
100%
80%
60%
40%
20%
10%
var(--c-gray) — GRAY
100%
80%
60%
40%
20%
10%
var(--c-dark) — DARK
100%
80%
60%
40%
20%
10%
.s0
White
.s1
Gray
.s2
Dark
.s3
Red
.s4
Blue
.s5
Purple
.s6
Biruz
.s7
Green
.s8
Yellow