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

To import this palette, set <html class="wa-theme-default"> and import the following stylesheet: 

<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/color/palettes/default.css" />
    No results