#0a2463
click to copy
#3e92cc
click to copy
#fffaff
click to copy
#d8315b
click to copy
#1e1b18
click to copy
Earth · 5 Colors
0a2463-3e92cc-fffaff-d8315b-1e1b18
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