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


Progress value is 30%


Control the color of your text elements using the color utility classes.

🔍 On this page:

  1. Color
  2. Color Opacity
  3. Color Gradients

Color Contrast Scale #

Class Description
.color-inherit color: inherit;
.color-bg color: var(--color-bg);
.color-contrast-lower color: var(--color-contrast-lower);
.color-contrast-low color: var(--color-contrast-low);
.color-contrast-medium color: var(--color-contrast-medium);
.color-contrast-high color: var(--color-contrast-high);
.color-contrast-higher color: var(--color-contrast-higher);

Color Primary #

Class Description
.color-primary-darker color: var(--color-primary-darker);
.color-primary-dark color: var(--color-primary-dark);
.color-primary color: var(--color-primary);
.color-primary-light color: var(--color-primary-light);
.color-primary-lighter color: var(--color-primary-lighter);

Color Accent #

Class Description
.color-accent-darker color: var(--color-accent-darker);
.color-accent-dark color: var(--color-accent-dark);
.color-accent color: var(--color-accent);
.color-accent-light color: var(--color-accent-light);
.color-accent-lighter color: var(--color-accent-lighter);

Feedback Colors #

Class Description
.color-success-darker color: var(--color-success-darker);
.color-success-dark color: var(--color-success-dark);
.color-success color: var(--color-success);
.color-success-light color: var(--color-success-light);
.color-success-lighter color: var(--color-success-lighter);
.color-warning-darker color: var(--color-warning-darker);
.color-warning-dark color: var(--color-warning-dark);
.color-warning color: var(--color-warning);
.color-warning-light color: var(--color-warning-light);
.color-warning-lighter color: var(--color-warning-lighter);
.color-error-darker color: var(--color-error-darker);
.color-error-dark color: var(--color-error-dark);
.color-error color: var(--color-error);
.color-error-light color: var(--color-error-light);
.color-error-lighter color: var(--color-error-lighter);

Black & White #

Class Description
.color-white color: var(--color-white);
.color-black color: var(--color-black);

Color Opacity #

If you use a color utility class, you can modify the color opacity using one of the following classes:

Class Description
.color-opacity-0 color opacity 0%
.color-opacity-10% color opacity 10%
.color-opacity-20% color opacity 20%
.color-opacity-30% color opacity 30%
.color-opacity-40% color opacity 40%
.color-opacity-50% color opacity 50%
.color-opacity-60% color opacity 60%
.color-opacity-70% color opacity 70%
.color-opacity-80% color opacity 80%
.color-opacity-90% color opacity 90%


<p class="color-primary color-opacity-50%">Lorem ipsum dolor.</p>

How to create custom color opacity classes:

.color-opacity-075\% {
  --color-o: 0.075;

.color-opacity-15\% {
  --color-o: 0.15;

Color Gradients #

If you've created one or more gradients using the Color Editor, the (connected) Typography Editor will generate a collection of color utility classes based on the gradient's name.

For example, if you create a --gradient-primary color, you'll get the following classes:

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>

✅ Project duplicated

✅ Project created

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