Auto-Manage UI Colors In Sketch With Chain
Matching colors to suit your page can be a hassle. This is also true for website mockups and mobile app UIs – both require a great color scheme that blends with all page elements.
If you frequently use color tools then you’ll have no trouble finding great palettes. But what if you could automate the process? Yes, it’s possible through Chain.
Chain is a free Sketch add-on that lets you automate color selection (well, mostly). You simply choose a main color and “chain” other elements together with that color. This plugin does all the heavy lifting for you.
Read Also: Free Sketch GUI Kits For Web & Mobile Design — Best of
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, some lighter and some darker, all pulling from one base color. This is surprisingly one handy tool for anyone who prefers Sketch over behemoths like Photoshop.
So let’s say you have a navigation bar, a hero header, and a bright CTA button. You want to update all of these elements at once and blend them into a seamless color style.
Chain lets you do this from a single menu in Sketch. You can even create multiple “chains” of page elements, each with their own unique style and unique goals.
Each chain has four color options:
- Hue
- Alpha
- Saturation
- Brightness
This way you can choose how to blend colors together and how to mix them in a way that looks great.
Although it’s a super helpful plugin for designers, it probably isn’t the catch-all solution to AI design. You’ll still want to vet the color choices yourself and make sure they actually look good.
You can download a copy of Chain from the GitHub repo totally free for life. Once you have a look at Chain and take it for a test ride you’ll be surprised how much it can help your design workflow.
If you still aren’t sure how this works just watch their 1-minute demo video showcasing plenty of examples to please the eye.