How to create and edit your site's colors

In TeleportHQ, you save a color once in the Color tab of the Design Language panel, then pick it by name in any color field. When you change that saved color (the app calls it a color token), every element and class that uses it updates. You can save solid colors and gradients, group them into categories, and choose which color is the page background and the default text color.

Before you start#

• Saved colors are available on every TeleportHQ plan.
• You need a role that can edit the Design Language (Owner, Admin or Designer). Other roles see "Your current role does not have permission to update tokens."
• The theme's own colors are edited differently. See How to choose a color theme.

Steps#

1. Create a category#

Categories group your colors, for example "Brand" and "Neutrals". You need one to save your own colors: the theme block and the AI Generated list have no + button.

1. Press Esc, or click an empty part of the canvas, so no element is selected.
2. In the right panel, click the Color tab.
3. At the bottom of the list, click the field Add new category.
4. Type a name, for example Brand.
5. Press Enter, or click +.

2. Save a color#

1. In the category, click +. A panel titled New Brand Token opens.
2. Choose the drop icon for a solid color, or the gradient icon for a gradient.
3. In Name, type a name, for example Orange.
4. Pick the color, or type a hex value such as #E65103.
5. Click Add, or press Enter.

The new color appears in the category.

3. Use the color on an element#

1. On the canvas, click an element, for example a button.
2. In the right panel, click a color field, for example the Background color field.
3. In the list, pick your color. It shows as Orange (Brand).

4. Edit a saved color#

1. Deselect all elements, then open the Color tab.
2. Click the color.
3. Change the color or the name.
4. Click Update.

Every element and class that uses the color updates.

Check that it worked#

The element you linked shows the color. When you edit the saved color, the element changes too. To see every element that uses a color, right-click it and choose Highlight linked nodes (outlines them on the canvas) or View linked nodes (a searchable list; click an item to jump to it).

The AI Generated colors#

In a site the TeleportHQ AI built, the Color tab starts with an AI Generated list, for example color-primary and color-surface. These are the colors the site's pages use. They're saved as CSS variables on the Vars tab and shown on Color for convenience.

• Click one to edit it. Hex, RGB, HSL and gradient values open the color editor. Values such as color-mix(…) open a text box instead.
• The AI Generated list has no +. To add a color, create a category of your own.
• To change the AI Generated colors, edit them here. Picking a new theme doesn't change them.

Page background and default text color#

Two saved colors have a special job in TeleportHQ. Right-click any saved color to change them:

• Set as Background Color: this color paints the page background.
• Set as Foreground Color: this color is the default text color. It also colors the built-in button, input and text area styles and, by default, icons.
• Switch Background with Foreground: swaps the two. It's available on the color that has one of the two jobs.

Delete, duplicate or reorder colors#

• To delete a color, point at it and click ×, or right-click it and choose Delete. If elements use it, TeleportHQ asks you to confirm and tells you how many are linked. After deleting, those elements keep the same color as a fixed value, so nothing on the page changes. Classes that used the color keep it too.
• To duplicate a color, right-click it and choose Duplicate. The copy gets a numbered name.
• To reorder colors, drag a color within its category. You can't drag colors between categories or onto the canvas.
• To rename, duplicate, delete or move a category, click ⋯ next to its name. Deleting a category keeps its colors on your elements as fixed values.

Troubleshooting#

The Add button is greyed out Type a name and pick a color first. The picker shows white, but no color is set until you click or type one.

"Tokens must have a name." / "Token names can't be more than 30 characters long." / "Token names can't contain any special characters." Type a name of up to 30 characters. Use letters, numbers, hyphens (-), underscores (_) and dots (.). Spaces are removed when you leave the field.

"Token category names can't be more than 30 characters long." / "Token category names can't contain any special characters." Category names follow the same rules. Spaces are removed: Brand Colors becomes BrandColors.

My changes disappeared Pressing Esc or clicking outside the editor closes it without saving. Click Add or Update, or press Enter.

The gradient option is greyed out ("Foreground Color can't be a gradient") The default text color must be a solid color.

I can't delete a color Theme colors, and the colors set as page background or default text color, can't be deleted. Give the job to another color first (see above).

"You are trying to delete the … category that has the following tokens with specific roles in it." The category holds the page background or default text color. Set another color as background or foreground, then delete the category.

Good to know#

• Names are unique within a category. If a name is taken, TeleportHQ adds a number.
• Changing a solid color to a gradient turns the background colors that use it into background gradients.
• In exported code, saved colors become CSS variables named after the category and color, for example --dl-color-brand-orange. If you rename a color or its category, the variable name changes. CSS you typed yourself with the old name, for example in custom code, stops matching.