darki
Color helpers
Change the color of the background, text, and border.
Text color
| Class | Color | Example |
|---|---|---|
text-default | hsl(201, 24%, 84%) | default |
text-primary | hsl(191, 79%, 40%) | primary |
text-secondary | hsl(215, 16%, 47%) | secondary |
text-success | hsl(144, 61%, 36%) | success |
text-danger | hsl(0, 59%, 49%) | danger |
text-info | hsl(201, 98%, 39%) | info |
text-warning | hsl(48, 96%, 40%) | warning |
text-red | hsl(0, 72%, 51%) | red |
text-orange | hsl(24, 95%, 48%) | orange |
text-yellow | hsl(48, 96%, 40%) | yellow |
text-green | hsl(142, 76%, 36%) | green |
text-teal | hsl(173, 84%, 32%) | teal |
text-cyan | hsl(190, 90%, 37%) | cyan |
text-blue | hsl(222, 84%, 53%) | blue |
text-indigo | hsl(243, 75%, 59%) | indigo |
Border color
| Class | Color | Example |
|---|---|---|
border-default | hsl(205, 18%, 19%) | default |
border-primary | hsl(191, 79%, 40%) | primary |
border-secondary | hsl(215, 16%, 47%) | secondary |
border-success | hsl(144, 61%, 36%) | success |
border-danger | hsl(0, 59%, 49%) | danger |
border-info | hsl(201, 98%, 39%) | info |
border-warning | hsl(48, 96%, 40%) | warning |
border-red | hsl(0, 72%, 51%) | red |
border-orange | hsl(24, 95%, 48%) | orange |
border-yellow | hsl(48, 96%, 40%) | yellow |
border-green | hsl(142, 76%, 36%) | green |
border-teal | hsl(173, 84%, 32%) | teal |
border-cyan | hsl(190, 90%, 37%) | cyan |
border-blue | hsl(222, 84%, 53%) | blue |
border-indigo | hsl(243, 75%, 59%) | indigo |
Background color
| Class | Color | Example |
|---|---|---|
bg-primary | hsl(191, 79%, 40%) | primary |
bg-secondary | hsl(215, 16%, 47%) | secondary |
bg-success | hsl(144, 61%, 36%) | success |
bg-danger | hsl(0, 59%, 49%) | danger |
bg-info | hsl(201, 98%, 39%) | info |
bg-warning | hsl(48, 96%, 40%) | warning |
bg-red | hsl(0, 72%, 51%) | red |
bg-orange | hsl(24, 95%, 48%) | orange |
bg-yellow | hsl(48, 96%, 40%) | yellow |
bg-green | hsl(142, 76%, 36%) | green |
bg-teal | hsl(173, 84%, 32%) | teal |
bg-cyan | hsl(190, 90%, 37%) | cyan |
bg-blue | hsl(222, 84%, 53%) | blue |
bg-indigo | hsl(243, 75%, 59%) | indigo |
bg-primary-alt | mix(hsl(191, 79%, 40%), hsl(206, 33%, 9%), 15%) | primary |
bg-secondary-alt | mix(hsl(215, 16%, 47%), hsl(206, 33%, 9%), 15%) | secondary |
bg-success-alt | mix(hsl(144, 61%, 36%), hsl(206, 33%, 9%), 15%) | success |
bg-danger-alt | mix(hsl(0, 59%, 49%), hsl(206, 33%, 9%), 15%) | danger |
bg-info-alt | mix(hsl(201, 98%, 39%), hsl(206, 33%, 9%), 15%) | info |
bg-warning-alt | mix(hsl(48, 96%, 40%), hsl(206, 33%, 9%), 15%) | warning |
bg-red-alt | mix(hsl(0, 72%, 51%), hsl(206, 33%, 9%), 15%) | red |
bg-orange-alt | mix(hsl(24, 95%, 48%), hsl(206, 33%, 9%), 15%) | orange |
bg-yellow-alt | mix(hsl(48, 96%, 40%), hsl(206, 33%, 9%), 15%) | yellow |
bg-green-alt | mix(hsl(142, 76%, 36%), hsl(206, 33%, 9%), 15%) | green |
bg-teal-alt | mix(hsl(173, 84%, 32%), hsl(206, 33%, 9%), 15%) | teal |
bg-cyan-alt | mix(hsl(190, 90%, 37%), hsl(206, 33%, 9%), 15%) | cyan |
bg-blue-alt | mix(hsl(222, 84%, 53%), hsl(206, 33%, 9%), 15%) | blue |
bg-indigo-alt | mix(hsl(243, 75%, 59%), hsl(206, 33%, 9%), 15%) | indigo |