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.
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">
For projects on Free workspaces:
- Head over to your project's
Settings. - Find Color Palette. Select
Default. - Save your theme to immediately update anywhere you're using your project.
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Default.
- 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">
For projects on Free workspaces:
- Head over to your project's
Settings. - Find Color Palette. Select
Bright. - Save your theme to immediately update anywhere you're using your project.
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Bright.
- 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">
For projects on Free workspaces:
- Head over to your project's
Settings. - Find Color Palette. Select
Shoelace. - Save your theme to immediately update anywhere you're using your project.
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Shoelace.
- 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">
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Rudimentary.
- 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">
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Elegant.
- 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">
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Mild.
- 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">
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Natural.
- 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">
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Anodized.
- 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">
For projects on Pro workspaces:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Colors and select Vogue.
- Save your theme to immediately update anywhere you're using your project.
