Pastel Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#A7C7E7oklch(0.817 0.057 248.5)
Secondary
#E7A7C7oklch(0.798 0.085 347.8)
Accent
#C7E7A7oklch(0.889 0.091 129.7)
Live UI Component Preview
Apex Analytics
Team Dashboard
$84,290
14,820
Optimal
Interactive Button & State Styles
Verify clickability, state contrasts, and visual weight across primary and secondary controls.
WCAG 2.1 Contrast Matrix
Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).
| Color Role | Hex | On Pure White (#FFF) | On Dark Obsidian (#0B0F19) | Recommended Usage |
|---|---|---|---|---|
Primary Base | #A7C7E7 | 1.75:1(Fail) | 10.91:1(AAA) | Best on Dark UI / Buttons |
Secondary | #E7A7C7 | 1.95:1(Fail) | 9.80:1(AAA) | Best on Dark UI / Buttons |
Accent | #C7E7A7 | 1.36:1(Fail) | 14.06:1(AAA) | Best on Dark UI / Buttons |
50–950 Tailwind Shade Ramp
Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.
Ready-to-Use Code Snippets
// tailwind.config.js / CSS @theme
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F6F7F9',
100: '#E9EDF1',
200: '#BFD6ED',
300: '#97BDE2',
400: '#679ED5',
500: '#A7C7E7',
600: '#2E6BA8',
700: '#255788',
800: '#1B4064',
900: '#0F2B48',
950: '#091A2A',
},
secondary: '#E7A7C7',
accent: '#C7E7A7',
}
}
}
};12-Tone Pastel Color Wheel Chart & Hex Codes
Click any swatch to copy its HEX code or load it into the interactive wheel.
Pastel Baby Blue
Classic cool baby blue. The bedrock for calm digital SaaS, tech, and healthcare.
Pastel Periwinkle
Soft violet-blue hybrid evoking modern AI interfaces and creative suites.
Pastel Mint
Crisp organic freshness. Ideal for sustainable commerce, wellness, and organic foods.
Pastel Seafoam Aqua
Serene aquatic pastel for modern clinics, dental portals, and spa hospitality.
Pastel Muted Sage
Desaturated botanical green. Popular in Scandinavian interior decor and Notion themes.
Pastel Butter Yellow
Radiant optimistic warmth without glare. Used for educational awards and VIP highlights.
Pastel Peach Apricot
Gentle baked peach warmth. The ultimate high-converting complementary partner to baby blue.
Pastel Blush Coral
Playful, romantic pastel punch for beauty products, lifestyle apps, and bridal registries.
Pastel Lavender
Dreamy floral violet. Widely adopted for developer productivity tools and creative journals.
Pastel Lilac Orchid
Airy whisper of magenta. Perfect for gentle background card washes and tags.
Pastel Light Cloud
Ultra-light pastoral wash providing a soft canvas for cards, modals, and charts.
Pastel Rose Quartz
Modern neo-aesthetic pink with high luminescence for Gen-Z and creator interfaces.
Complementary Pastel Color Wheel Pairs
Opposing 180° pastel pairs that balance cool calming tones with warm gentle accents without clashing.
How to Use Pastel in Digital Product Design
A pastel color wheel is created by infusing traditional 360° hues with high lightness (typically 75% to 88%) and reduced saturation (40% to 65%). Rather than shouting for attention with aggressive primary colors, pastel palettes create calm, breathable environments that reduce visual fatigue and evoke comfort, optimism, and modern Scandinavian minimalism.
✓Recommended UI Applications
Pastels excel as card backgrounds, secondary category pills, gentle banner highlights, and mobile app themes. When building pastel UI palettes, keep the primary surface light, pair with muted complementary pastels for secondary actions, and anchor the interface with deep slate typography.
⚠Accessibility & Contrast Guidelines
Pure pastel hues naturally fail WCAG AA contrast (averaging 1.3:1 to 2.1:1) against pure white text. To achieve AA and AAA accessibility compliance, pastels must be paired with deep charcoal (#1E293B) or dark obsidian (#0F172A) text. For dark mode, use pastels as glowing accent borders against rich dark backgrounds.
Curated UI Pairings for Pastel
Expertly tested color coordinates that harmonize with Pastel without visual clashes.
Complementary Pastel
#FFDFBASoft apricot peach creating balanced warmth against pastel blue.
Pastel Mint Accent
#BFFCC6Triadic fresh mint for secondary tags and status indicators.
Deep Slate Text
#0F172ADark obsidian anchor delivering 11.2:1 AAA contrast on pastel cards.
Pastel Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#A7C7E7
rgb(167, 199, 231)
hsl(210°, 58%, 78%)
oklch(0.817 0.057 248.5)
Frequently Asked Questions About Pastel
What primary role should Pastel take in a digital interface?
A pastel color wheel is created by infusing traditional 360° hues with high lightness (typically 75% to 88%) and reduced saturation (40% to 65%). Rather than shouting for attention with aggressive primary colors, pastel palettes create calm, breathable environments that reduce visual fatigue and evoke comfort, optimism, and modern Scandinavian minimalism. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.
How do I maintain WCAG AA accessibility when using Pastel?
Pure pastel hues naturally fail WCAG AA contrast (averaging 1.3:1 to 2.1:1) against pure white text. To achieve AA and AAA accessibility compliance, pastels must be paired with deep charcoal (#1E293B) or dark obsidian (#0F172A) text. For dark mode, use pastels as glowing accent borders against rich dark backgrounds. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Pastel into Tailwind CSS?
Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.
Related Design Color Wheels
Aesthetic
#9D8DF1Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.
Soft Autumn
#B86B53Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.
Deep Winter
#1E3A8AHigh-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.
Soft Summer
#9B8EB9Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.