Webpixels CSS includes an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
The source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
$colorslists all our available colors
$theme-colorslists all semantically named theme colors (shown below)
$grayslists all tints and shades of gray
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.
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.
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;
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
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;
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.
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:
|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;
There's wide range of shorthand responsive color, background, and border utility classes to modify an element’s appearance.
Convey meaning through color with a handful of color utility classes.
Convey meaning through background-color and add decoration with gradients.
Use border utilities to quickly style the border and border-radius of an element.
Utilities for generating beautiful gradients in your HTML.