Getting Started
Color Palette
Utilities for sets color to other utilties such as text, background, border, placeholder and dissect.
Amber
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Charcoal
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Copper
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Granite
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Indigo
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Blue
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Lava
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Lime
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Teal
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Tangerine
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Violet
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Onyx
Shade
Tone
Tint
Saturation Enhancement
Contrast Enhancement
75% Transparency
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Color Enhancement
Saturate the gradient with filter utilities. Find more about the usage Saturate, Contrast and Brightness.
<!-- Example `Text Color` -->
<div class="text-shade-teal-4 ... filter saturate-5 filter brightness-2 contrast-2">
...
</div>
HTML
Color Manipulation
<!-- Example `Text Highlight Color` -->
<div class="text-highlight fore-tint-teal-4 rear-tint-teal-1">
...
</div>
<!-- Example `Text Stroke Color` -->
<div class="text-xl-8 text-stroke-4 text-stroke-tint-teal-5">
...
</div>
<!-- Example `Text Neon Shadow Color` -->
<div class="text-shade-teal-2 ... text-neon-shadow start-tint-teal-3 stop-shade-teal-3">
...
</div>
<!-- Example `Text Offset Shadow Color` -->
<div class="text-offset-shadow offset-x-0 offset-y-10 offset-tint-lava-4">
...
</div>
<!-- Example `Box Shadow Color` -->
<div class="shadow-lg-tint-teal-4 ... width-24 height-24">
...
</div>
<!-- Example `Accent Color` -->
<input class="accent-tint-teal-4 ... width-24 height-24" type="checkbox">
<!-- Example `Placeholder Color` -->
<input class="placeholder-tint-lava-1 ..." placeholder="...">
<!-- Example `Background Color` -->
<div class="bg-tint-teal-4 ... width-24 height-24 ... filter saturate-5">
...
</div>
<!-- Example `Dissect Color` -->
<div class="dissect-y-4 dissect-tint-teal-4 ... width-24 height-24">
...
</div>
<!-- Example `Border Color` -->
<div class="border border-tint-teal-4 ... width-24 height-24">
...
</div>
HTML
Color Transparency
Fine tune color transparency by using bg-opacity utilities.
<!-- Example `Background Color` -->
<div class="bg-tint-teal-4 ... width-24 height-24 ... bg-opacity-25">
...
</div>
HTML