[{"data":1,"prerenderedAt":47},["ShallowReactive",2],{"writing-color-formula":3},{"id":4,"title":5,"body":6,"cover":14,"description":19,"extension":20,"figures":21,"inShort":22,"meta":23,"navigation":24,"path":25,"readMinutes":26,"related":27,"seo":31,"stem":32,"takeaways":33,"__hash__":46},"writing\u002Fwriting\u002Fcolor-formula.md","Color Formula",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":12,"links":13},"",2,0,[],{"src":15,"width":16,"height":17,"alt":18},"\u002Fimages\u002Fwriting\u002Fcolor-formula.webp",1400,1050,"News cards whose accent colours are picked from their images, with an eyedropper showing a colour-formula token.","Summary of Jinson Johny's Bootcamp article proposing Color Formula, a shared standard for picking dynamic colours from images by rule rather than hex value.","md",null,"Jinson Johny proposes Color Formula, a framework for dynamic colours extracted from content such as images. Prompted by a client project and the lack of a shared standard, it defines the rule for choosing a colour rather than the colour itself, written as image ID, position and logic (for example cf-23313.top.vibrant), so designers and developers share the same logic.",{},true,"\u002Fwriting\u002Fcolor-formula",7,[28],{"label":29,"href":30},"Color Formula at colorformula.org","https:\u002F\u002Fcolorformula.org",{"description":19},"writing\u002Fcolor-formula",[34,37,40,43],{"lead":35,"text":36},"Dynamic colour is spreading","Spotify, Instagram Stories, the App Store Today tab, Apple Invites and Material 3 Expressive all derive UI colours from content or wallpapers.",{"lead":38,"text":39},"Picking is subjective","With manual colour pickers, two designers can pick different colours from one image, and handoff passes hex values when developers need logic.",{"lead":41,"text":42},"Rules, not hex values","Each formula has three parts: image ID, position (default full) and logic, with average, dominant, vibrant and muted in the first release.",{"lead":44,"text":45},"A standard, not a plugin","He frames it as a standard that means the same thing everywhere, like cubic-bezier for motion, released in public for others to adopt and contribute to.","FNFXDCYla2OySrv4rorQlZO7O01q8vbZoZ-KJO0HRR8",1793655448907]