Naming colors and keeping structure clear

Naming conventions help teams understand each color’s purpose at a glance. Here are widely used methods:

• Functional naming, where colors are labeled based on what they represent, such as base-blue, base-gray, or base-red. This approach highlights which values act as the core colors in the system.
• Numeric naming, where numbers show variations of a color, like silver-1 or silver-darken-15. These scales make it easier to add or adjust tones without guessing their relationship to the base value.
• Combined naming. For example, a palette might use blue-base, blue-100, blue-200, and blue-300 to show a clear family structure while also giving each tone a defined place on the scale. This mix keeps names easy to read while still supporting expansion.

Whatever the chosen approach, the key is consistency. When every color follows the same pattern, the palette becomes easier to navigate, update, and use across both design and development.