Chromafy Docs

Setting Up Class Names & CSS Variables

This page explains the setup required to get started with Chromafy. Chromafy offers two powerful methods for applying color palettes to your website: class names and CSS variables.

Using Class Names

These structured class names allow Chromafy to apply the palette colors to approriate elements using CSS properties.

The class name can be divided into the following parts, in order, separated by a hyphen - :

Prefix (fg/bg): This keyword indicates whether the class targets the color property / foreground (fg) or background color property (bg) of an element.
It can have one of two values: fg or bg.

Infix (chroma): This keyword signifies that the class applies a color from your Chromafy palette.
It has a fixed value: chroma.

Suffix (color type): This keyword specifies the type of color from your palette.
It can take one of the following 5 values: text , background , primary , secondary or accent.

Suffix 2 (opacity) (optional): This keyword allows you to define the opacity level of the color. It is a number ranging from 5 to 95 in increments of 5, representing percentages (e.g., 50 for 50% opacity).
It is OPTIONAL and can take one of 19 numerical values: a multiple of 5, minimum 5 and maximum 95

Example Class Names:
class = "fg-chroma-primary"
Applies the primary color from your palette to the foreground text (CSS color property) of an element.

class = "bg-chroma-secondary-25"
Applies the secondary color from your palette with 25% opacity to the background (CSS background-color property) of an element.

Using CSS variables

These structured CSS variables allow you to use your palette colors as Chromafy's CSS variables, giving rise to more flexibility.

The CSS variable name can be divided into the following parts, in order, separated by a hyphen - :

Prefix (chroma): This keyword signifies that the class applies a color from your Chromafy palette.
It has a fixed value: chroma.

Suffix (color type): This keyword specifies the type of color from your palette.
It can take one of the following 5 values: text , background , primary , secondary or accent.

Examples using CSS variables:
Using a Chromafy CSS variable is same as using any other CSS variable, append two hyphens -- as the prefix to your variable name, and use the var() function and pass the variable name:

<css-selector>{
  background-color: var(--chroma-primary-75, #fff);
}

You might've noticed that there is a default value, #fff in this case, which is recommended to keep your UI uniform when the variables are not defined at any point of time, this can happen when the Chromafy extension is OFF.
You need not worry about defining these variables as Chromafy will take care of that while the extension is ON and when you export the CSS code.

You can refer to this list to look at all the possible class names and css variables

Applying Your Color Palette

text colors are used for majority of your website's textual content.

background colors are used for your website's main background, and other texts where more contrast is needed instead of the usual text color.
eg: a cta button with classes bg-chroma-primary and fg-chroma-background

primary colors are mainly used as background color for your website's important components, like main CTAs, buttons, cards, sections. They are generally more prominent to attract user attention.

secondary colors are used as supporting colors. They can be used as background colors for your website's lesser important components, like less important buttons, cards, sections. Variations with Shades/Opacities of this color often works well. It is helpful in balancing the UI without overwhelming other colors.
eg: a card with class bg-chroma-secondary-20

accent colors are used on other elements like svgs, images, hyperlinks, etc. It is an additional color that can be a part of a brand's identity.