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
150
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
61
The Whop & Chop: Cutting CI time in half
irinanazarova
0
810
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
450
Startups On Rails 2025 – Sin City Ruby
irinanazarova
2
97
Startups On Rails 2025 @ Tropical on Rails
irinanazarova
0
1.3k
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
75
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Liz Heym Catching Waves With Time-Series Data, SF Bay Area Ruby Meetup July 18 2024
irinanazarova
0
130
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Speed Design
sergeychernyshev
32
1.2k
The Cult of Friendly URLs
andyhume
79
6.6k
Raft: Consensus for Rubyists
vanstee
140
7.2k
What's in a price? How to price your products and services
michaelherold
246
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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.