Color names

Color names explained

Turbo defines some colors names to ensure they exist on every project. You are encouraged to customize these colors but you can not remove them.

This is to support building templates. That way, copy-pasting HTML snippets from a template to your project is guaranteed to work as long as template authors have only used the default color set. Upon copy-pasting the snippets into your project, your local color configurations will be automatically applied.

There are two types of colors: color scales and color points. A color scale defines several colors along a single hue, while a color point is single color value.

On another dimension, there are rainbow colors and brand colors.

Rainbow colors include color names like red, green and blue. They are defined by their hue. When customizing the color palette for an individual project, you can pick the exact blue you want the name blue to mean, but you should not assign a red color to it. That way, an SVG illustration copy-pasted into your website that uses the blue color name for the sky will not end up having a red sky.

The list of rainbow colors is intentionally kept short. Having too many variants of a single color will just hurt your design.

Brand colors include color names like brand, link and success. For example, a theme author may want to create a link element. What color should it have, red or blue? Impossible to tell without knowing your brand colors. That's the gap brand colors fill. Brand colors will typically reference one of the rainbow colors.