Дизайнер присылает тебе макет с точным фиолетовым цветом #7B2FF7, а ты пишешь color: purple и получаешь совсем не то. Чтобы точно передавать цвета в CSS, нужно знать все форматы записи — их несколько, и каждый удобен в своей ситуации.
CSS знает 140 именованных цветов: red, blue, green, white, black, transparent и экзотика вроде papayawhip и rebeccapurple.
color: red;
background-color: papayawhip;
border-color: transparent;Удобно для прототипов, но для продакшна — только если нужны именно эти цвета. Использовать tomato вместо #ff6347 — нормально.
Самый распространённый формат. Три пары шестнадцатеричных цифр: красный, зелёный, синий.
color: #ff0000; /* Чистый красный */
color: #7b2ff7; /* Фирменный фиолетовый Wildberries */
color: #000000; /* Чёрный */
color: #ffffff; /* Белый */
color: #f5f5f5; /* Светло-серый фон */Сокращённая запись, когда оба символа одинаковы:
color: #fff; /* = #ffffff */
color: #000; /* = #000000 */
color: #f00; /* = #ff0000 */HEX с прозрачностью — добавь ещё две цифры:
color: #7b2ff780; /* 50% прозрачности (80 = 128 из 255 ≈ 50%) */rgb(red, green, blue) — каждый канал от 0 до 255.
color: rgb(255, 0, 0); /* Красный */
color: rgb(123, 47, 247); /* Фиолетовый */
background: rgb(245, 245, 245); /* Светло-серый */rgba() добавляет альфа-канал (прозрачность) от 0 (полностью прозрачный) до 1 (непрозрачный):
background: rgba(0, 0, 0, 0.5); /* Полупрозрачный чёрный — затемнение */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Лёгкая тень */
background: rgba(123, 47, 247, 0.1); /* Лёгкий фиолетовый фон */hsl(hue, saturation%, lightness%):
color: hsl(270, 91%, 58%); /* Фиолетовый */
color: hsl(0, 100%, 50%); /* Чистый красный */
color: hsl(120, 60%, 40%); /* Тёмно-зелёный */HSL удобен для создания цветовых схем: меняй только Hue — получишь гармоничную палитру.
/* Кнопка: нормальное состояние */
.btn { background: hsl(270, 91%, 58%); }
/* Hover — просто светлее */
.btn:hover { background: hsl(270, 91%, 68%); }
/* Disabled — обесцвечен */
.btn:disabled { background: hsl(270, 20%, 70%); }Делает весь элемент полупрозрачным (включая содержимое):
.disabled { opacity: 0.5; } /* 50% прозрачности всего элемента */
.hidden { opacity: 0; } /* Невидимый, но занимает место */Разница с rgba: rgba влияет только на конкретное свойство (фон, цвет), opacity — на весь элемент целиком, включая текст и дочерние элементы.
Специальное ключевое слово — берёт значение текущего color:
.icon {
color: #7b2ff7;
border: 2px solid currentColor; /* Граница того же цвета что и текст */
fill: currentColor; /* SVG-иконка цвета текста */
}Ошибка 1: Перепутать opacity и rgba
/* opacity делает полупрозрачным всё, включая текст */
.card { background: white; opacity: 0.5; } /* Текст тоже станет полупрозрачным! */
/* rgba влияет только на фон */
.card { background: rgba(255,255,255,0.5); } /* Текст останется чётким */Ошибка 2: Неправильный диапазон в rgb()
color: rgb(300, 0, 0); /* Неправильно, максимум 255 */
color: rgb(255, 0, 0); /* Правильно */Дизайнеры в Figma задают цвета в HEX или RGB — копируй напрямую. Цвета проекта хранятся в CSS-переменных (об этом в уроке про Custom Properties):
:root {
--color-primary: #7b2ff7;
--color-primary-light: rgba(123, 47, 247, 0.1);
}Разные форматы цвета CSS — все для одного оттенка фиолетового
// Создаём несколько элементов с одинаковым цветом, но разным форматом записи
const container = document.createElement('div')
document.body.appendChild(container)
const formats = [
{ format: 'Именованный', value: 'purple' },
{ format: 'HEX', value: '#7b2ff7' },
{ format: 'RGB', value: 'rgb(123, 47, 247)' },
{ format: 'RGBA 100%', value: 'rgba(123, 47, 247, 1)' },
{ format: 'HSL', value: 'hsl(270, 91%, 58%)' },
]
formats.forEach(({ format, value }) => {
const box = document.createElement('div')
box.style.backgroundColor = value
box.style.color = 'white'
box.style.padding = '8px 12px'
box.style.marginBottom = '4px'
box.textContent = format + ': ' + value
container.appendChild(box)
const computed = window.getComputedStyle(box)
// Браузер всегда приводит цвет к формату rgb()
console.log(format + ' → браузер видит:', computed.backgroundColor)
})
// Демонстрация прозрачности
console.log('--- Прозрачность ---')
const opacityBox = document.createElement('div')
opacityBox.style.backgroundColor = '#7b2ff7'
opacityBox.style.opacity = '0.3'
opacityBox.style.padding = '8px'
opacityBox.style.marginTop = '8px'
opacityBox.textContent = 'Весь блок прозрачный (opacity: 0.3)'
container.appendChild(opacityBox)
console.log('opacity элемента:', window.getComputedStyle(opacityBox).opacity) // 0.3
const rgbaBox = document.createElement('div')
rgbaBox.style.backgroundColor = 'rgba(123, 47, 247, 0.3)'
rgbaBox.style.padding = '8px'
rgbaBox.textContent = 'Только фон прозрачный (rgba с alpha 0.3), текст чёткий'
container.appendChild(rgbaBox)
console.log('Фон rgba:', window.getComputedStyle(rgbaBox).backgroundColor) // rgba(123, 47, 247, 0.3)Дизайнер присылает тебе макет с точным фиолетовым цветом #7B2FF7, а ты пишешь color: purple и получаешь совсем не то. Чтобы точно передавать цвета в CSS, нужно знать все форматы записи — их несколько, и каждый удобен в своей ситуации.
CSS знает 140 именованных цветов: red, blue, green, white, black, transparent и экзотика вроде papayawhip и rebeccapurple.
color: red;
background-color: papayawhip;
border-color: transparent;Удобно для прототипов, но для продакшна — только если нужны именно эти цвета. Использовать tomato вместо #ff6347 — нормально.
Самый распространённый формат. Три пары шестнадцатеричных цифр: красный, зелёный, синий.
color: #ff0000; /* Чистый красный */
color: #7b2ff7; /* Фирменный фиолетовый Wildberries */
color: #000000; /* Чёрный */
color: #ffffff; /* Белый */
color: #f5f5f5; /* Светло-серый фон */Сокращённая запись, когда оба символа одинаковы:
color: #fff; /* = #ffffff */
color: #000; /* = #000000 */
color: #f00; /* = #ff0000 */HEX с прозрачностью — добавь ещё две цифры:
color: #7b2ff780; /* 50% прозрачности (80 = 128 из 255 ≈ 50%) */rgb(red, green, blue) — каждый канал от 0 до 255.
color: rgb(255, 0, 0); /* Красный */
color: rgb(123, 47, 247); /* Фиолетовый */
background: rgb(245, 245, 245); /* Светло-серый */rgba() добавляет альфа-канал (прозрачность) от 0 (полностью прозрачный) до 1 (непрозрачный):
background: rgba(0, 0, 0, 0.5); /* Полупрозрачный чёрный — затемнение */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Лёгкая тень */
background: rgba(123, 47, 247, 0.1); /* Лёгкий фиолетовый фон */hsl(hue, saturation%, lightness%):
color: hsl(270, 91%, 58%); /* Фиолетовый */
color: hsl(0, 100%, 50%); /* Чистый красный */
color: hsl(120, 60%, 40%); /* Тёмно-зелёный */HSL удобен для создания цветовых схем: меняй только Hue — получишь гармоничную палитру.
/* Кнопка: нормальное состояние */
.btn { background: hsl(270, 91%, 58%); }
/* Hover — просто светлее */
.btn:hover { background: hsl(270, 91%, 68%); }
/* Disabled — обесцвечен */
.btn:disabled { background: hsl(270, 20%, 70%); }Делает весь элемент полупрозрачным (включая содержимое):
.disabled { opacity: 0.5; } /* 50% прозрачности всего элемента */
.hidden { opacity: 0; } /* Невидимый, но занимает место */Разница с rgba: rgba влияет только на конкретное свойство (фон, цвет), opacity — на весь элемент целиком, включая текст и дочерние элементы.
Специальное ключевое слово — берёт значение текущего color:
.icon {
color: #7b2ff7;
border: 2px solid currentColor; /* Граница того же цвета что и текст */
fill: currentColor; /* SVG-иконка цвета текста */
}Ошибка 1: Перепутать opacity и rgba
/* opacity делает полупрозрачным всё, включая текст */
.card { background: white; opacity: 0.5; } /* Текст тоже станет полупрозрачным! */
/* rgba влияет только на фон */
.card { background: rgba(255,255,255,0.5); } /* Текст останется чётким */Ошибка 2: Неправильный диапазон в rgb()
color: rgb(300, 0, 0); /* Неправильно, максимум 255 */
color: rgb(255, 0, 0); /* Правильно */Дизайнеры в Figma задают цвета в HEX или RGB — копируй напрямую. Цвета проекта хранятся в CSS-переменных (об этом в уроке про Custom Properties):
:root {
--color-primary: #7b2ff7;
--color-primary-light: rgba(123, 47, 247, 0.1);
}Разные форматы цвета CSS — все для одного оттенка фиолетового
// Создаём несколько элементов с одинаковым цветом, но разным форматом записи
const container = document.createElement('div')
document.body.appendChild(container)
const formats = [
{ format: 'Именованный', value: 'purple' },
{ format: 'HEX', value: '#7b2ff7' },
{ format: 'RGB', value: 'rgb(123, 47, 247)' },
{ format: 'RGBA 100%', value: 'rgba(123, 47, 247, 1)' },
{ format: 'HSL', value: 'hsl(270, 91%, 58%)' },
]
formats.forEach(({ format, value }) => {
const box = document.createElement('div')
box.style.backgroundColor = value
box.style.color = 'white'
box.style.padding = '8px 12px'
box.style.marginBottom = '4px'
box.textContent = format + ': ' + value
container.appendChild(box)
const computed = window.getComputedStyle(box)
// Браузер всегда приводит цвет к формату rgb()
console.log(format + ' → браузер видит:', computed.backgroundColor)
})
// Демонстрация прозрачности
console.log('--- Прозрачность ---')
const opacityBox = document.createElement('div')
opacityBox.style.backgroundColor = '#7b2ff7'
opacityBox.style.opacity = '0.3'
opacityBox.style.padding = '8px'
opacityBox.style.marginTop = '8px'
opacityBox.textContent = 'Весь блок прозрачный (opacity: 0.3)'
container.appendChild(opacityBox)
console.log('opacity элемента:', window.getComputedStyle(opacityBox).opacity) // 0.3
const rgbaBox = document.createElement('div')
rgbaBox.style.backgroundColor = 'rgba(123, 47, 247, 0.3)'
rgbaBox.style.padding = '8px'
rgbaBox.textContent = 'Только фон прозрачный (rgba с alpha 0.3), текст чёткий'
container.appendChild(rgbaBox)
console.log('Фон rgba:', window.getComputedStyle(rgbaBox).backgroundColor) // rgba(123, 47, 247, 0.3)Напиши HTML-страницу с тремя кружками-цветовыми блоками. Каждый кружок — div 60×60px с border-radius: 50%. Первый — цвет в формате HEX (#e53e3e, красный), второй — RGB (rgb(66, 153, 225), синий), третий — HSL (hsl(120, 60%, 40%), зелёный). Подпиши под каждым кружком формат цвета.
width и height: 60px. border-radius: 50% делает квадрат круглым. background-color для .circle-hex: #e53e3e, для .circle-rgb: rgb(66, 153, 225), для .circle-hsl: hsl(120, 60%, 40%). В CSS числа без кавычек: width: 60px (не "60px").