Цвет задается через цветовую модель HSLA (Hue Saturation Lightness Alpha), где:
- Hue (оттенок) — цвет в градусах (0 – 360)
- Saturation (насыщенность) — интенсивность цвета (0% — серый, 100% — чистый цвет)
- Lightness (яркость) — уровень освещённости (0% — чёрный, 100% — белый)
- Alpha (альфа-канал) - непрозрачность цвета (0 - полностью прозрачный, 1 - совсем не прозрачный)
Используя данную модель, можно легко задать случайный цвет числом от 0 до 360
Случайный цвет текста:
В данном примере случайный цвет задается для каждого элемента с классом randomColor
HTML:
|
1 2 |
<div>Lorem <span class="randomColor">ipsum</span> dolor <b class="randomColor">sit</b> amet</div> <div class="randomColor">Lorem ipsum dolor sit amet</div> |
JavaScript:
|
1 2 3 4 5 6 7 |
let randomColor = document.querySelectorAll(".randomColor"); let colorMax = 360; let colorMin = 0; for (let i = 0; i < randomColor.length; i++) { randomColorInt = Math.floor(Math.random() * (colorMax - colorMin + 1)) + colorMin; randomColor[i].style.color = 'hsla('+ randomColorInt +', 100%, 30%, 1)'; } |
Случайный цвет фона:
В этом примере все тоже самое, только стиль устанавливаем для фона.
HTML:
|
1 |
<div class="randomBg"></div> |
JavaScript:
|
1 2 3 4 5 6 7 |
let randomBg = document.querySelectorAll(".randomBg"); let colorMax = 360; let colorMin = 0; for (let i = 0; i < randomBg.length; i++) { randomBgInt = Math.floor(Math.random() * (colorMax - colorMin + 1)) + colorMin; randomBg[i].style.backgroundColor = 'hsla('+ randomBgInt +', 100%, 50%, 1)'; } |
Случайный цвет текста и фона:
В этом примере объединим первые два варианта, но фон сделаем светлее, а цвет текста темнее.
Текст
Текст
Текст
Текст
HTML:
|
1 |
<div class="randomBgColor">Текст</div> |
JavaScript:
|
1 2 3 4 5 6 7 8 |
let randomBgColor = document.querySelectorAll(".randomBgColor"); let colorMax = 360; let colorMin = 0; for (let i = 0; i < randomBgColor.length; i++) { randomBgColorInt = Math.floor(Math.random() * (colorMax - colorMin + 1)) + colorMin; randomBgColor[i].style.backgroundColor = 'hsla('+ randomBgColorInt +', 100%, 90%, 1)'; randomBgColor[i].style.color = 'hsla('+ randomBgColorInt +', 100%, 30%, 1)'; } |
Заключение:
- Обновив страницу, все цвета, соответственно, примут другие значения.
- Случайный цвет не обязательно должен быть по всему цветовому кругу, от красного (0) до красного (360), а например, только в синих оттенках. Для этого нужно будет изменить переменные
colorMaxиcolorMinв соответствии с градусами цвета. Эти значения можно посмотреть в генераторе оттенков. - Также, как и цвет, можно установить случайные значения для яркости и насыщенности.
- Прозрачность во всех примерах отсутствует (значение 1), но добавлена на случай, если будет нужна.
Добавить комментарий: