Статьи о цвете
Короткие практические статьи о цвете для экранов: форматы, контраст, палитры, тёмная тема и CSS. Все числа посчитаны, все примеры можно скопировать.
- OKLCH простыми словами: формат цвета, который совпадает с глазомOKLCH описывает цвет тем, насколько он светлый на вид, насколько насыщенный и какого он тона. В отличие от HSL, одинаковая светлота здесь действительно выглядит одинаково для любого тона, поэтому палитры, hover-состояния и контраст становятся предсказуемыми.28 сентября 2026 г.Читать 3 мин
- APCA и WCAG 2: какой проверке контраста веритьКоэффициент контраста WCAG 2 требует закон. APCA это более новая модель, которая намного точнее предсказывает читаемость, особенно в тёмных темах и на насыщенных цветах. Если проверять оба, текст получится и соответствующим требованиям, и действительно удобным для чтения.28 сентября 2026 г.Читать 2 мин
- Цветовой охват: sRGB, Display P3 и цвета за пределами охватаОхват это набор цветов, который может показать экран или описать цветовое пространство. Веб вырос на sRGB, но большинство телефонов и многие ноутбуки уже показывают Display P3, где заметно ярче красные, зелёные и оранжевые.28 сентября 2026 г.Читать 1 мин
- Форматы цвета: HEX, RGB, HSL, OKLCH и остальныеОдин и тот же цвет можно записать десятком способов. Здесь коротко о том, что значит каждый формат, когда его использовать и как один цвет выглядит во всех них.28 сентября 2026 г.Читать 2 мин
- HEX-коды цветов: как устроен #RRGGBBHEX-код вроде #1e90ff состоит из трёх пар шестнадцатеричных цифр: сколько в цвете красного, зелёного и синего света, от 00 (нисколько) до ff (полностью, 255). Четвёртая пара задаёт прозрачность: 80 это примерно 50%, ff это полностью непрозрачный цвет.28 сентября 2026 г.Читать 5 мин
- Как подобрать цветовую палитру для сайта или приложенияВозьмите один фирменный цвет, постройте из него шкалу от 50 до 950, добавьте слегка тонированные серые и четыре цвета статусов, затем проверьте каждую пару текста и фона на контраст и дальтонизм. Ступени выбирайте по светлоте OKLCH, а не на глаз: на белом фоне текст проходит WCAG AA, когда светлота опускается примерно до 0.55, какой бы ни был тон.28 сентября 2026 г.Читать 6 мин
- Цвета для тёмной темы: фон, текст и акцентыБерите тёмно-серый фон вроде #121212 вместо чистого чёрного, приглушённый белый текст вроде #e5e5e5 вместо чистого белого и более светлые, менее насыщенные версии фирменных цветов. Проверяйте текст не только по WCAG 2, но и по APCA: на тёмном фоне WCAG 2 завышает контраст.28 сентября 2026 г.Читать 6 мин
- Цветовые гармонии: комплементарная, аналоговая, триада и другиеЦветовая гармония выбирает тона на фиксированных углах цветового круга: 180° для комплементарной пары, по 30° для аналоговой, по 120° для триады. Если вращать тон в OKLCH, а не в HSL, цвета остаются одинаково светлыми, и ни один не выпадает из набора случайно.28 сентября 2026 г.Читать 5 мин
- CSS color-mix() и относительные цвета: оттенки, hover и прозрачностьcolor-mix() смешивает два цвета в выбранном цветовом пространстве, а относительный синтаксис меняет один канал готового цвета, например oklch(from var(--brand) calc(l - 0.1) c h). Оба считаются в браузере, работают с CSS-переменными и заменяют большую часть цветовых функций Sass. Для оттенков и hover смешивайте в oklab, для прозрачности в srgb.28 сентября 2026 г.Читать 6 мин
- Палитра для дальтоников: как проверить и исправить цветаПалитра для дальтоников сохраняет различимыми все пары цветов при протанопии, дейтеранопии, тританопии и в оттенках серого. Надёжнее всего помогает не особый тон, а разница в светлоте: цвета, которые отличаются по светлоте OKLCH примерно на 0.2, остались различимыми во всех наших симуляциях. И добавляйте иконки или подписи, потому что один только цвет всегда кого-то подводит.28 сентября 2026 г.Читать 6 мин
- Цвета Tailwind CSS: палитра v4 в OKLCH, свои цвета и оттенкиВ Tailwind CSS v4 есть 26 цветовых шкал по 11 ступеней, от 50 до 950, всего 286 цветов в OKLCH, доступных как CSS-переменные вида --color-blue-500. Свой цвет добавляется через @theme { --color-brand-500: oklch(...) }. Одинаковый номер ступени не означает одинаковую светлоту: у синего текст на белом проходит порог 4.5:1 уже с 600, а жёлтому нужна 700.28 сентября 2026 г.Читать 6 мин