Colors

Utilities for colors.

Mojo provides pre-defined colors with limitless tints and shades that can be utilized for every CSS color property. learn more in Color System

Pre-Defined values

Here's a list of predefined values that work for all color utilities:

Background Color

Using bg-c-[*] or bg-c-[*]:[shade|tint], you can control the color of an element's background.

Background Alpha

Using bg-c-[*][alpha], you can control the alpha channel (transparency) of an element's background color. The alpha value should fall within a range of 1 to 100.

Text Color

Using text-c-[*] or text-c-[*]:[shade|tint], you can control the color of an element's text.

Text Alpha

Using text-c-[*][alpha], you can control the alpha channel (transparency) of an element's text color. The alpha value should fall within a range of 1 to 100.

Border Color

Using border-c-[*] or border-c-[*]:[shade|tint], you can control the color of an element's border.

Border Alpha

Using border-c-[*][alpha], you can control the alpha channel (transparency) of an element's border color. The alpha value should fall within a range of 1 to 100.

Side Colors

Using border-[side]-c-[*], you can set the border color for one side of an element.

Outline Color

Using outline-c-[*] or outline-c-[*]:[shade|tint], you can control the color of an element's border.

Outline Alpha

Using outline-c-[*][alpha], you can control the alpha channel (transparency) of an element's outline color. The alpha value should fall within a range of 1 to 100.

Shadow Color

Using shadow-c-[*] or shadow-c-[*]:[shade|tint], you can control the color of an element's box-shadow.

Shadow Alpha

Using shadow-c-[*][alpha], you can control the alpha channel (transparency) of an element's shadow color. The alpha value should fall within a range of 1 to 100.

Fill Color

Using fill-c-[*] or fill-c-[*]:[shade|tint], you can control the fill color of an SVG.

Fill Alpha

Using fill-c-[*][alpha], you can control the alpha channel (transparency) of an SVG's fill color. The alpha value should fall within a range of 1 to 100.

Stroke Color

Using stroke-c-[*] or stroke-c-[*]:[shade|tint], you can control the stroke color of an SVG.

Stroke Alpha

Using stroke-c-[*][alpha], you can control the alpha channel (transparency) of an SVG's stroke color. The alpha value should fall within a range of 1 to 100.

Accent Color

Using accent-c-[*] or accent-c-[*]:[shade|tint], you can control the accent color of an element's box-shadow. This utility enables developers to customize the look of elements like checkboxes and radio groups by replacing the browser's default color.

Accent Alpha

Using accent-c-[*][alpha], you can control the alpha channel (transparency) of an element's accent color. The alpha value should fall within a range of 1 to 100.

Caret Color

Using caret-c-[*] or caret-c-[*]:[shade|tint], you can control the color of text input cursor.

Caret Alpha

Using caret-c-[*][alpha], you can control the alpha channel (transparency) of an input's text input cursor color. The alpha value should fall within a range of 1 to 100.

Placeholder Color

Using placeholder-c-[*] or placeholder-c-[*]:[shade|tint], you can control the text color of an input's placeholder.

Placeholder Alpha

Using placeholder-c-[*][alpha], you can control the alpha channel (transparency) of an input's placeholder text color. The alpha value should fall within a range of 1 to 100.

Gradient Colors

In order to give an element a gradient background color, it is necessary to begin with the bg-gradient utility before proceeding to the color stops utilities.

<div class="-- bg-gradient ** ...">
    <!-- ... -->
</div>

Then, you must specify both the start and end color stops. Adding of a middle color stop is up to you.

<div class="bg-gradient -- start-c-blue ** mid-c-red -- end-c-green **">
    <!-- ... -->
</div>

Start Color

Using start-c-[*] or start-c-[*]:[shade|tint], you can control the gradient's starting color stop.

Middle Color

Using mid-c-[*] or mid-c-[*]:[shade|tint], you can control the gradient's middle color stop.

End Color

Using end-c-[*] or end-c-[*]:[shade|tint], you can control the gradient's ending color stop.

Gradient Direction

Using gd-dir-[*], you can change the direction of gradient.