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...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

May 14, 2019 · SVG · Web

5 Most common problems faced by SVG users

As SVG adoption increases 100% year-over-year, front end developers and designers like yourself will increasingly be expected to use more and more SVG in websites, all around the world.

March 09, 2019 · SVG · Web · PNG

Improving mobile page speed by 200% using SVG and Nano

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation t...

January 14, 2019 · SVG · Web

Best practices for SVG SEO in Google Image

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.