🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Colors

The 📁 custom-style/_colors.scss file contains the color palette of your project.


🔍 On this page:

  1. Define Color Variables
  2. Main Colors
  3. Feedback Colors
  4. Color Contrast Scale
  5. Black & White
  6. Gradients
  7. Themes
  8. Color Functions
  9. Colors Visual Editor
  10. Utility Classes

Define Color Variables #

Each color is defined using the defineColorHSL mixin:

:root, [data-theme="default"] {
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
}

Which outputs in CSS:

:root, [data-theme="default"] {
  --color-primary: hsl(220, 90%, 56%);
  --color-primary-h: 220;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
}

This method allows us to combine SASS color functions and CSS Variables.

🚀 Use the Color Editor to create and export a color palette compatible with CodyFrame.

Main Colors #

These are the "Brand" colors, mostly used for interactive elements (e.g., buttons). Each color in this section has 5 color variations (base color + 2 lighter versions + 2 darker versions).

:root, [data-theme="default"] {
  // main
  @include defineColorHSL(--color-primary-darker, 220, 90%, 36%);
  @include defineColorHSL(--color-primary-dark, 220, 90%, 46%);
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
  @include defineColorHSL(--color-primary-light, 220, 90%, 66%);
  @include defineColorHSL(--color-primary-lighter, 220, 90%, 76%);

  @include defineColorHSL(--color-accent-darker, 355, 90%, 41%);
  @include defineColorHSL(--color-accent-dark, 355, 90%, 51%);
  @include defineColorHSL(--color-accent, 355, 90%, 61%);
  @include defineColorHSL(--color-accent-light, 355, 90%, 71%);
  @include defineColorHSL(--color-accent-lighter, 355, 90%, 81%);
}

Feedback Colors #

Feedback colors are used to convey specific meanings like success/error/warning. Each color in this section has 5 color variations (base color + 2 lighter versions + 2 darker versions).

:root, [data-theme="default"] {
  // feedback
  @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
  @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
  @include defineColorHSL(--color-success, 94, 48%, 56%);
  @include defineColorHSL(--color-success-light, 94, 48%, 66%);
  @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

  @include defineColorHSL(--color-error-darker, 355, 90%, 41%);
  @include defineColorHSL(--color-error-dark, 355, 90%, 51%);
  @include defineColorHSL(--color-error, 355, 90%, 61%);
  @include defineColorHSL(--color-error-light, 355, 90%, 71%);
  @include defineColorHSL(--color-error-lighter, 355, 90%, 81%);

  @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
  @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
  @include defineColorHSL(--color-warning, 46, 100%, 61%);
  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
  @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);
}

Color Contrast Scale #

The color contrasts are used to define a scale of neutral colors:

:root, [data-theme="default"] {
  // color contrasts
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
  @include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
  @include defineColorHSL(--color-contrast-medium, 240, 1%, 48%);
  @include defineColorHSL(--color-contrast-high, 240, 4%, 20%);
  @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
}

To create a scale of contrasts you need two starting colors: 1) background color and 2) highest contrast color. You can then generate stop colors in between, using tools like the Color Editor.

While defining the scale, it helps to associate each color to an element of your UI:

  • color-bg → background color of the theme in use
  • color-contrast-lower → low contrast background
  • color-contrast-low → borders
  • color-contrast-medium → text subtle
  • color-contrast-high → text color
  • color-contrast-higher → text heading color

Here's an example of a contrast scale in a theme with a white background:

Black & White #

--color-white and --color-black represent white and black in your color palette:

:root, [data-theme="default"] {
  // black + white
  @include defineColorHSL(--color-black, 240, 8%, 12%);
  @include defineColorHSL(--color-white, 0, 0%, 100%);
}

Unlike the color contrasts, --color-white and --color-black are not affected by the theme in use. More info in the following 'Themes' section.

Gradients #

You can (optionally) create color gradients using the Color Editor. The tool will generate two color stops for each gradient:

:root {
  // gradient primary
  @include defineColorHSL(--gradient-primary-stop-1, 220, 90%, 56%);
  @include defineColorHSL(--gradient-primary-stop-2, 327, 87%, 35%);
}

You can then use the background and color utility classes (always generated by the tool) to apply gradients to your elements:

Background Gradients

Class Description
.bg-gradient-primary radial gradient
.bg-gradient-primary-top linear gradient to top
.bg-gradient-primary-right linear gradient to right
.bg-gradient-primary-bottom linear gradient to bottom
.bg-gradient-primary-left linear gradient to left

Color Gradients

Class Description
.color-gradient-primary-top linear gradient to top
.color-gradient-primary-right linear gradient to right
.color-gradient-primary-bottom linear gradient to bottom
.color-gradient-primary-left linear gradient to left
<h1 class="color-gradient-primary-right">Gradients</h1>

Alternatively, you can use the gradient variables in CSS:

.gradient-bg {
  background-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2));
}

Themes #

A theme is a group of related colors. The 📁 custom-style/_colors.scss file of CodyFrame includes a theme titled 'default'. To create a new theme, copy the default theme and overwrite the values of the CSS variables (or use the Color Editor).

To apply a theme to a component or a group of components, add data-theme="{themeName}":

<div class="component" data-theme="dark">
  <!-- ... -->
</div>

If you properly use the color variables in your components, you can easily switch from a "light" to a "dark" theme.

In the example below, try changing the data-theme value from 'default' to 'dark/soft' in the HTML (the default theme is applied even if you don't specify the theme at all):

Considering the default theme in the example above, using --color-bg will return white. However, if you apply another theme, --color-bg will return a different color. If you want to set a white color that is not affected by the theme (e.g., for the text color of a button), you should use --color-white.

Color Functions #

Use the color functions to modify the opacity and lightness of color variables.

Name Description
alpha(var(--color-name), $opacity) SASS Function. Used to return a color with different opacity value.
lightness(var(--color-name), $lightnessMultiplier) SASS Function. Used to return color with different lightness value.
adjustHSLA(var(--color-name), $hueMultiplier, $saturationMultiplier, $lightnessMultiplier, $opacity) SASS Function. Modify color HSLA values.

Examples:

.component {
  // return color with opacity 0.2
  color: alpha(var(--color-contrast-higher), 0.2);

  // return color with lightness equal to (--color-primary-l*0.9)
  background-color: lightness(var(--color-primary), 0.9);

  // return color with hue equal to (--color-primary-h*0.9)
  border-color: adjustHSLA(var(--color-primary), 0.9, 1, 1, 1);
}

Colors Visual Editor #

The Color Editor generates color palettes and themes compatible with CodyFrame. Copy the generated SCSS and paste it into the 📁 custom-style/_colors.scss file of the framework.

Utility Classes #

For a full list of color utility classes, refer to the Utilities page.

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.