🌈 Generative Colors with CSS
by Chris Ferdinandi @cferdinandi
#css #color #GenerativeColors #oklch
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 #цветовые_пространства
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 :
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
#Design #Approaches
Why OKLCH · “Define colors perceptually, derive everything else.” https://ilo.im/16by9o
_____
#Colors #ColorSpaces #ColorPalettes #OKLCH #ProductDesign #UiDesign #WebDesign #Development #WebDev #Frontend
finish : step 2 OKLCH power !!! https://codepen.io/editor/mous_tik/pen/019d3af7-abd0-7800-86d2-06fcc579a766