国际油价五连跌 国内油价周二四连跌成定局油价

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?

9. None
10. None
11. None

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
56. None

57. TOOLS

58. None
59. None
60. None
61. None

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.