Colors
Twigwind supports lots of predefined colors like.
Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Aqua
Teal
Green
Light Green
Lime
Sand
Khaki
Yellow
Amber
Orange
Deep Orange
Blue Gray
Brown
White
Light Gray
Gray
Dark Gray
Black
Pale Red
Pale Yellow
Pale Green
Pale Blue
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
DarkOrange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
FireBrick
Wheat
For twigwind 3.47 and above, twigwind features a powerful RGB array-based color system with numbered variants for precise color control. Each color family includes 10 variants (0-9) from darkest to lightest.
🎨 Core Color Families
Each color family provides 10 variants for maximum flexibility
Red Family
red-0
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
Blue Family
blue-0
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
Green Family
green-0
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
and so on...
Red
rgb(255, 0, 0)
Orange
rgb(255, 127, 0)
Yellow
rgb(255, 255, 0)
Lime
rgb(127, 255, 0)
Green
rgb(0, 255, 0)
Spring
rgb(0, 255, 127)
Cyan
rgb(0, 255, 255)
Blue
rgb(0, 0, 255)
Indigo
rgb(75, 0, 130)
Violet
rgb(148, 0, 211)
Grey
rgb(10, 10, 10)
🎯 Basic Usage
Use color names with the color- or bg- prefix
Text Colors
<p class="color-red">Default red text (red-5)</p>
<p class="color-red-3">Dark red text (red-3)</p>
<p class="color-blue-7">Light blue text (blue-7)</p>
<p class="color-green-2">Dark green text (green-2)</p>Default red text (red-5)
Dark red text (red-3)
Light blue text (blue-7)
Dark green text (green-2)
Background Colors
<div class="bg-blue color-white">Default blue background</div>
<div class="bg-blue-2 color-white">Dark blue background</div>
<div class="bg-green-8 color-green-2">Light green with dark text</div>
<div class="bg-cyan-6 color-cyan-1">Cyan theme</div>Default blue background
Dark blue background
Light green with dark text
Cyan theme
🌈 Advanced Gradients
Create beautiful gradients using numbered color variants
🎨 Arbitrary Colors
Twigwind also supports custom colors using standard CSS color formats
Custom Color Formats
<p class="color-rgb(252, 24, 8)">RGB color</p>
<p class="color-#ff6b35">Hex color</p>
<p class="color-rgba(252, 0, 130, 0.7)">Transparent color</p>
<p class="color-hsl(210, 100%, 50%)">HSL color</p>RGB color
Hex color
Transparent color
HSL color
Custom Background Colors
<div class="bg-rgb(45, 55, 72) color-white">Custom RGB background</div>
<div class="bg-#2d3748 color-#e2e8f0">Hex background</div>
<div class="bg-rgba(66, 153, 225, 0.1) color-blue-2">Transparent background</div>Custom RGB background
Hex background
Transparent background
💡 Pro Tips
- Default Variants: Using just the color name (e.g.,
red) defaults to variant 5 (middle value) - Dark Variants: Use variants 0-3 for dark themes and deep colors
- Light Variants: Use variants 7-9 for light themes and subtle backgrounds
- Contrast: Pair dark variants with light variants for optimal readability
- Gradients: Mix different variants of the same color for smooth gradients
- Accessibility: Always test color combinations for sufficient contrast
🔧 Color System Reference
Available Color Families
red- Red color family (10 variants)orange- Orange color family (10 variants)yellow- Yellow color family (10 variants)lime- Lime color family (10 variants)green- Green color family (10 variants)spring- Spring green color family (10 variants)cyan- Cyan color family (10 variants)blue- Blue color family (10 variants)indigo- Indigo color family (10 variants)violet- Violet color family (10 variants)grey- Grey color family (10 variants)