Unleash your potential

Go one step further with our solutions for creating an intuitive, personalized experience.

Log In
Alpha
Docs Creations Contact
Docs / web / color

Color

Compose and manage your identity with different colors.

Initializing the component.

Use the following classes to change the text color: text_primary, text_accent, text_danger, text_light, text_dark, text_background}.

primary

accent

danger

light

dark

background


color
<p class="text_primary">primary</p>
<p class="text_accent">accent</p>
<p class="text_danger">danger</p>
<p class="text_light">light</p>
<p class="text_dark">dark</p>
<p class="text_background">background</p>

To change the background color of an element, use these: bg_primary, bg_accent, bg_danger, bg_light, bg_background.

primary

accent

danger

light

dark

background


color
<p class="bg_primary">primary</p>
<p class="bg_accent">accent</p>
<p class="bg_danger">danger</p>
<p class="bg_light">light</p>
<p class="bg_dark">dark</p>
<p class="bg_background">background</p>

By adding -invert to some of the above classes, you will automatically apply white or black. This automatic choice will take into account the contrast ratio.
For example, if text_primary is a light color, then you will get black. If it is dark, you will get white (this can be useful when choosing a text color that is on top of another).

Also, the choice of this color is smart and automatic, so you can change the colors in your library without worrying about future contrast ratio issues.

primary invert

accent invert

danger invert

background invert

primary invert

accent invert

danger invert

background invert


color
<p class="text_primary-invert">primary invert</p>
<p class="text_accent-invert">accent invert</p>
<p class="text_danger-invert">danger invert</p>
<p class="text_background-invert">background invert</p>
<p class="bg_primary-invert">primary invert</p>
<p class="bg_accent-invert">accent invert</p>
<p class="bg_danger-invert">danger invert</p>
<p class="bg_background-invert">background invert</p>

You can go even further with color variations using this bg_[C]-[T][V] structure :
-C is one of the previously seen colors: primary, accent or danger.
-T is the type of variation: d for darken or l for lighten.
-V is the intensity value: 10, 20, 30, 40, 50, 60, 70, 80, 90.

Here are a few examples.

primary

primary

primary

danger


color
<p class="bg_primary-d90">primary</p>
<p class="bg_primary-d50">primary</p>
<p class="bg_primary-d30">primary</p>
<p class="bg_danger-l10">danger</p>

You can use bg_[C]-[V] or text_[C]-[V] to manage opacity.

primary

primary

accent

danger


color
<p class="bg_primary-90">primary</p>
<p class="text_primary-50">primary</p>
<p class="bg_accent-30">accent</p>
<p class="text_danger-20">danger</p>

primary

accent

danger

light

dark

background


color
<p class="text_primary">primary</p>
<p class="text_accent">accent</p>
<p class="text_danger">danger</p>
<p class="text_light">light</p>
<p class="text_dark">dark</p>
<p class="text_background">background</p>

primary

accent

danger

light

dark

background


color
<p class="bg_primary">primary</p>
<p class="bg_accent">accent</p>
<p class="bg_danger">danger</p>
<p class="bg_light">light</p>
<p class="bg_dark">dark</p>
<p class="bg_background">background</p>

primary invert

accent invert

danger invert

background invert

primary invert

accent invert

danger invert

background invert


color
<p class="text_primary-invert">primary invert</p>
<p class="text_accent-invert">accent invert</p>
<p class="text_danger-invert">danger invert</p>
<p class="text_background-invert">background invert</p>
<p class="bg_primary-invert">primary invert</p>
<p class="bg_accent-invert">accent invert</p>
<p class="bg_danger-invert">danger invert</p>
<p class="bg_background-invert">background invert</p>

primary

primary

accent

danger


color
<p class="bg_primary-90">primary</p>
<p class="text_primary-50">primary</p>
<p class="bg_accent-30">accent</p>
<p class="text_danger-20">danger</p>
Class Definition
text_primary Add a primary text color.
text_accent Add an accent text color.
text_danger Add a danger text color.
bg_primary Add a primary background-color.
bg_accent Add an accent background-color.
bg_danger Add a danger background-color.
text_primary-invert Add an inverted primary text color.
text_accent-invert Add an inverted accent text color.
text_danger-invert Add an inverted danger text color.
bg_primary-invert Add an inverted primary background-color.
bg_accent-invert Add an inverted accent background-color.
bg_danger-invert Add an inverted danger background-color.
text_primary-d[V] Add a primary dark text color.
text_accent-d[V] Add an accent dark text color.
text_danger-d[V] Add a danger dark text color.
bg_primary-d[V] Add a primary dark background color.
bg_accent-d[V] Add an accent dark background color.
bg_danger-d[V] Add a danger dark background color.
text_primary-l[V] Add a primary light text color.
text_accent-l[V] Add an accent light text color.
text_danger-l[V] Add a danger light text color.
bg_primary-l[V] Add a primary light background color.
bg_accent-l[V] Add an accent light background color.
bg_danger-l[V] Add a danger light background color.
Hello!

Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!

Cookie settings

Important (Can't be disabled)