TGViewer
HTML Academy HTML Academy @htmlacademy · 9.55K subscribers
Post #8672 880
Сделать цвет светлее на 10% или подобрать гармоничный акцент — с HEX, да и с HSL, это всё ещё угадайка. Скажем, в HSL lightness: 50% у жёлтого и синего даёт разную видимую яркость: жёлтый светлее.

oklch() берёт три параметра: L (яркость от 0 до 1), C (насыщенность от 0 примерно до 0.4) и H (оттенок в градусах от 0 до 360). Ключевое — перцептивная равномерность: при равном L цвета воспринимаются почти одинаково яркими, куда ровнее, чем в HSL.

Для дизайн-систем это упрощает многое. Палитру собираете, меняя только H. Тёмную тему переключаете через L в CSS-переменных. Чтобы перекрасить весь бренд, хватает одной переменной --brand-h. И ещё oklch достаёт цвета, которых нет в sRGB, — оттенки P3 и Rec2020.

Поддержка: Chrome 111+, Firefox 113+, Safari 15.4+, для старых браузеров — фолбэк на HEX. В статье — слайдеры L, C, H, на которых видно, как меняется цвет. #css #baseline

🔵 Читать статью
  • ❤‍🔥 5
  • 👍 3
More from @htmlacademy
  1. Sep 25, 2026Скругления в неожиданных местах Скругления хороши в углах блоков, а в других местах они пр…
  2. Sep 25, 2026👍 С 25 по 27 сентября условия покупки курса или профессии предлагаете вы. Мы назвали это…
  3. Sep 18, 2026CSS shape() — фича больших надежд CSS начал вырастать из коротких штанишек квадратного веб…
  4. Sep 17, 2026🔴 Вместе с OKTTA запускаем совместную программу обучения фронтенд-разработчиков Нужна ли…
  5. Sep 16, 2026Завтра спросим у работодателя, что джун должен уметь без нейросети Эфир с руководителем ст…
  6. Sep 15, 202617 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает д…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →