Color Palettes

Color palettes give you a full spectrum of colors to add life to your project.

Each palette defines 10 color hues with a scale of 11 tints. While the tints have consistent lightness values across palettes, each palette has unique hue shifts and chroma to give it unique character so you can find just the right vibe to your project.

Additional palettes are available to pro users. Please login to view pro palettes.

Default Bright Shoelace
red
--wa-color-red-95 --wa-color-red-90 --wa-color-red-80 --wa-color-red-70 --wa-color-red-60 --wa-color-red-50 --wa-color-red-40 --wa-color-red-30 --wa-color-red-20 --wa-color-red-10 --wa-color-red-05
orange
--wa-color-orange-95 --wa-color-orange-90 --wa-color-orange-80 --wa-color-orange-70 --wa-color-orange-60 --wa-color-orange-50 --wa-color-orange-40 --wa-color-orange-30 --wa-color-orange-20 --wa-color-orange-10 --wa-color-orange-05
yellow
--wa-color-yellow-95 --wa-color-yellow-90 --wa-color-yellow-80 --wa-color-yellow-70 --wa-color-yellow-60 --wa-color-yellow-50 --wa-color-yellow-40 --wa-color-yellow-30 --wa-color-yellow-20 --wa-color-yellow-10 --wa-color-yellow-05
green
--wa-color-green-95 --wa-color-green-90 --wa-color-green-80 --wa-color-green-70 --wa-color-green-60 --wa-color-green-50 --wa-color-green-40 --wa-color-green-30 --wa-color-green-20 --wa-color-green-10 --wa-color-green-05
cyan
--wa-color-cyan-95 --wa-color-cyan-90 --wa-color-cyan-80 --wa-color-cyan-70 --wa-color-cyan-60 --wa-color-cyan-50 --wa-color-cyan-40 --wa-color-cyan-30 --wa-color-cyan-20 --wa-color-cyan-10 --wa-color-cyan-05
blue
--wa-color-blue-95 --wa-color-blue-90 --wa-color-blue-80 --wa-color-blue-70 --wa-color-blue-60 --wa-color-blue-50 --wa-color-blue-40 --wa-color-blue-30 --wa-color-blue-20 --wa-color-blue-10 --wa-color-blue-05
indigo
--wa-color-indigo-95 --wa-color-indigo-90 --wa-color-indigo-80 --wa-color-indigo-70 --wa-color-indigo-60 --wa-color-indigo-50 --wa-color-indigo-40 --wa-color-indigo-30 --wa-color-indigo-20 --wa-color-indigo-10 --wa-color-indigo-05
purple
--wa-color-purple-95 --wa-color-purple-90 --wa-color-purple-80 --wa-color-purple-70 --wa-color-purple-60 --wa-color-purple-50 --wa-color-purple-40 --wa-color-purple-30 --wa-color-purple-20 --wa-color-purple-10 --wa-color-purple-05
pink
--wa-color-pink-95 --wa-color-pink-90 --wa-color-pink-80 --wa-color-pink-70 --wa-color-pink-60 --wa-color-pink-50 --wa-color-pink-40 --wa-color-pink-30 --wa-color-pink-20 --wa-color-pink-10 --wa-color-pink-05
gray
--wa-color-gray-95 --wa-color-gray-90 --wa-color-gray-80 --wa-color-gray-70 --wa-color-gray-60 --wa-color-gray-50 --wa-color-gray-40 --wa-color-gray-30 --wa-color-gray-20 --wa-color-gray-10 --wa-color-gray-05

Using This Palette

CDN npm Self-Hosted

For projects on Free teams:

  1. Head over to your project's Settings.
  2. Find Color Palette. Select Default.
  3. Save your theme to immediately update anywhere you're using your project.

For projects on Pro teams:

  1. Head over to your project's Settings.
  2. Press Edit Your Theme to open the Theme Builder.
  3. Open Colors and select Default.
  4. Save your theme to immediately update anywhere you're using your project.

To use this theme, import the theme's stylesheet:

import '@awesome.me/webawesome/dist/styles/themes/default.css';

Then apply the following class to the <html> element:

<html class="wa-palette-default">

To use this theme, include the theme's stylesheet:

<link rel="stylesheet" href="/dist/styles/themes/default.css" />

Then apply the following class to the <html> element:

<html class="wa-palette-default">
    No results
    Navigate Enter Select Esc Close