User Manual Quickstart General Concepts Frame Features Resources Pages Layers Snippets Images Fonts Colors Add Colors Color Selector Colors Context Menu Deleting Colors Color Groups Buyer Side Colors Color Schemes HLS Colors Using Color Pickers Styles Form Fields Account Portal Style Reference Change Log Known Bugs & Limitations Glossary Acknowledgements Api Reference Authorization Tokens Embedding The Editor Custom Integration Backend Api


Colors Overview

In the Colors tab, one can create color swatches, powerful color schemes and configure Buyer Side colors.

Add Colors

To add a new color swatch, press the Add Color Swatch button Add Font. The color dialogue will then open, and here one can create a new color.

Add Color

Printess supports a wide range of Color Models. Process colors RGB, CMYK and LAB are supported. Additionally, every color may be defined as Spot Color - this is useful for special corporate colors, special functional colors for Die-Cut lines and other technical markups.

By default, a new color swatch is named by its color values. If one wants to create a specific color swatch name, deselect Name Color with Value and enter a swatch name in the text box above.

To set if a color swatch is a Process or Spot Color use the radio buttons:

Process means the color is made from components either RGB or CMYK or LAB.

Spot - Refers to a method of specifying and printing colors in which each color is printed with its own ink. To define the appearance of the color and also define a replacement color in case one outputs the document without Spot Colors, the process color is part of the definition.

One can either choose a Color Model and directly enter its color values, or one can use the HLS color wheel to the left to define a color. Saturation, better described as “intensity” is lowest in the center and grows to the outside.

Hue - the color tone - changes around the circle

Luminance - the darkness of the color - is controlled with the slider below the circle.

Using CMYK or LAB colors while defining a sRGB screen color

When defining CMYK or LAB Colors one can,a after defining the color directly enter the sRGB color values to be shown on screen when using the color. This is especially usefull for CMYK where as the RGB replacement colors are sometimes quite diffrent to calculated values.
To define your CMYK color together with a matching sRGB screen color first switch to CMYK and enter your CMYK color values, sRGB values will change to a nearby color. After this click into the Red, Green or Blue values or the Web Color field and directly enter the prefered replacement colors (this will not change your CMYK or LAB values). Generally speaking changing the selected color will change all other colors, chnaging the other colors will not change your selected color. The color wheel is bound to the sRGB color type only.

Color Selector

Color Selector

There are many places in the Printess Designer UI where one might select a color. All of these places will use the Color Selector to do so. As this selector contains a high level of functionality, let us make ourselves familiar with it.

Color Selector

The easiest thing to do is to simply use it to select a color swatch one would like to use. Just click on the small down arrow to the right, and a drop-down will open from which one can select from all available created swatches of the Template.
The slider on the bottom adjusts the opacity, or in the case of a Spot Color, controls the tint of the color.

Another option is to edit the selected color swatch directly from the selector. Just select the Pen icon and the color dialogue will open. Here you can alter every aspect of the color including the name. Note that this will not create a new color swatch even if you change the name.
One can also switch to a Custom Color. A Custom Color is just a color without a saved swatch. It represents a certain color value without being selectable in other places. To create a Custom Color just click on the color patch to the left of the selector and the color dialogue will open in Custom Color Mode.

Color Selector

As one can see, the swatch name options are gone as this is just a single color value. If one would like to create a new swatch from here, select the Add Swatch button in the dialogue.

Add Swatch

A color swatch named with the current color value will be created and selected. (If you need a different swatch name, simply click the Edit Swatch button).

Colors Context Menu

Colors Context Menu
Right-click on a color swatch to open the Colors Context menu. From here you can access several useful functions:
Properties will open up the color dialogue to edit the color swatch.
Restore Buyer Colors - Here one can restore all default Buyer colors which may have been deleted.
Copy, Paste - Here one can copy and paste one or multiple color swatch.
Add - Adds a new color swatch.
Delete - Delete a color swatch.
Duplicate - Create a duplicate of one or multiple color swatches e.g. for creating a color scheme (s.b.).
Sort Alphabetically Will sort all color swatches alphabetically by their swatch name within their color group.

Deleting Colors

One can delete color swatches by either pressing the DEL or Backspace keys or by selecting Delete in the Colors Context menu. If a user tries to delete a color swatch that is used in the document, Printess will ask whether they would like to either create a Custom Color from it or choose a replacement swatch.

Pro Tip: As Printess always checks for color usage, one can reduce available color swatches to the used ones with ease. Just select all color swatches in the Colors tab with CTRL-A and press DEL or Backspace. Printess will delete all swatches except the used ones.

Color Groups

One can create groups to organize color swatches by pressing the Add Color Group icon Add Color Group.

Buyer Side Colors

There is an always present group called Buyer Colors. This default group holds the color swatches which should be available to a Buyer wherever colors are selectable in the Buyer Side.

Note that Buyer Side colors are not limited to this group. Essentially, every group can be selected to be available to Buyers.

Buyer Colors

Color Schemes

Color schemes are a powerful option in Printess that can be used to define several possible appearances for the same design.

For this, a designer can define several colors which appear throughout the document in different variations. Just create several groups which will hold the variations. The names of the groups will be what is selected by the Buyer later on.

Now we can create or copy and alter all the colors of the color scheme again under the same name and put them into their respective groups like so:

Color Scheme Groups

As one can see, all of the colors now exist in several places but with different color values.

On the Buyer Side, one can select the color scheme and let all the colors in the scheme change according to the selection of individual customers.

Color Scheme Selection

This is how it looks like when selecting a color scheme.

Selected Yellow: Color Scheme Yellow

Selected Blue:
Color Scheme Green

As one can see, all the colors in the color scheme changed with just one Buyer Side setting.

The color scheme selection automatically appears for the Buyer the moment one creates at least two color groups with at least one equally named color in it.

A very handy function to help create color schemes is the duplicate function in the Colors Context menu. One can first create the design with a set of color swatches, then multi-select all of them and select Duplicate from the Colors Context menu. Now, just move the duplicated swatches to a new group and adjust the colors accordingly.

HLS Colors

Note: HLS colors work only with RGB colors.

Another great functionality for Buyer Side color manipulation is the HLS manipulation option. This option offers color changes on the Buyer Side where a customer only needs to select one color to change a range of connected colors with it.

To make use of HLS colors start by selecting the same color for different features or elements and then manipulate them with the HLS sliders that appear when the HLS button below the color is selected. One can then change:

Hue - The color angle. Will shift the a color relative to the actually selected one.

Luminance makes the color darker or lighter.
Saturation makes the color ‘stronger’ or more black & white.

Below is an example where we selected blue as the Fill-Color Swatch and selected the same color for the stroke, but manipulated it with the HLS sliders to be a lighter blue.

HLS Colors

The benefit of this method is that in the Buyer Side one can now select any available Buyer Color (again RGB only!) and thereby change both colors at once. This is especially useful if one would like to create easy to colorize Snippets.

Below is the same example, but where a Buyer changed the color to pink. Note that as it is HLS color manipulation, only one color is allowed to change. But changing the main color to pink now automatically changes the light blue to light pink as well.

HLS Colors Used

Using Color Pickers

HLS Colors Used

Printess suports the use of color pickers which store their color value as a hex value in the clipboard (e.g. ColorZilla plugin for Chrome). Just pick a color and then select a frame containg a shape or a single-line-text or path-text now press CTRL + V and the text or shape will use the picked color as custom color.

Of course you can copy any color like “#FFAA12” into your clipboard and paste it into the selected frame. It will apply the color to the primary colors of all selected frames.