September 19, 2017 · Diagramming

How to Save More Time Using Vecta's Color Palette

How can we have a color palette that helps YOU save time? What colors do you use most and what colors can help you to be most productive? A behind the scenes look of how we made the best SVG editor online.

We started by looking at how color palettes in other editors could work for their users. It quickly appears that using pastel colors would be really cool, and make our text appear clear and easily readable. So here is our first attempt:

Initial attempt at color palette
Initial attempt at color palette

Little did we know, that not only the palette looks ugly, but we also had to spend an inordinate amount of time trying to adjust to the colors we require, simply because it does not contain commonly used colors. So, we returned to the drawing board, and began to list out what are the possible colors.

Listing of the entire range of colors
Listing of the entire range of colors

In diagramming, colors allow users to show relationships. For example, a darker color may be a header and softer colors may denote data that is related.

Colors can denote data relationship
Colors can denote data relationship

It is much clearer in this diagram, that all orange colored items are related, whereas the other color - green denotes another type of data.

Our vision for Vecta is not only to be the best editor, but also to be a productive one, whereby a single click would allow users to select color that is clearly differentiated, to produce clear and beautiful diagrams with minimum effort. Therefore, we chose clearly differentiated color, close to primary, so that we do all the work, and you do not have to do any.

Primary colors are great for outer lines
Primary colors are great for outer lines

Next we concentrated on how you can produce clear documentation using different colors, that would be easily readable and yet convey different meanings and relationships. We chose light backgrounds, toned so that you can easily use them with a single click.

Toned colors are great as backgrounds, with easily readable text
Toned colors are great as backgrounds, with easily readable text

How about colored text and dark backgrounds? The next 3 colors is great for darker text, lines and backgrounds with light text.

Darker colors are great for text and lines, and as backgrounds with light text
Darker colors are great for text and lines, and as backgrounds with light text

We also wanted that if ever we have a need to select a custom color, we do not want to do it repeatedly, and therefore have provided a large selection of recent colors, and these colors sync across devices, so that the colors you recently used, are available on all your devices.

The final Vecta color picker
The final Vecta color picker

As we use the color palette more and more, we will continuously find ways to improve and make it more convenient for our users to create beautiful diagrams.

Have a suggestion to make Vecta better? Tell us in the comment section below!

If you have not signup for a Vecta account yet, get your free account now at vecta.io We’d love to know how it help you and your team to communicate more effectively and work more collaboratively!

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Eleen

Marketing Executive at Vecta.io

RELATED POSTS

August 23, 2018 · SVG · Web · Diagramming · Javascript

Supercharge Vecta’s functionality with JavaScript based plugins

Vecta is more than just a normal browser-based SVG editor, it's especially powerful when you have all the flexibility you need to make the most out of the platform. Plugins can drastically change the way you work, saves time and enhances productivi...

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

July 20, 2018 · SVG · Web · Diagramming

You can now use Google Fonts in Vecta

When you’re drawing diagrams or illustrations in Vecta, sometimes you find yourself wanting to use some of your favorite fonts in your drawings. Now you can. Google fonts is now available in Vecta, and you have more than 800 font families to choos...

Sign up for a FREE Vecta account and start
creating your diagram online.

Create a Free Account