September 19, 2017 · How To Vecta

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

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

October 08, 2019 · How To Vecta

Introducing SVG flattening for laser and vinyl cutting

SVG editing for vinyl cutters and laser engravers just got much easier with Vecta's new feature - SVG Flattening. This feature is made possible with Vecta's user - John Robinson's feedback and input, thanks John!

October 25, 2018 · How To Vecta

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minu...

August 30, 2018 · How To Vecta

5 Great Reasons you should be using Google Fonts to Design SVG Images

Great typography adds to a great design. But oftentimes, getting a decent custom fonts showing up properly on screens comes at a price, either with extra effort or compromising in quality or even both. We experimented to find out the best ...

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