How to Save More Time Using Vecta's Color Palette

September 19, 2017 ·  Eleen · Success Stories · How to Vecta

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 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 Vecta can 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!

AUTHOR

Eleen

Marketing Executive at Vecta.io

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

vecta.io Early Access