Pastel Palette
Soft pastel tones for gentle interfaces
Color Swatches
#FFB3BArgb(255, 179, 186)
#FFDFBArgb(255, 223, 186)
#FFFFBArgb(255, 255, 186)
#BAFFC9rgb(186, 255, 201)
#BAE1FFrgb(186, 225, 255)
CSS Variables
:root {
--palette-1: #FFB3BA;
--palette-2: #FFDFBA;
--palette-3: #FFFFBA;
--palette-4: #BAFFC9;
--palette-5: #BAE1FF;
}Tailwind Config
theme: {
extend: {
colors: {
palette: {
1: "#FFB3BA",
2: "#FFDFBA",
3: "#FFFFBA",
4: "#BAFFC9",
5: "#BAE1FF",
},
},
},
},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