Welcome to Xara Online Designer

Welcome to Xara Online Designer


Xara Online Designer uses Theme Colors. Change a theme color and you change the appearance of that color throughout the whole document. It’s a simple one tap operation. And the fact that we use theme colors mean that documents always have a professionally designed look and feel.

The Color Picker

To change colors - select anything that’s using the color (e.g. place the text cursor in a heading, or select a color filled shape) and click the color patch on the Properties Panel. This opens the Color Picker.                So the top panel of the Color Picker shows the Currently selected color. The center panel shows the set of named theme colors defined for the document . A small ‘s’ in the bottom left corner of a patch indicates that the color has other shades of that color associated with it and these are indicated by the smaller patches beneath (like with the reddish color above). In the center panel just tap on a color to apply the color to the selection. In addition to applying a color, a tap will show a context menu like this… You can also show this just by moving the mouse-pointer over any color patch. In this case it shows the red color is called Theme Color 1, and it has other shades associated with it. There are two menu options - to Change Theme Color 1 or create a New Shade of Theme Color 1. Both of these will open the Color Editor. The black and white colors appear for all documents and are shown on a line of their own at the bottom, together with a greyscale that you can use to to select intermediate shades. Selecting the + button will also open the Color Editor to create a new color. Most documents have an alternative selection of Ready-made color schemes. To see them select the option at the bottom of the picker and they will slide in on a panel.

Colors in groups

If you select a group containing several colors - the color patch on the properties panel has a 2 color diagonal split to indicate this. Tap on the patch and the Color Picker displays the group colors at the top of the panel Tap the color you want to edit and then choose a replacement from the Color Picker or tap the + button to create a new color from the Color Editor. Where a patch represents a text color this is indicated.

The Color Editor

Here is the color editor. I’m editing Theme Color1. The black cross shows the new color I’ve chosen which is the New orange color. The solid gray cross I will move around to select a different color.  I can easily compare it with the Old red color. This is great when making subtle changes to compare against the previous color. You can edit color names, just tap on the name field and edit. Also you can copy and edit the hex RGB value from the color value field at the bottom. Or I could select a different color entirely by dragging on the hue selector. Here I am creating a new shade of an existing color I’ve called ‘Paler 1’. The X  marks the original parent color, so I’m creating a paler version by dragging to the left. The color patches below show the other shades linked to the parent color. If you tap on them they will load into the color editor. The two shade X and Y fields allow you to enter precise numeric shade values (all relative to the parent position). If you want to create a pure tint of a color - that is  a mix to white - then just make sure both the X  and Y values are the same. The point of linked Shades of colors, is that when  the hue of the parent color changes, then all linked shades change in sync.  

Color Schemes

There is a selection of Ready-made color schemes for you to use - just tap on the option at the bottom of the Color Picker and the schemes will slide in on their own panel. Tap to choose a scheme and it will replace the existing theme in your document and become the main theme in the Theme colors panel.  Note that your document must contain a designated “Theme color 1” or you won’t see the themes - most of our templates have ready made color schemes for you to choose from.


Here is a tutorial with more info about using Ready-made color schemes.