“The Interaction of Color Systems”
summary
A practical report on rebuilding a product palette: a codebase with 2,449 hex values gets audited, rules land like “base colors must pass AA large” and the darkest/lightest must pass for small text, and a first ship removes 579 hex values (23%). Tools used include colorable (colorable.jacksonblack.com), Spectrum and simple color pickers, Palx and colorizer for generation experiments. Result is a working v1 that improves many contrasts, exposes tricky red/green and green-button accessibility issues, and cannot be A/B tested because the system wasn’t feature-flagged.
AI-written summary · about
chapters (30)
- 0:00Intro
- 1:48Jina & Cap are partly to blame for why I work on design systems
- 3:52Color System
- 4:02Color is subjective
- 4:45Learning about color
- 6:27Alternative representations of the RGB color model, designed to more closely align with the way human vision perceives color-making attributes.
- 8:18the desire to fit a chosen contour, such as the pyramid, cone, or cube, coupled with a lack of proper tests, has led to many distorted statements of colour relations
- 8:40(the) entire history of color theory is neglected in modern design tools
- 10:06Creating the system
- 10:21As a user of the design system, I can use color successfully and with confidence
- 12:04Opportunities
- 13:05Building the palette
- 17:51How colors interact in the UI
- 19:25How colors within a palette interact with each other
- 22:38How colors interact within the same hue or family
- 23:15Define system rules
- 23:57Naming conventions
- 24:08What's important for your naming convention?
- 25:47red green yellow blue cyan indigo
- 27:07Sometimes it's easier to call a spade a spade
- 28:02Programming color
- 30:33Weber-Fechner Law The relationship between actual change and perceived change.
- 31:03What is perceived is hard to calculate
- 31:58Not impossible, just difficult
- 32:322449 1870 hex values
- 33:222449 1276 hex values
- 33:36#Opinions
- 34:20Color is the most relative medium in art
- 35:28This is v1
- 35:43Design Systems should be built for change
related talks
32mInteraction of color systems
43mRethinking Colors in Design Systems: A CSS Approach to Idiomatic Design
19mWhen colour theory meets technology
28mArchitecting a Robust Color System with Swift
53mPractical Color Theory for People Who Code
36mThe Magic of Color
06mDesign Accessibly: Color Contrast Tips and Tools
28mAdvanced Colors in iOS