Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Programmable colors: bridging design and code @...
Search
Irina Nazarova
June 23, 2025
1
130
Programmable colors: bridging design and code @ Figma Confir 2025
by Irina Nazarova and Arthur Objartel from Evil Martians
Irina Nazarova
June 23, 2025
Tweet
Share
More Decks by Irina Nazarova
See All by Irina Nazarova
Learning to consult. Learning to live. Irina Nazarova @ Friendly.rb 2025
irinanazarova
0
38
The Whop & Chop: Cutting CI time in half
irinanazarova
0
540
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
420
Startups On Rails 2025 – Sin City Ruby
irinanazarova
2
95
Startups On Rails 2025 @ Tropical on Rails
irinanazarova
0
1.2k
Evolution of realtime and AnyCable Pro – Rocky Mountain Ruby, 2024 Irina Nazarova
irinanazarova
1
200
Rails World 2024 Lightning Talk Irina Nazarova "How to run a Ruby meetup"
irinanazarova
1
70
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Liz Heym Catching Waves With Time-Series Data, SF Bay Area Ruby Meetup July 18 2024
irinanazarova
0
120
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fireside Chat
paigeccino
40
3.7k
Being A Developer After 40
akosma
91
590k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Building Adaptive Systems
keathley
43
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Transcript
Irina Nazarova CEO Evil Martians Inc. she/her Arthur Objartel Product
Designer Evil Martians Inc. he/him Programmable colors: bridging design and code
Color draws attention
We use color to draw attention
Color is powerful
Digital color is getting more powerful
Can you spot the difference? Use P3 color space to
access extra vibrant and deep colors unavailable with HEX #ff0000 color(display-p3 1 0 0)
Changes in the color of objects over time. Science Museum
Group, UK
Did we get burnt in the 90s?
None
None
None
What if? What if we simply need better tools to
use color safely? What if we give you these tools today and see what happens?
How would you approach this problem?
brand color
Primary Button Danger Button Success Button
Primary Button Danger Button Success Button
Primary Button Danger Button Success Button same as blue but
red same as blue but green
Let’s adjust the hue slider! HSB
Primary Button Button Danger Button Success Too dark Too bright
Not accesible
Primary Button Button Danger Button Success How do we achieve
this?
Perceptual uniformity P3 gamut OK LCH color model at a
glance
How do we think about color? Make it a little
lighter Increase saturation Nudge it to violet
What color is this? #F47246
:) #F47246
Here’s where OKLCH comes in (0.7 0.17 40)
ok ch( l 0.6 ok ch( l 0.8 +0.2 =
more white Lightness ok ch( l 0.4 -0.2 = more black L for Lightness, from 0 to 1
okl h( c 0.20 +5 = more orange okl h(
c 0.15 Chroma okl h( c 0.05 -5 = less orange C for Chroma, from 0 to 1
oklc ( h 120) +80 = green oklc ( h
40) Hue oklc ( h 0) -40 = pink H for Hue, from 0 to 320
What are the practical benefits of OKLCH
1 Cohesive colors
Cohesive colors HEX Inconsistent palette OKLCH Feels like one family
Color accessibility OKLCH HEX Primary Button Primary Button Primary Button
Primary Button oklch(0.5 0.26 300) #8368d6 oklch(0.5 0.26 135) #A4EA00 LOW CONTRAST
Theme-ability
Dark-mode made easy
2 Easy to manipulate
Color formulas (0.6 0.2 260)
Color formulas :root { ( ); } --base-color: oklch 0.6
0.2 260
:root .button:hover { ( ); } { (from ( )
(l + ) h); } --base-color: --button-color: --base-color oklch oklch var calc 0.6 0.2 260 0.1 c Color formulas calc(l + ) 0.1
:root .button:hover { ( ); } { (from ( )
(l + ) h); } --base-color: --button-color: --base-color oklch oklch var calc 0.6 0.2 260 0.1 c Color formulas calc(l + ) 0.1
3 More colors
P3 color space 50% more colors All colors human eye
can see sRGB color space P3 color space
Future proof: Rec2020 and other new tech Rec2020 All colors
human eye can see P3 color space sRGB color space 76% more colors
4 Supported by...
All browsers! Chrome 133 Edge 133 Safari 18.3 Firefox 135
Chrome for Android 133 Safari on iOS 18.3 Samsung Internet 27 Opera Mobile 80 Android browser 133
And fully embraced by Tailwind
You can use P3 and OKLCH in Figma! You can
put OKLCH in color picker! Select Display P3 in Figma
You can use P3 and OKLCH in Figma! You can
copy P3 color in DevMode
Do you know how to fix this now? Primary Button
Button Danger Button Success
Let’s adjust the hue slider! (but in OKLCH)
Brand Button oklch(0.6 0.2 260) Error Error ??? Success Success
??? 95 95
Brand Button oklch(0.6 0.2 260) Error Error ??? Success Success
oklch(0.62 0.2 138) 95
Brand Button oklch(0.6 0.2 260) Error Error oklch(0.62 0.2 27)
Success Success oklch(0.62 0.2 138) 95
Primary Button Button Danger Button Success Result!
Primary Button Primary Button Primary Button Button Danger Button Danger
Button Danger Button Success Button Success Button Success Primary Hover Pressed
Primary Button Primary Button Primary Button Button Danger Button Danger
Button Danger Button Success Button Success Button Success Primary Hover Pressed
None
TOOLS
None
None
None
None
Roman Shamin Andrey Sitnik Designer + Developer Boundary Blurring Designer
who builds Engineer who designs
#programmablecolor We all have examples of great use of color!
Join us in sharing ideas and examples on X, Bluesky and other socials! Thank you!
Thank you!
Thank you.