July 28, 2018 · SVG · Web · Diagramming

Color Selection Made Easy

Found yourself scratching head to pick a professional looking yet interesting color to give a final touch to your drawings?

We worked some magic and created a color stencil in Vecta, for everyone who needs good colors laid out in their drawings within seconds without googling or installing any extensions.

Material Design Palette stencil in Vecta

Use Vecta’s Material Design stencil to help you get your drawings done faster! It has a full range of harmonious colors based on Google’s Material Design that allows you to pick the colors you need, then apply them directly on any shapes in your drawing. Your font colors will automatically set to be in contrast with your shape's colors too!

Material design colors
Material design colors

How to use it effectively - The Stencil & Color Painter combo

Start by opening the Material Design Palettes stencil from your stencil menu. Choose the color symbol you want to use, then drag and drop it into your drawing.

Drag symbols from stencil to drawing
Drag symbols from stencil to drawing

Once dropped on your drawing, you’ll see a list of color tones for you to choose from. Pick the color you want to apply on your shapes, then use Vecta's color painter tool. After that, click on any shapes to apply that color.

Using color painter
Using color painter

Apply the same color on multiple shapes

To use the same color repeatedly on a few shapes, 'lock' the color with a double click on your color painter. Then go ahead to apply it on those shapes.

If you do not want the color anymore? One click on color painter and it goes off.

So treat it like a template, but with more flexibility and freedom for you to get things done faster. It will save you much more time, without compromising the aesthetics of your drawings.

Give it a try and let us know what you think! Comment below or Tweet to us at @vectaio!

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Yi Qian

CXO at Vecta.io. Solving problems with people for people by connecting dots between brains, over a cup of coffee.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

RELATED POSTS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · SVG · Web · PNG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...

October 28, 2018 · SVG · Web · Fonts

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...