Web Code Globe Web Code Globe


There are 3 kinds of colors in WebCode:

  • System colors
  • Basic colors (user-defined)
  • Derived colors (user-defined)

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.

Basic Color

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

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:

  • change opacity
  • change hue
  • change brightness
  • change saturation
  • apply shadow
  • apply highlight

When the parent color changes, all directly and indirectly (via another color) derived colors are updated automatically.

Using a color

To use a color (for example, for a stroke), select it from the color popup button menu:

Setting a stroke colorSetting a stroke color

This menu is automatically populated with your Library colors. You can also select a system color from the "System Colors" submenu:

Common system color menuCommon system color menu

Adding a new color

There are 3 basic ways of adding a new color:

  • Click on the “+” button at the top of the color list in the Library
  • Click on the “Add new color...” menu item in the color popup menu. This also sets the newly-created color in the popup button.
  • Use the color well in the gradient editing popover

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)

Editing a color

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.

A basic colorA basic color

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.

A derived colorA derived color

Derived colors are updated automatically when their parent color changes.

Deleting a color

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.