Maybe just a little more css before bed for a good night’s sleep. #css #blog #design #OKLCH #p3 #jsfree

Putting mental energy into light dark theming and custom properties again.

Cognitive load. Think smart, Dorny.

#css #blog #design #OKLCH #p3 #jsfree

In case you’ve never heard of #Oklab or #Oklch: among other benefits, they help smooth out transitions between colors. You won't get muddy gradients on your particles or unintentional spikes in brightness (aka value).

Oklab was developed by Björn Ottosson
🙏

Volume Color Editor is the best #OKLCH color picker and palette generator I’ve seen. It’s really neat how you can combine patterns!
https://www.volumecolor.io/editor

It’s available as a standalone web tool and now as a #Figma plugin, too.
#oklab #colorprofiles #arttools

От #FFF к OKLCH: как эволюция цветовых моделей меняет веб-разработку

Помните времена, когда цвета в CSS выбирались почти наугад? Белый фон — #FFF , чёрный текст — #000 , акцент — какой-нибудь #3498db , который просто нормально смотрится? Для раннего веба этого хватало. Интерфейсы были проще, экраны — одинаковее, а требования к доступности, темам и визуальной консистентности ещё не давили на разработку так сильно, как сейчас. Но современная веб-разработка давно ушла от логики «подобрали цвет и забыли». Сегодня интерфейс должен одинаково уверенно жить в светлой и тёмной теме, не ломаться на широком цветовой охвате дисплеев, держать читаемый контраст в веб-дизайне и при этом оставаться удобным для поддержки. Именно поэтому эволюция цветовых моделей стала важной инженерной темой. Сейчас цвета в CSS — это целый набор подходов, через которые проект решает задачи доступности, масштабируемости и удобства разработки. И на этом фоне OKLCH всё чаще рассматривают как следующий логичный шаг: модель, которая лучше соответствует человеческому восприятию и помогает строить более стабильные палитры.

https://habr.com/ru/articles/1024482/

#css #oklch #вебдизайн #дизайнсистемы #фронтенд #hsl #rgb #цветовые_пространства

От #FFF к OKLCH: как эволюция цветовых моделей меняет веб-разработку

Помните времена, когда цвета в CSS выбирались почти наугад? Белый фон — #FFF , чёрный текст — #000 , акцент — какой-нибудь #3498db , который просто нормально смотрится? Для раннего веба этого хватало....

Хабр

For English, use the translation, sorry.

J''explique ma méthode pour avoir le moins possible à penser au contraste et à l'accessibilité de mes couleurs. Une méthode de règles CSS avec oklch(from ...), un peu de calc() et de l'organisation.
Les contenus (ainsi que les SVG !) restent lisibles sur n'importe quel arrière-plan.

Ma page de lab et ma checklist pour construire cette structure de thème :

https://sebschopf.github.io/lab/contrast.html

#CSS #WebDev #OKLCH #Accessibilité #Brutalisme

So, here we go !!! I will testing things out. I'm using github.io for now and we'll see where it goes later. For those who’ve followed my posts on OKLCH, here is Phase 3: building a full CSS theme with this method.
(from var(--clr-brand) l c h)

Check it out here: https://sebschopf.github.io/lab/
(Feel free to use your browser's translation tool!)

#CSS #WebDev #OKLCH #Brutalism #DesignSystem #Frontend #Coding #WebDesign #OpenSource

OKLCH le thème

Karl Koch | On oklch

Site uses all-OKLCH palette for perceptual lightness, warm hues, tinted shadows, light-dark themes, and color-mix derivatives.

Karl Koch
Le grimoire OKLCH step 2

La suite de la compréhension d'OKLCH, on va un peu plus loin dans les changements de variable via des équations.

CodePen