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