Background Color
Classes
| Class | Properties |
|---|---|
| .bg-white | background-color: #fff; |
| .bg-black | background-color: #000; |
| .bg-transparent | background-color: transparent; |
| .bg-gray-{1-9} | background-color: {hsl value}; |
| .bg-{name}-{1-9} | background-color: {hsl value}; |
Colors
xxxxxxxxxx1
<div class="bg-white border-1 p-4"></div>2
<div class="bg-black p-4"></div>3
<div class="bg-transparent border-1 p-4"></div>4
<div class="bg-gray-5 p-4"></div>5
<div class="bg-red-5 p-4"></div>6
<div class="bg-orange-5 p-4"></div>7
<div class="bg-yellow-5 p-4"></div>8
<div class="bg-green-5 p-4"></div>9
<div class="bg-cyan-5 p-4"></div>10
<div class="bg-blue-5 p-4"></div>11
<div class="bg-purple-5 p-4"></div>12
<div class="bg-pink-5 p-4"></div>See the colors section for more information about colors.
Lightness
xxxxxxxxxx1
<div class="bg-purple-1 p-4"></div>2
<div class="bg-purple-2 p-4"></div>3
<div class="bg-purple-3 p-4"></div>4
<div class="bg-purple-4 p-4"></div>5
<div class="bg-purple-5 p-4"></div>6
<div class="bg-purple-6 p-4"></div>7
<div class="bg-purple-7 p-4"></div>8
<div class="bg-purple-8 p-4"></div>9
<div class="bg-purple-9 p-4"></div>Opacity/Alpha
xxxxxxxxxx1
<div class='bg-png'>2
<div class="bg-opacity-0 bg-purple-5 p-4"></div>3
<div class="bg-opacity-1 bg-purple-5 p-4"></div>4
<div class="bg-opacity-2 bg-purple-5 p-4"></div>5
<div class="bg-opacity-3 bg-purple-5 p-4"></div>6
<div class="bg-opacity-4 bg-purple-5 p-4"></div>7
<div class="bg-opacity-5 bg-purple-5 p-4"></div>8
<div class="bg-opacity-6 bg-purple-5 p-4"></div>9
<div class="bg-opacity-7 bg-purple-5 p-4"></div>10
<div class="bg-opacity-8 bg-purple-5 p-4"></div>11
<div class="bg-opacity-9 bg-purple-5 p-4"></div>12
<div class="bg-opacity-10 bg-purple-5 p-4"></div>13
</div>