#f2dfd7
click to copy
#fef9ff
click to copy
#d4c1ec
click to copy
#9f9fed
click to copy
#736ced
click to copy
Christmas · 5 Colors
f2dfd7-fef9ff-d4c1ec-9f9fed-736ced
Color Information
Click any swatch to copy
Tools
Explore, check accessibility, build gradients, and export
Test each palette color against a background for WCAG accessibility compliance.
Quick presets:
WCAG 2.1 Legend
AAA
Ratio ≥ 7:1 — Enhanced (best)
AA
Ratio ≥ 4.5:1 — Normal text
AA Large
Ratio ≥ 3:1 — Large text / UI
Fail
Ratio < 3:1 — Not accessible
Color harmonies generated from the primary hue of your palette. Click any swatch to copy.
Lighter tints (top) and darker shades (bottom) for each palette color. Click any to copy.
Build CSS gradients from your palette colors. Mix direction and type.
From color
To color
135°
background: linear-gradient(135deg, #ffaf87, #377771);
Mix any two palette colors and explore intermediate steps. Click a step to copy its hex.
Color A
⟷
Color B
Mix steps — click any to copy
Live preview of your palette applied to real UI components.
JSON
Machine-readable format for any project
CSS Variables
Ready-to-use :root custom properties
SCSS Variables
Sass variable map for your stylesheet
Tailwind Config
Extend your tailwind.config.js colors
PNG Swatch
High-res 1000×200 palette image
SVG
Scalable vector palette graphic
Copy Tailwind
One-click copy to clipboard
Figma Values
Copy RGB 0–1 values for Figma
Code Snippets