#0b132b
click to copy
#1c2541
click to copy
#3a506b
click to copy
#5bc0be
click to copy
#ffffff
click to copy
Christmas · 5 Colors
0b132b-1c2541-3a506b-5bc0be-ffffff
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