--- layout: default permalink: /colors category: utilities title: Color palette description: "Our color palette consists of neutral, white and blue. These colors are used as variants in all classes of eFrolic, that is, as a second class after the main one to personalize elements.

Colors convey meaning and add a bit of emotional weight to the elements." ---

{{ page.title }} Assistants

{{ page.description }}


Use as background

After a main class, example: e-btn apply the desired color in lowercase letters.

Required: A main class of eFrolic.

Warning: Some components are not compatible with all colors.

{% highlight html %} Color
...
{% endhighlight %}


Primary / #1da1f2


Success / #4fd69c


Danger / #f75676


Warning / #ffdd57


Sky / #54c7ec


Purple / #5e72e4

Colors gradient.



Blue-gradient


Inst-gradient


purple-gradient


Green-gradient


Colors between black and white.



Transparent


Default


Gray


White


Dark


Black

Use as text color

Add text- after the color to use.

Warning: Not all colors are available for text.

{% highlight html %} Color

...

...

{% endhighlight %}

text-white

text-gray

text-dark

text-black

text-primary

text-success

text-danger

text-warning

text-sky

text-purple

{% highlight html %}

text-white

text-gray

text-dark

text-black

text-primary

text-success

text-danger

text-warning

text-sky

text-purple

{% endhighlight %}
Using in anchors

text-white

text-gray

text-dark

text-black

text-primary

text-success

text-danger

text-warning

text-sky

text-purple

{% highlight html %}

text-white

text-gray

text-dark

text-black

text-primary

text-success

text-danger

text-warning

text-sky

text-purple

{% endhighlight %}
Using in heading

text-white

text-gray

text-dark

text-danger

text-warning

text-sky

text-purple

text-black

text-primary
text-success
{% highlight html %}

text-white

text-gray

text-dark

text-danger

text-warning

text-sky

text-purple

text-black

text-primary
text-success
{% endhighlight %}
Using in icons

{% highlight html %} {% endhighlight %}