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

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

December 12, 2018 · SVG · Web · CSS

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.

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