Live Preview
Sample Text
The quick brown fox jumps over the lazy dog
Contrast Ratio: 7.92:1
Gradient Preview
✅
AAA (7:1)
Enhanced
✅
AA (4.5:1)
Normal Text
⚠️
AA Large (3:1)
Large Text
Background Color
#6B21A8
bg-purple-800
Text Color
#F3F4F6
text-gray-100
CSS Code
/* CSS */
.my-element {
background-color: #6B21A8;
color: #F3F4F6;
}
/* Example Usage */
<div class="my-element">
Sample Text
</div>
/* Gradient */
.gradient-bg {
background: linear-gradient(90deg, #6B21A8, #F3F4F6);
}Harmonious Color Schemes
#9e52dd
Click to use
#6B21A8
Click to use
#351053
Click to use
#000000
Click to use
Background Color
#6B21A8
Text Color
#F3F4F6
Tailwind Color Palette
Left-click: Background | Right-click: Text
gray
50
100
200
300
400
500
600
700
800
900
purple
50
100
200
300
400
500
600
700
800
900
orange
50
100
200
300
400
500
600
700
800
900
teal
50
100
200
300
400
500
600
700
800
900
green
50
100
200
300
400
500
600
700
800
900
blue
50
100
200
300
400
500
600
700
800
900
pink
50
100
200
300
400
500
600
700
800
900
yellow
50
100
200
300
400
500
600
700
800
900
💡 Quick Tips
- Left Click: Set background
- Right Click: Set text color
- Dark bg (700-900): Light text (50-200)
- Light bg (50-200): Dark text (700-900)
🎨 Color Theory
- Complementary: Opposite colors
- Analogous: Adjacent colors
- Triadic: Evenly spaced
- Monochromatic: Same hue
🎵 Music Player
The music toggle is a UI feature! To add real music, you'd connect it to an audio API like:
- • Spotify Web API
- • YouTube iframe API
- • HTML5 <audio> tag
- • Soundcloud widget
⏸ Click to Toggle UI