Web Awesome (ViUR)

Font Awesome
Try SSR Server-side rendering (SSR) generates component HTML on the server before the page loads, improving SEO and initial load time. Use the switch to see Web Awesome components render with and without SSR.
Search this website ⌘KCtrl+K Light Dark System Docs Select Color Scheme Default Awesome Shoelace Active Brutalist Glossy Matter Mellow Playful Premium Tailspin Docs Select Theme View Project on GitHub Star Project on GitHub
Start Components Docs Help
Web Awesome Font Awesome Build Awesome
Search this site… /
Try SSR Server-side rendering (SSR) generates component HTML on the server before the page loads, improving SEO and initial load time. Use the switch to see Web Awesome components render with and without SSR.
Light Dark System Docs Select Color Scheme Default Awesome Shoelace Active Brutalist Glossy Matter Mellow Playful Premium Tailspin Docs Select Theme

Getting Started

  • Installation
  • Usage
  • Forms
  • Localization
  • Frameworks
  • Using with AI
  • Figma Design Kit ProThis requires access to Web Awesome Pro
  • Server Rendering

Resources

  • Accessibility
  • Browser Support
  • Contributing
  • Patterns ProPatterns require access to Web Awesome Pro
  • Migrating from Shoelace
  • Visual Tests
  • Changelog
  • Help & Support

Theming & Utilities

  • Overview
  • Built-in Themes
  • Color Palettes
  • Design Tokens
  • Customizing & Theming
  • CSS Utilities

ViUR Components

  • Alert
  • Combobox
  • Pagination
  • Table Wrapper

Actions

  • Button
  • Button Group
  • Copy Button
  • Dropdown
    • Dropdown Item

Forms

  • Checkbox
  • Checkbox Group
  • Color Picker
  • Input
  • Known Date
  • Number Input
  • Radio Group
    • Radio
  • Rating
  • Select
    • Option
  • Slider
  • Switch
  • Textarea
  • Time Input
  • Data Grid Planned A Web Awesome Kickstarter stretch goal!

Layout

  • Accordion
    • Accordion Item
  • Card
  • Details
  • Dialog
  • Divider
  • Drawer
  • Page
  • Scroller
  • Split Panel

Navigation

  • Breadcrumb
    • Breadcrumb Item
  • Tab Group
    • Tab
    • Tab Panel
  • Tree
    • Tree Item

Feedback

  • Badge
  • Callout
  • Progress Bar
  • Progress Ring
  • Skeleton
  • Spinner
  • Tag
  • Tooltip

Media

  • Animated Image
  • Avatar
  • Carousel
    • Carousel Item
  • Comparison
  • Icon
  • Markdown
  • QR Code
  • Zoomable Frame

Data Viz

  • Advanced Usage

Helpers

  • Animation
  • Format Bytes
  • Format Date
  • Format Number
  • Include
  • Intersection Observer
  • Mutation Observer
  • Popover
  • Popup
  • Random Content
  • Relative Time
  • Resize Observer

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.

DefaultBrightShoelace Rudimentary ProThis palette requires access to Web Awesome Pro Elegant ProThis palette requires access to Web Awesome Pro Mild ProThis palette requires access to Web Awesome Pro Natural ProThis palette requires access to Web Awesome Pro Anodized ProThis palette requires access to Web Awesome Pro Vogue ProThis palette requires access to Web Awesome Pro
Red
--wa-color-red-*
95
90
80
70
60
50
40
30
20
10
05
Orange
--wa-color-orange-*
95
90
80
70
60
50
40
30
20
10
05
Yellow
--wa-color-yellow-*
95
90
80
70
60
50
40
30
20
10
05
Green
--wa-color-green-*
95
90
80
70
60
50
40
30
20
10
05
Cyan
--wa-color-cyan-*
95
90
80
70
60
50
40
30
20
10
05
Blue
--wa-color-blue-*
95
90
80
70
60
50
40
30
20
10
05
Indigo
--wa-color-indigo-*
95
90
80
70
60
50
40
30
20
10
05
Purple
--wa-color-purple-*
95
90
80
70
60
50
40
30
20
10
05
Pink
--wa-color-pink-*
95
90
80
70
60
50
40
30
20
10
05
Gray
--wa-color-gray-*
95
90
80
70
60
50
40
30
20
10
05
Unlock every color palette with Web Awesome Pro! Subscribing to Web Awesome Pro unlocks every color palette, plus premium themes, the visual Theme Builder, and more.
Get Web Awesome Pro

Using This Palette

Link to This Section
CDN npm Self-Hosted Hosted Projects

To use this palette, add the palette's stylesheet from the CDN:

<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/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 Settings.
2 Find Color Palette. Select Default.
3 Save your theme to immediately update anywhere you're using your project.

Pro Workspace Projects

Step Action
1 Go 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.
CDN npm Self-Hosted Hosted Projects

To use this palette, add the palette's stylesheet from the CDN:

<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/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 Settings.
2 Find Color Palette. Select Bright.
3 Save your theme to immediately update anywhere you're using your project.

Pro Workspace Projects

Step Action
1 Go to your project's Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Bright.
4 Save your theme to immediately update anywhere you're using your project.
CDN npm Self-Hosted Hosted Projects

To use this palette, add the palette's stylesheet from the CDN:

<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/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 Settings.
2 Find Color Palette. Select Shoelace.
3 Save your theme to immediately update anywhere you're using your project.

Pro Workspace Projects

Step Action
1 Go to your project's Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Shoelace.
4 Save your theme to immediately update anywhere you're using your project.
CDN npm Self-Hosted Hosted Projects This palette can only be used with a Pro subscription.

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 Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Rudimentary.
4 Save your theme to immediately update anywhere you're using your project.
CDN npm Self-Hosted Hosted Projects This palette can only be used with a Pro subscription.

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 Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Elegant.
4 Save your theme to immediately update anywhere you're using your project.
CDN npm Self-Hosted Hosted Projects This palette can only be used with a Pro subscription.

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 Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Mild.
4 Save your theme to immediately update anywhere you're using your project.
CDN npm Self-Hosted Hosted Projects This palette can only be used with a Pro subscription.

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 Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Natural.
4 Save your theme to immediately update anywhere you're using your project.
CDN npm Self-Hosted Hosted Projects This palette can only be used with a Pro subscription.

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 Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Anodized.
4 Save your theme to immediately update anywhere you're using your project.
CDN npm Self-Hosted Hosted Projects This palette can only be used with a Pro subscription.

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 Settings.
2 Press Edit Your Theme to open the Theme Builder.
3 Open Colors and select Vogue.
4 Save your theme to immediately update anywhere you're using your project.

Styling with Palette Colors

Link to This Section

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.
Go Make Something Awesome
Version 0.17.0 © Fonticons, Inc.
  • Terms
  • Privacy
  • Refunds
  • Core License
  • Pro License

Quick Links

  • Components
  • CSS Utilities
  • Theming
  • Using with AI
  • Changelog
  • Help & Support

Recent Searches

    D'oh! No results for “”

    Suggest on GitHub Ask on Discord
    Navigate Select
    Close Esc