A Simple Trick For Creating Color Palettes Quickly
Color plays an important role not only in the design world but also in the world in which we live. A color palette can make or break the design that is why it is so important to put in a lot of time and thought into it before deciding on it.
In the following article, you’re going to learn about a neat trick which will simplify your current process when creating a color palette. It’s something I’ve learned from Marc Edwards years ago.
First, you’re going to create three squares which are later going to become a base color. You’re going to divide each square into three sections in the next step so set a height and width that’s divisible by three. In my example, I’m going to create a square that is 240pt high and 240pt wide.
If you’re following my example, rename these layers to Red, Green, and Blue. Change the fill of the Red layer to #FF6161, Green layer to #4F953B, and Blue layer to #0076FF. Select these layers and hit A key to select an Artboard tool and choose Around Selection from the Inspector on the right. Rename this Artboard to Color Palette.
Next step is to add different shades to these squares by dividing them into three equal vertical parts. Create two rectangles on top of the squares that have the same width as the Artboard itself. The height should be the same as one square’s height divided by three — in my example this is 80pt.
Align one rectangle to the top of the Artboard and change the fill to white. Then align the second one to the bottom of the Artboard and change the fill to black. Now lower the opacity of these two rectangles to 20%. By doing this, you’ve created three different shades of our Red, Green, and Blue. Rename these two layers, so you don’t forget what they represent later on.
You’re now going to repeat the dividing process — this time horizontally. Create a rectangle that has the same height as the square. Make the width of this rectangle one-third of square’s width. Align it horizontally to the center of the Red square, then duplicate the rectangle and align it to the right corner of the Red square.
Now to the fun part! Change fill of these two layers to something vibrant. I’m going to use yellow (#FFE200). Reduce the opacity of the middle one to 40% and the right one to 80%. Lastly, change the blending mode of these two rectangles to Overlay.
All that’s left to do is to duplicate these two rectangles and move them into the Green and Blue square. Your rectangles have been split into nine equal parts and with the help of Overlay blending mode and a vibrant color you’ve now made eight new shades from a base color.
Few tips on how to use colors in Sketch
Sketch app has a hidden feature which displays frequently used fill and border colors in the document. It is located on the right side above the alpha value if you have your fill or border color selected. Clicking on the color will expand the panel, and show the frequently used colors.
Working with colors is a fundamental part of designing. To create a cohesive visual experience throughout different elements and platforms designers save their color palettes so they can re-use it over and over again.
In Sketch you’re able to save colors by pinning them. Once a color is selected you’ll see two panels in the Inspector. Global Colors are the ones that will be available across all documents whereas you’ll only be able to use Document Colors in that particular document.
To pin a color just click on the Plus icon in either Global or Document Colors panel. If you’d like to unpin the color, simply drag it out of Inspector. Using Color Picker is a convenient way to select and change colors. A keyboard shortcut for Color Picker is Control + C.
When working on a large project with many Sketch files, manually creating document colors can be a tedious process. Let’s say you work on a mobile app which includes both iOS and Android platform. Once you finish working with one platform, what you can do is to create squares and copy the color palette in them. Then you open a new document, paste these squares in the document and save colors in the Document Colors panel one by one. That’s a hard way to do it.
Sketch Palettes plugin automates this boring process. What this plugin does is it saves color palettes into a file which you can then import into a different document. That way you can quickly add brand colors in a new document you are creating. To export your color palette go to Plugins > Sketch Palettes and save your Global/Document palette which you can then import into any document.
