Aesthetic Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#9E8EF1oklch(0.702 0.142 289.6)
Split Accent 1
#F1D08Eoklch(0.871 0.092 84.1)
Split Accent 2
#AFF18Eoklch(0.891 0.145 135.8)
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 | #9E8EF1 | 2.77:1(Fail) | 6.92:1(AA) | Best on Dark UI / Buttons |
Split Accent 1 | #F1D08E | 1.48:1(Fail) | 12.91:1(AAA) | Best on Dark UI / Buttons |
Split Accent 2 | #AFF18E | 1.33:1(Fail) | 14.40: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: '#F6F5FA',
100: '#E9E8F3',
200: '#C1B6F6',
300: '#9A89F0',
400: '#6C53EA',
500: '#9E8EF1',
600: '#3318BF',
700: '#2A139A',
800: '#1F0E71',
900: '#110452',
950: '#0A0330',
},
secondary: '#F1D08E',
accent: '#AFF18E',
}
}
}
};Curated Aesthetic Color Palettes & Hex Codes
6 mood-tested aesthetic themes popular across Pinterest, Notion templates, and modern indie apps.
Cottagecore & Matcha
Serene botanical calm popularized across Notion workspaces and sustainable lifestyle brands.
Matcha Sage
Forest Leaf
Deep Moss
Alabaster Oat
Warm Linen
Cyber Y2K & Neon Pop
Luminous retro-futuristic digital optimism for Gen-Z apps, gaming, and creator web suites.
Bubblegum Pink
Neon Tangerine
Butter Sunny
Lime Glow
Electric Sky
Vintage 70s Warmth
Sun-faded retro warmth uniting earthy terracotta clay, dusky sage, and buttercup gold.
Terracotta Rust
Navy Charcoal
Dusty Celadon
Warm Biscuit
Paper Cream
Dreamy Lilac Cloud (Soft Pastel)
Airy, whimsical gradients and soft tones for beauty, wellness, and mindful journaling apps.
Periwinkle Mist
Soft Lavender
Mauve Orchid
Blush Rose
Baby Cloud
Espresso & Oat Milk Neutral
Understated minimalist luxury for coffee shops, architecture portfolios, and editorial blogs.
Dark Roast
Warm Mocha
Toasted Almond
Oat Latte
Steamed Cream
Nordic Minimalist Slate
Crisp architectural slate paired with hairline borders and sharp crimson focal points.
Deep Space Slate
Cool Zinc
Glacier White
Crimson Signal
Ruby Alert
How to Use Aesthetic in Digital Product Design
An aesthetic color wheel breaks away from harsh primary colors in favor of emotive, photogenic color harmonies. Popularized across Pinterest moodboards, TikTok aesthetic videos, and Notion productivity templates, aesthetic palettes blend dreamy lavender-mauves, matcha greens, warm apricots, and creamy oat neutrals into a cohesive visual identity.
✓Recommended UI Applications
Aesthetic wheels power modern creator platforms, aesthetic personal wikis, lifestyle e-commerce, and boutique stationery apps. Rather than high-stress stark contrasts, aesthetic UI utilizes tinted surface cards, pill tags, and soft gradient borders that make digital products feel cozy and stylish.
⚠Accessibility & Contrast Guidelines
Light aesthetic tones (#9D8DF1, #F4A261) require dark charcoal (#18181B or #27272A) text to achieve WCAG 2.1 AA compliance (ratio 6.2:1). For dark interfaces, aesthetic tones create magnificent soft neon highlights when placed against obsidian slate backgrounds.
Curated UI Pairings for Aesthetic
Expertly tested color coordinates that harmonize with Aesthetic without visual clashes.
Warm Apricot Glow
#F4A261Split-complementary warm balance for key action highlights.
Matcha Celadon
#A3B18ASoothing botanical accent for success tags and pills.
Obsidian Velvet Base
#18181BCrisp dark anchor providing AAA contrast across typography.
Aesthetic Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#9D8DF1
rgb(157, 141, 241)
hsl(250°, 80%, 75%)
oklch(0.699 0.144 289.5)
Frequently Asked Questions About Aesthetic
What primary role should Aesthetic take in a digital interface?
An aesthetic color wheel breaks away from harsh primary colors in favor of emotive, photogenic color harmonies. Popularized across Pinterest moodboards, TikTok aesthetic videos, and Notion productivity templates, aesthetic palettes blend dreamy lavender-mauves, matcha greens, warm apricots, and creamy oat neutrals into a cohesive visual identity. 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 Aesthetic?
Light aesthetic tones (#9D8DF1, #F4A261) require dark charcoal (#18181B or #27272A) text to achieve WCAG 2.1 AA compliance (ratio 6.2:1). For dark interfaces, aesthetic tones create magnificent soft neon highlights when placed against obsidian slate backgrounds. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Aesthetic 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
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.
Warm Spring
#F59E0BRadiant, golden-infused high-clarity palette — featuring sunflower gold, coral peach, and warm turquoise.