🎉 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. Background + Contrast scale
  5. Black & White
  6. Gradients
  7. Themes
  8. Color functions
  9. Colors visual editor
  10. Utility classes

Define color variables #

You can create your color palette manually, or use the Color editor.

CodyFrame colors are organized into 5 main categories:

  1. Main
  2. Feedback
  3. Bg + Contrasts
  4. Black + White
  5. Gradients

Each color is defined as an HSL color using the defineColorHSL mixin:

:root {
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
}

Which outputs in CSS:

:root {
  --color-primary: hsl(220, 90%, 56%);
  --color-primary-h: 220;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
}

HSL stands for hue, saturation, and lightness. By generating each HSL value separately, we can combine SASS color functions and CSS Variables.

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 {
  // color primary
  @include defineColorHSL(--color-primary-darker, 250, 84%, 38%);
  @include defineColorHSL(--color-primary-dark, 250, 84%, 46%);
  @include defineColorHSL(--color-primary, 250, 84%, 54%);
  @include defineColorHSL(--color-primary-light, 250, 84%, 60%);
  @include defineColorHSL(--color-primary-lighter, 250, 84%, 67%);
  
  // color secondary
  @include defineColorHSL(--color-accent-darker, 342, 89%, 38%);
  @include defineColorHSL(--color-accent-dark, 342, 89%, 43%);
  @include defineColorHSL(--color-accent, 342, 89%, 48%);
  @include defineColorHSL(--color-accent-light, 342, 89%, 56%);
  @include defineColorHSL(--color-accent-lighter, 342, 89%, 62%);
}

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 {
  // feedback
  @include defineColorHSL(--color-warning-darker, 46, 100%, 47%);
  @include defineColorHSL(--color-warning-dark, 46, 100%, 50%);
  @include defineColorHSL(--color-warning, 46, 100%, 61%);
  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
  @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%);

  @include defineColorHSL(--color-success-darker, 122, 50%, 47%);
  @include defineColorHSL(--color-success-dark, 122, 50%, 52%);
  @include defineColorHSL(--color-success, 122, 50%, 60%);
  @include defineColorHSL(--color-success-light, 122, 50%, 69%);
  @include defineColorHSL(--color-success-lighter, 122, 50%, 76%);

  @include defineColorHSL(--color-error-darker, 342, 89%, 38%);
  @include defineColorHSL(--color-error-dark, 342, 89%, 43%);
  @include defineColorHSL(--color-error, 342, 89%, 48%);
  @include defineColorHSL(--color-error-light, 342, 89%, 56%);
  @include defineColorHSL(--color-error-lighter, 342, 89%, 62%);
}

Background + Contrast scale #

The --color-bg is the background color of the theme in use. E.g., in a light theme, the --color-bg could be white.

The background color variations (base color + 2 lighter versions + 2 darker versions) are used to set the elevation. The elements closer to the 'light source' (higher z-index) should be lighter and with a stronger shadow.

image explaining the elevation levels

In a color contrast scale, the --color-contrast-higher is opposite to the --color-bg. E.g., if your light theme has a white background, the --color-contrast-higher could be a very dark color. In a dark theme, if the --color-bg is a dark grey, the --color-contrast-higher could be white or a very light color.

The other color contrasts (lower, low, medium, and high) are color shades in between the --color-bg and the --color-contrast-higher.

In other words, if --color-bg-{value} is the background, --color-contrast-{value} is the content.

:root, [data-theme="default"] {
  // background
  @include defineColorHSL(--color-bg-darker, 210, 4%, 89%);
  @include defineColorHSL(--color-bg-dark, 180, 3%, 94%);
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-bg-light, 180, 3%, 100%);
  @include defineColorHSL(--color-bg-lighter, 210, 4%, 100%);

  // color contrasts
  @include defineColorHSL(--color-contrast-lower, 180, 1%, 84%);
  @include defineColorHSL(--color-contrast-low, 210, 2%, 64%);
  @include defineColorHSL(--color-contrast-medium, 204, 2%, 46%);
  @include defineColorHSL(--color-contrast-high, 210, 7%, 21%);
  @include defineColorHSL(--color-contrast-higher, 204, 28%, 7%);
}

The Color editor is a great tool that generates a contrast scale starting from the background and the higher contrast colors.

While creating the scale, it helps to associate each color to a UI element:

  • color-contrast-lower → borders
  • color-contrast-low → very subtle text
  • color-contrast-medium → subtle text
  • color-contrast-high → text color
  • color-contrast-higher → text heading color

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 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, border, and color utility classes (generated by the tool) to apply gradients to your elements.

<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, stored in CSS variables. The 'custom-style/_colors.scss' file of CodyFrame includes a 'default' (light) theme and a 'dark' theme.

:root, [data-theme="default"] {
  // main
  @include defineColorHSL(--color-primary-darker, 250, 84%, 38%);
  @include defineColorHSL(--color-primary-dark, 250, 84%, 46%);
  @include defineColorHSL(--color-primary, 250, 84%, 54%);
  @include defineColorHSL(--color-primary-light, 250, 84%, 60%);
  @include defineColorHSL(--color-primary-lighter, 250, 84%, 67%);

  // other colors...
}

[data-theme="dark"] {
  // main
  @include defineColorHSL(--color-primary-darker, 250, 93%, 57%);
  @include defineColorHSL(--color-primary-dark, 250, 93%, 61%);
  @include defineColorHSL(--color-primary, 250, 93%, 65%);
  @include defineColorHSL(--color-primary-light, 250, 93%, 69%);
  @include defineColorHSL(--color-primary-lighter, 250, 93%, 72%);

  // other colors...
}

Once you've defined your themes variables, to apply them to a component - or a group of components, add data-theme="{themeName}":

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

In the example below, try changing the data-theme value from 'default' to 'dark' 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.