Color system

Overview

Custom color system - a set of CSS classes and SCSS variables that allow to change colors on-the-fly directly in markup by changing class name or use color tints and shades in SCSS code. Color system includes 11 color palettes: 6 contextual (primary, secondary, danger, success, warning and info) and 5 secondary colors. The system is fully controlled by variable maps in _variables-core.scss and is a part of Bootstrap core since version 3.0.

The color system is supported by almost all layout elements and components: sidebar, navbar, content panels, links, text, icons, alerts, dropdown menus, form components, tables, tabs, progress bars, buttons, notifications, popovers, tooltips, badges etc. The system consists of 11 color palettes, each palette includes 1 main color (e.g. .bg-danger) in both HEX and RGB formats, color classes also support alpha transparency that can be set via .bg-opacity-[0|10|20|25|50|75] classes. List fo colors can be easily extended by adding or removing properties in $theme-colors and $dark-theme-colors SASS maps in _variables-core.scss file.

Available color palettes:

• Primary palette
• Secondary palette
• Danger palette
• Success palette
• Warning palette
• Info palette
• Pink palette
• Purple palette
• Indigo palette
• Teal palette
• Yellow palette

When you add a new color to $theme-colors or $dark-theme-colors SASS maps in _variables-core.scss file, template configuration automatically creates a CSS variable for this color in HEX and RGB format and adds it to the root level.

										
											// SCSS input
											$theme-colors: (
												"indigo-100": $indigo-100,
												...
											);

											// CSS output
											:root,
											[data-color-theme=light] {
												--indigo-100: #eff0f9;
												--indigo-100-rgb: 239,240,249;
												...
											}
										
									

Basic usage

Usage is very simple, all you need to do is to add one of the color CSS classes to the element. Limitless template includes a bunch of pages with demonstration of how color palette is used - in components, elements and layout parts. Depending on what part of element you want to change, available classes are (primary palette is an example):

Colors

Color system uses custom color palette generated from 1 primary color (e.g. $blue-500) using SASS color functions: tint-color() for lighter color and shade-color() for lighter colors. Lightness and darkness step varies from 20% to 30%. Colored blocks below demonstrate all color codes and variables used in the template:

SCSS and CSS

In version 3.0 color system is embedded in the core scss and no longer has separate files: _colors.scss and _palette.scss. Now all color variables are located in _variables-core.scss file in each layout and theme.

The code contains a set of 9 variables per each color and each color shade is generated dynamically from 1 main color HEX value. This means if you want to change e.g. primary color, you need to update only 1 variable and re-compile SCSS files, the system will generate all additional colors on-the-fly. You can find all color variables in _variables-core.scss file. This is how it works:

										
											// Define primary colors in HEX format
											$blue:    #0c83ff;
											$indigo:  #5C6BC0;
											$purple:  #8e70c1;
											$pink:    #f35c86;
											$red:     #EF4444;
											$orange:  #f58646;
											$yellow:  #ffd648;
											$green:   #059669;
											$teal:    #26A69A;
											$cyan:    #049aad;
											$slate:   #247297;

											// Blue color palette
											$blue-100: tint-color($blue, 90%);
											$blue-200: tint-color($blue, 60%);
											$blue-300: tint-color($blue, 40%);
											$blue-400: tint-color($blue, 20%);
											$blue-500: $blue;
											$blue-600: shade-color($blue, 20%);
											$blue-700: shade-color($blue, 40%);
											$blue-800: shade-color($blue, 60%);
											$blue-900: shade-color($blue, 90%);

											// Indigo color palette
											$indigo-100: tint-color($indigo, 90%);
											$indigo-200: tint-color($indigo, 60%);
											$indigo-300: tint-color($indigo, 40%);
											$indigo-400: tint-color($indigo, 20%);
											$indigo-500: $indigo;
											$indigo-600: shade-color($indigo, 20%);
											$indigo-700: shade-color($indigo, 40%);
											$indigo-800: shade-color($indigo, 60%);
											$indigo-900: shade-color($indigo, 90%);

											[...]


											// Light theme colors
											$theme-colors: (
											    "indigo":     $indigo,
											    "purple":     $purple,
											    "pink":       $pink,
											    "teal":       $teal,
											    "yellow":     $yellow,
											    "primary":    $primary,
											    "secondary":  $secondary,
											    "success":    $success,
											    "info":       $info,
											    "warning":    $warning,
											    "danger":     $danger,
											    "light":      $light,
											    "dark":       $dark,
											    "black":      $black,
											    "white":      $white
											);

											// Dark theme colors
											$dark-theme-colors: (
											  "indigo":     $indigo-300,
											  "purple":     $purple-300,
											  "pink":       $pink-300,
											  "teal":     $teal-300,
											  "yellow":     $yellow-300,
											  "primary":    $blue-300,
											  "secondary":  $slate-300,
											  "success":    $green-300,
											  "info":       $cyan-300,
											  "warning":    $orange-300,
											  "danger":     $red-300,
											  "light":      $gray-500,
											  "dark":       $gray-100
											);

										
									

As you can see in this example, property is a color class name and value is a color variable. If you add a new line to $theme-colors maps with "teal-400": $teal-400 values, the system will generate a set of classes with *-400 suffix: .bg-teal-400, .alert-teal-400, .text-teal-400, .link-teal-400, .btn-teal-400 etc. Same logic works the other way around as well. It will also generate a set of global CSS variables with the same name.

Please note - solid background colors now require combination with text color utility classes, e.g.<div class="bg-primary text-white"> or <div class="bg-primary bg-opacity-10 text-primary">.