Ответ
В CSS есть несколько способов изменить цвет элемента:
- HEX - шестнадцатеричное значение:
color: #FF5733;- RGB/RGBA - с прозрачностью (alpha):
background-color: rgba(255, 87, 51, 0.5);- HSL/HSLA - цветовая модель Hue-Saturation-Lightness:
border-color: hsl(10, 100%, 60%);- Именованные цвета:
color: tomato;- currentColor - наследует значение color:
border: 1px solid currentColor;- CSS-переменные:
:root {
--main-color: #FF5733;
}
.element {
color: var(--main-color);
}Также можно модифицировать цвет через JavaScript, используя методы типа element.style.color = 'red' или манипулируя значениями через библиотеки типа chroma.js.
Ответ 18+ 🔞
Да ты посмотри, какие, блядь, варианты! Прямо как в магазине красок, только вместо "беж" и "шампань" — сплошные буквенно-цифровые заклинания, ёпта!
Ну ладно, слушай сюда, разбираем эту цветомуть.
Во-первых, классика жанра — HEX. Это когда ты пишешь решётку и шесть циферок-буквок. Типа #FF5733. Выглядит как пароль от какого-то левого вайфая, но на самом деле это просто рыжий цвет, блядь. Главное — не перепутай, а то вместо красивого фона получишь пиздопроебибну какую-нибудь.
Во-вторых, RGB и его продвинутый братан RGBA. Тут уже посерьёзнее, цифры от 0 до 255. Красный, зелёный, синий — как в старом телеке. rgb(255, 87, 51) — тот же самый рыжий. А если добавить букву A (alpha), то можно сделать полупрозрачную хуйню: rgba(255, 87, 51, 0.5). Ноль целых пять десятых — это типа наполовину видно, наполовину нет. Удобно для всяких модных затемнений, блядь.
В-третьих, HSL/HSLA. Это вообще для художников, ёпта. Тут не просто "красный-зелёный-синий", а "оттенок-насыщенность-светлота". hsl(10, 100%, 60%) — опять наш рыжий друг. Хочешь сделать его бледнее — крути saturation, хочешь темнее — lightless. Очень гибко, если мозги не заплыли жиром.
В-четвёртых, именованные цвета. Это для ленивых, как я. Зачем запоминать #FF5733, если можно написать просто tomato? Или coral, или rebeccapurple. Да, есть цвет "ребекапёрпл", я не шучу, в рот меня чих-пых! Правда, выбор ограничен, но для быстрых набросков — то, что надо.
Пятый способ — currentColor. Хитрость, блядь! Этой штукой ты говоришь: "эй, рамка (или тень, или ещё что), будь такого же цвета, как и основной текст у этого элемента!" Пишешь border: 1px solid currentColor; и всё, волнение ебать — цвет сам подтянется. Лень — двигатель прогресса, ёпта.
И наконец, царь-способ — CSS-переменные (кастомные свойства). Это когда ты в корне документа (:root) объявляешь: "так, блядь, пусть у меня главный цвет будет --main-color: #FF5733;". А потом в любом месте пишешь color: var(--main-color);. Захотел сменить цвет на всём сайте — поменял ОДНО значение в :root, и всё, пизда, обновилось везде. Красота, а не жизнь!
Ну и напоследок, если тебе мало CSS и ты совсем ебнулся, можно через JavaScript колдовать: element.style.color = 'red'. Или подключить какую-нибудь библиотеку вроде chroma.js, чтобы крутить цвета как ниндзя. Но это уже для особых ценителей, у которых терпения — овердохуища.
Вот и вся магия, блядь. Выбирай, что душе угодно, главное — чтобы не получилось как у того дизайнера, который сделал кнопку #000 на фоне #111. Пиздец, а не контраст, глаза сломаешь.