English
Spanish
French
German
Italian
Russian
Text Colors
text-gray-600
text-red-600
text-yellow-600
text-green-600
text-blue-600
text-indigo-600
text-purple-600
text-pink-600
Border Colors
border-gray-300
border-red-300
border-yellow-300
border-green-300
border-blue-300
border-indigo-300
Background Colors
.bg-blue-100
.bg-green-100
.bg-yellow-100
.bg-pink-100
Shadow & Tint
.bg-indigo-100 + .shadow-md
.bg-pink-100 + .shadow-lg
Ring Colors
.ring-[color]-400
Hover / Focus State
Color Combinations
.bg-red-100 + .text-red-700
.bg-teal-100 + .text-teal-800
.bg-yellow-100 + .text-yellow-800
Gradient Background
.bg-gradient-to-r from-pink-500 to-yellow-500
Background Colors
bg-gray-100
bg-red-100
bg-yellow-100
bg-green-100
bg-blue-100
bg-indigo-100
Gray
bg-gray-500
100
200
300
400
500
600
700
800
900
Red
bg-red-500
100
200
300
400
500
600
700
800
900
Yellow
bg-yellow-500
100
200
300
400
500
600
700
800
900
Green
bg-green-500
100
200
300
400
500
600
700
800
900
Blue
bg-blue-500
100
200
300
400
500
600
700
800
900
Indigo
bg-indigo-500
100
200
300
400
500
600
700
800
900
Purple
bg-purple-500
100
200
300
400
500
600
700
800
900
Pink
bg-pink-500
100
200
300
400
500
600
700
800
900
Gradient Examples
from-purple-500 to-pink-500
from-blue-500 to-cyan-400
from-green-400 to-emerald-500