Colors

Webpixels CSS includes an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.


Overview

The source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.

  • $colors lists all our available colors
  • $theme-colors lists all semantically named theme colors (shown below)
  • $grays lists all tints and shades of gray

Color palette

All the colors are available as Sass variables and a Sass map in the variables file. We use them to create a subset of these colors for a theme palette for easier usage. It allows you to remain consistent.

Available colors

We manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., $indigo-500) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s mix() color function.

Blue
100
200
300
400
500
600
700
800
900
Indigo
100
200
300
400
500
600
700
800
900
Purple
100
200
300
400
500
600
700
800
900
Pink
100
200
300
400
500
600
700
800
900
Pink
100
200
300
400
500
600
700
800
900
Red
100
200
300
400
500
600
700
800
900
Orange
100
200
300
400
500
600
700
800
900
Yellow
100
200
300
400
500
600
700
800
900
Green
100
200
300
400
500
600
700
800
900
Teal
100
200
300
400
500
600
700
800
900
Cyan
100
200
300
400
500
600
700
800
900

Changing default values

When you do need to customize your palette, you can configure your base colors which will automatically create a complete suite of colors. Be sure to monitor contrast ratios as you customize colors.

All variables in the $colors map are defined as standalone variables. To modify an existing color in our $colors map, add the following to your custom Sass file:

$blue:    #3b6eff;
$indigo:  #6366F1;
$purple:  #5F1F7A;
$pink:    #FF92AE;
$red:     #F16063;
$orange:  #F7936F;
$yellow:  #fdb813;
$green:   #66CB9F;
$teal:    #4DD9CB;
$cyan:    #68DBF2;

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables. This enables more comprehensive customization and extension for any project.

Available theme colors

primary
secondary
tertiary
success
warning
info
danger

Changing theme colors

Since now we have a pre-defined color palette it is easy to change the default theme colors just by swaping the default value. You can use the variable below for customization.

$primary:       $indigo;
$secondary:     $gray-300;
$tertiary:      $pink;
$neutral:       $white;
$success:       $green;
$info:          $cyan;
$warning:       $orange;
$danger:        $red;
$light:         $gray-200;
$dark:          $gray-900;

Gray colors

Available gray colors

Each gray color has a specific use in our themes. Some of them are used for backgrounds, some of them are used for component properties or text colors.

50 bg-gray-50
100 bg-gray-100
200 bg-gray-200
300 bg-gray-300
400 bg-gray-400
500 bg-gray-500
600 bg-gray-600
700 bg-gray-700
800 bg-gray-800
900 bg-gray-900

How to use gray colors

Each gray shade was specially created to be used in certain situations. The table below will give you an idea of how we use them:

Color Usage
Gray 50
Alternate backgrounds
Gray 100
Base backgrounds
Gray 200
Base backgrounds
Gray 300
Base backgrounds
Gray 400
Base backgrounds
Gray 500
Disabled text
Gray 600
Placeholder and muted text
Gray 700
Base text colors
Gray 800
Alternate text color
Gray 900
Text color used on heading, titles

Changing gray colors

Inside the variables file you will find the pre-defined gray colors and Sass map. Here’s an example of the variables used:

$gray-50:  #FAFAFA;
$gray-100: #F7FAFC;
$gray-200: #EDF2F7;
$gray-300: #E2E8F0;
$gray-400: #CBD5E0;
$gray-500: #A0AEC0;
$gray-600: #718096;
$gray-700: #425466;
$gray-800: #2D3748;
$gray-900: #1A202C;

Using colors

There's wide range of shorthand responsive color, background, and border utility classes to modify an element’s appearance.

Text Colors

Convey meaning through color with a handful of color utility classes.

Background Color

Convey meaning through background-color and add decoration with gradients.

Border Color

Use border utilities to quickly style the border and border-radius of an element.

Gradients

Utilities for generating beautiful gradients in your HTML.