Alpha и композитинг в CSS
Альфа-канал и прозрачность цвета в CSS
Разбор alpha в CSS: восьмизначный HEX, функциональная запись, transparent, свойство opacity, композитинг и проверка итогового контраста.
Практические знания о цвете
Статьи на основе методики, а не мифологии.
Подробные руководства на русском, английском, испанском и французском, основанные на опубликованных стандартах, воспроизводимых расчётах и готовых примерах CSS.
Сравнение цветов
Как рассчитывается ближайшее имя цвета CSS
Как сравнить цвет с фиксированным набором именованных цветов CSS, почему метрика меняет победителя и почему найденное ключевое слово остаётся приближением, а не истинным названием.
Цветовые токены CSS
Как организовать небольшую систему цветов через CSS-переменные
Практическая небольшая система цветов на CSS custom properties: семантические токены, каскад, область, фолбэки, темы и проверки контраста.
Доступные состояния ссылок
Как выбрать различимый цвет ссылок
Выберите и проверьте цвета ссылок относительно фона и соседнего текста, сохраняя подчёркивание, visited, hover и клавиатурный фокус.
Цветовые ключевые слова CSS
Именованные цвета CSS: когда имя полезнее HEX
Используем цветовые ключевые слова CSS точно: проверяем значения sRGB, распознаём алиасы и странные имена, выбираем понятные production-токены.
Основы HEX-цветов
Как читать шестизначный HEX-код цвета
Учимся вручную читать #RRGGBB: разделять каналы, переводить шестнадцатеричные пары, раскрывать сокращение и понимать альфа-канал.
Практический выбор цвета текста
Как выбрать читаемый цвет текста для любого фона
Повторяемый способ сравнить цвета текста на сплошном, полупрозрачном, градиентном или фотографическом фоне с проверенными примерами WCAG.
Контраст WCAG 2.2
Коэффициент контрастности цвета на проверенных примерах
Рассчитываем контраст WCAG 2.2 для двух цветов sRGB, разбираем пороги AA и AAA и сравниваем точные проходящие и непроходящие пары.
Доступные состояния кнопок
Цвета кнопок: текст, фон, граница, hover и focus
Проверка текста, фона, границы, hover, active, disabled и focus у кнопки как полных интерактивных состояний, а не одного образца.
Уровни WCAG без мифов
Порог контраста WCAG AA и AAA без мифов
Разбираем настоящий смысл WCAG AA и AAA для обычного и крупного текста, накопление уровней соответствия и пределы автоматического contrast checker.
Доступная визуализация данных
Практическая палитра цветов для графиков и категорий
Создайте категориальные графики с подписями, формами, паттернами, порядком и измеренным контрастом, чтобы данные оставались понятными без различения цветов.
Доступная светлая тема
Как собрать читаемую палитру светлой темы
Читаемая палитра светлой темы: белые поверхности, уровни текста, границы, акцентные состояния, фокус, композитинг и проверка контраста WCAG.
Палитра тёмного интерфейса
Палитра тёмной темы без простого инвертирования цветов
Практический способ построить измеримую палитру тёмной темы для поверхностей, текста, границ, акцентов и состояния фокуса.
Форматы цвета CSS
HEX, RGB и HSL: что меняется, а что нет
Разбираем, как HEX, RGB и HSL задают цвета CSS, как преобразовывать один цвет без подмены и какой формат выбрать для конкретной задачи.
Практическое управление HSL
Цвета HSL: полезные настройки и частые ошибки
Практическое руководство по CSS HSL: точные примеры sRGB, шкалы насыщенности и светлоты, контраст, alpha-синтаксис и ограничения восприятия.
Практическое управление HWB
Цвета HWB: белизна и чернота в CSS
Практическое руководство по CSS HWB: точные преобразования sRGB, шкалы whiteness и blackness, контраст, нормализация суммы, alpha и токены.
Перцептивная работа с CSS-палитрами
OKLCH для практических CSS-палитр
Практическое руководство по OKLCH: шкалы светлоты, проверенный контраст, пределы sRGB и Display P3, fallback, градиенты и смешивание CSS-цветов.
Синтаксис цветов CSS
Современный синтаксис цветов CSS с готовыми примерами
Сравнение современных записей HEX, rgb(), hsl(), hwb(), lab() и oklch() в CSS: цветовые пространства, альфа-канал и готовые примеры без случайной смены цвета.
Связанные цвета без расплывчатых названий
Тинты, затемнения и тона: три разных операции
Строим тинты, затемнения и тона по явной математике sRGB: воспроизводимые HEX, CSS color-mix(), выбор пространства и повторная проверка контраста.
Доступные формы
Цвета состояний формы без зависимости только от цвета
Как оформить ошибки, успех, предупреждения, disabled и focus так, чтобы состояния были понятны без цвета, сохраняли нужный контраст и давали ясную обратную связь.