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 this article? Share it with your friends!
AUTHOR

Eleen

Marketing Executive at Vecta.io

RELATED POSTS

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

May 03, 2018 · SVG · Diagramming · Web

How we ate our own dog food and used ONLY SVG on our website

It all began when we have a small problem, we wanted a small icon on our Google signup button, everything looks perfect, except when we view our website on high resolution or retina displays, and began to see pixelation:

June 30, 2017 · SVG · Diagramming · Web

A guide to getting sharp and crisp SVG images on screen

Have you created any images lately that does not seem to be as sharp as you would like? Are you constantly adjusting your SVG coordinates to ensure your images are sharp?

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

Create a Free Account