Programmable colors: bridging design and code @ Figma Confir 2025

by Irina Nazarova and Arthur Objartel from Evil Martians

Transcript

1. Irina Nazarova CEO Evil Martians Inc. she/her Arthur Objartel Product Designer Evil Martians Inc. he/him Programmable colors: bridging design and code
2. Color draws attention
3. We use color to draw attention
4. Color is powerful
5. Digital color is getting more powerful
6. 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)
7. Changes in the color of objects over time. Science Museum Group, UK
8. Did we get burnt in the 90s?
12. 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?
13. How would you approach this problem?
14. brand color
15. Primary Button Danger Button Success Button
16. Primary Button Danger Button Success Button
17. Primary Button Danger Button Success Button same as blue
 but red same as blue
 but green
18. Let’s adjust the hue slider! HSB
19. Primary Button Button Danger Button Success Too dark Too bright Not accesible
20. Primary Button Button Danger Button Success How do we achieve
 this?
21. Perceptual
 uniformity P3 gamut OK LCH color model at a glance
22. How do we think about color? Make it a little lighter Increase saturation Nudge it to violet
23. What color is this? #F47246
24. :) #F47246
25. Here’s where 
 OKLCH comes in (0.7 0.17 40)
26. 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
27. 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
28. oklc ( h 120) +80 = green oklc ( h 40) Hue oklc ( h 0) -40 = pink H for Hue, from 0 to 320
29. What are the practical benefits of OKLCH
30. 1 Cohesive colors
31. Cohesive colors HEX Inconsistent palette OKLCH Feels like one family
32. 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
33. Theme-ability
34. Dark-mode made easy
35. 2 Easy to manipulate
36. Color formulas (0.6 0.2 260)
37. Color formulas :root { ( ); } --base-color: oklch 0.6 0.2 260
38. :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
39. :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
40. 3 More colors
41. P3 color space 50% more colors All colors
 human eye
 can see sRGB color space P3 color space
42. Future proof: Rec2020 and other new tech Rec2020 All colors
 human eye
 can see P3 color space sRGB color space 76% more colors
43. 4 Supported by...
44. 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
45. And fully embraced by Tailwind
46. You can use P3
 and OKLCH in Figma! You can put OKLCH
 in color picker! Select Display P3 in Figma
47. You can use P3
 and OKLCH in Figma! You can copy P3 color in DevMode
48. Do you know how to fix this now? Primary Button Button Danger Button Success
49. Let’s adjust the hue slider!
 (but in OKLCH)
50. Brand Button oklch(0.6 0.2 260) Error Error ??? Success Success ??? 95 95
51. Brand Button oklch(0.6 0.2 260) Error Error ??? Success Success oklch(0.62 0.2 138) 95
52. 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
53. Primary Button Button Danger Button Success Result!
54. Primary Button Primary Button Primary Button Button Danger Button Danger Button Danger Button Success Button Success Button Success Primary Hover Pressed
55. Primary Button Primary Button Primary Button Button Danger Button Danger Button Danger Button Success Button Success Button Success Primary Hover Pressed
57. TOOLS
62. Roman Shamin Andrey Sitnik Designer + Developer Boundary Blurring Designer who builds Engineer who designs
63. #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!
64. Thank you!
65. Thank you.