There are 3 kinds of colors in WebCode:
System colors are colors like Black, White, Red, ..., plus some additional colors defined by the OS X and iOS operating systems. You cannot define new system colors and they are not displayed in the Library. However, you can create your own colors by adding them to the Library. These can be either basic or derived.
A basic color is a simple color that does not depend on any other color. You can adjust it at any time. All directly or indirectly affected shapes, colors and gradients are updated accordingly.
Derived color is a color that dynamically depends on another color. It is derived from the parent color using some of the built-in color operations:
When the parent color changes, all directly and indirectly (via another color) derived colors are updated automatically.
To use a color (for example, for a stroke), select it from the color popup button menu:
This menu is automatically populated with your Library colors. You can also select a system color from the "System Colors" submenu:
There are 3 basic ways of adding a new color:
In addition to adding a new color to the Library, this also presents you with a color editing popover. (note that you can also add colors by copying and pasting colored shapes from another document, as well as double-clicking a gradient control)
You can edit a color by double-clicking on it in the Library. Alternatively, you can reselect the same color in the Inspector popup button to show the edit color popover.
The text field contains the name of the color. WebCode generates all names for you, though you can always change them to be more descriptive.
There are two types of colors: “basic” and “derived”. Basic colors are the ones with base color set to “none”. For basic colors, you only have to choose a particular color using the color picker. You can set exact values in various formats, adjust the knobs or pick any color from the screen using the magnifier in the lower right corner of the popover.
By selecting the base color you get a “derived” color. With derived colors, you have to specify the desired operation and amount. For example, you can set a color to be the same as some other color that already is in the Library, but with a 50% opacity. This is an extremely useful feature.
Derived colors are updated automatically when their parent color changes.
To delete a color, select it in the Library and press the DELETE key. Alternatively, you can use the Delete item in the Edit menu.
When you delete a color, it is replaced in all shapes, gradients and shadows that have been using it with a default color. All colors directly derived from the deleted color are converted to basic colors, but visually remain the same.