Dracula Palette
Popular dark theme editor palette
Color Swatches
#282A36rgb(40, 42, 54)
#44475Argb(68, 71, 90)
#6272A4rgb(98, 114, 164)
#BD93F9rgb(189, 147, 249)
#FF79C6rgb(255, 121, 198)
CSS Variables
:root {
--palette-1: #282A36;
--palette-2: #44475A;
--palette-3: #6272A4;
--palette-4: #BD93F9;
--palette-5: #FF79C6;
}Tailwind Config
theme: {
extend: {
colors: {
palette: {
1: "#282A36",
2: "#44475A",
3: "#6272A4",
4: "#BD93F9",
5: "#FF79C6",
},
},
},
},Usage Suggestions
- • Use as primary/secondary/accent colors in UI components
- • Apply for backgrounds, borders, and text contrast
- • Export to design tools (Figma, Sketch) via hex values
- • Combine with our Color Contrast Checker for accessibility