Color Palettes
Color palettes give you a full spectrum of colors to use in your project.
A color palette defines 10 hues — red, orange, yellow, green, cyan, blue, indigo, purple, pink, and gray — each with
a scale of 11 tints from 05 (darkest) to 95 (lightest) available as color design tokens. While the tints have similar lightness values across palettes,
each palette has unique hue shifts and chroma so you can find just the right vibe to your project. Combine a palette
with a theme and variant colors to style
the whole library.
--wa-color-red-*
--wa-color-orange-*
--wa-color-yellow-*
--wa-color-green-*
--wa-color-cyan-*
--wa-color-blue-*
--wa-color-indigo-*
--wa-color-purple-*
--wa-color-pink-*
--wa-color-gray-*
-
Pro Components -
Responsive Layout Tools -
Ever-Growing Pattern Library -
Unlimited Hosted Projects -
Pre-Built Pro Themes -
Pro Theme Builder -
Pro Color Tools -
Official Figma Design Kit Newer additions to Web Awesome, like <wa-toast>, aren't included in the currently available kit, but a new version is in the works.
Track its progress on GitHub. -
WA Pro Perpetual License -
Actual Human™ Support
Already have Pro? Log in
Using This Palette
To use this palette, add the palette's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/color/palettes/default.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-default">
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/default.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-default">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/default.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-default">
Free Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Find |
| 3 | Save your theme to immediately update anywhere you're using your project. |
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
To use this palette, add the palette's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/color/palettes/bright.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-bright">
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/bright.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-bright">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/bright.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-bright">
Free Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Find |
| 3 | Save your theme to immediately update anywhere you're using your project. |
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
To use this palette, add the palette's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/color/palettes/shoelace.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-shoelace">
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/shoelace.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-shoelace">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/shoelace.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-shoelace">
Free Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Find |
| 3 | Save your theme to immediately update anywhere you're using your project. |
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/rudimentary.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-rudimentary">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/rudimentary.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-rudimentary">
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/elegant.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-elegant">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/elegant.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-elegant">
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/mild.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-mild">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/mild.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-mild">
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/natural.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-natural">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/natural.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-natural">
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/anodized.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-anodized">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/anodized.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-anodized">
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
After installing @awesome.me/webawesome, import the palette's stylesheet:
import '@awesome.me/webawesome/dist/styles/color/palettes/vogue.css';
Then, apply the following class to the <html> element:
<html class="wa-palette-vogue">
If you're self-hosting Web Awesome, include the palette's stylesheet from your server:
<link rel="stylesheet" href="/dist/styles/color/palettes/vogue.css">
Then, apply the following class to the <html> element:
<html class="wa-palette-vogue">
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Save your theme to immediately update anywhere you're using your project. |
Styling with Palette Colors
Once a palette is loaded, you can reach for any of its hue and tint tokens in your own CSS. Pair a hue's core color (--wa-color-{hue}) with its matching on color
(--wa-color-{hue}-on) to keep text and icons readable on top of it:
.callout-custom { background: var(--wa-color-blue); color: var(--wa-color-blue-on); }
Building with other tints? The Color tokens reference lists every tint and semantic variant — pair them across the scale and you'll hit WCAG contrast ratios without doing the math.