Color Classes
Learn to use colors in the fastest way with Oxygen builder.
To use each color by clicking on a color panel or color palette a hundred times while designing a website is way too time-consuming.
To speedup this process, we have create a set of quick color utility classes in our framework.
Color utility classes:
All our color utility classes are 100% compatible with our OxyMade color system.
List of foreground colors:
For example, to add primary color to the text element, you can simply add the class color-primary to the element. Same way, to add paragraph color, you will add color-paragraph which will add the color: var(--color-paragraph); to the selected element.
- color-primary
- color-dark
- color-paragraph
- color-secondary
- color-tertiary
- color-light
- color-paragraph-alt
List of background color classes
For example, to add primary color to the text element, you can simply add the class color-primary to the element. Same way, to add paragraph color, you will add color-paragraph which will add the color: var(--color-paragraph); to the selected element.
- bg
- bg-tertiary
- bg-secondary
- bg-primary
- bg-alt
- bg-white
- bg-black
- bg-placeholder
- bg-placeholder-alt
List of border color classes
For example, to add primary color to the text element, you can simply add the class color-primary to the element. Same way, to add paragraph color, you will add color-paragraph which will add the color: var(--color-paragraph); to the selected element.
- border-color
- border-color-alt
- border-color-tertiary
- border-color-secondary
- border-color-primary
Apart from all these classes, you can use our colors directly by clicking on the colors icon and open the colors panel and clicking on the color will copy the color code to the clipboard. And pasting it in a color input will paste the color code associated to the color.