{"id":45531,"date":"2018-09-19T21:01:39","date_gmt":"2018-09-19T13:01:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=45531"},"modified":"2018-09-19T20:25:37","modified_gmt":"2018-09-19T12:25:37","slug":"auto-manage-ui-colors-in-sketch-with-chain","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/auto-manage-ui-colors-in-sketch-with-chain\/","title":{"rendered":"Auto-Manage UI Colors In Sketch With Chain"},"content":{"rendered":"

Matching colors to suit your page can be a hassle. This is also true for website mockups<\/a> and mobile app UIs \u2013 both require a great color scheme that blends with all page elements<\/strong>.<\/p>\n

If you frequently use color tools<\/a> then you\u2019ll have no trouble finding great palettes. But what if you could automate the process? Yes, it\u2019s possible through Chain.<\/p>\n

Chain<\/a> is a free Sketch add-on<\/strong> that lets you automate color selection (well, mostly). You simply choose a main color and \u201cchain\u201d other elements together with that color. This plugin does all the heavy lifting for you.<\/p>\n

Read Also:<\/strong> Free Sketch GUI Kits For Web & Mobile Design \u2014 Best of<\/a><\/p>\n

\"Chain<\/a><\/figure>\n

With Chain you can pick the style of color matching and how much variation you want. Basically, it works by blending various page elements together<\/strong>, some lighter and some darker, all pulling from one base color. This is surprisingly one handy tool for anyone who prefers Sketch<\/strong> over behemoths like Photoshop.<\/p>\n

So let\u2019s say you have a navigation bar, a hero header, and a bright CTA button. You want to update all of these elements at once<\/strong> and blend them into a seamless color style.<\/p>\n

Chain lets you do this from a single menu in Sketch. You can even create multiple \u201cchains\u201d of page elements, each with their own unique style and unique goals.<\/p>\n

Each chain has four color options:<\/p>\n

    \n
  • Hue<\/li>\n
  • Alpha<\/li>\n
  • Saturation<\/li>\n
  • Brightness<\/li>\n<\/ul>\n

    This way you can choose how to blend colors together and how to mix them in a way that looks great.<\/p>\n

    Although it\u2019s a super helpful plugin for designers, it probably isn\u2019t the catch-all solution to AI design<\/a>. You\u2019ll still want to vet the color choices yourself and make sure they actually look good<\/strong>.<\/p>\n

    You can download a copy of Chain from the GitHub repo<\/a> totally free for life. Once you have a look at Chain and take it for a test ride you\u2019ll be surprised how much it can help your design workflow.<\/p>\n

    If you still aren\u2019t sure how this works just watch their 1-minute demo video<\/a> showcasing plenty of examples to please the eye.<\/p>\n