Bright Spring Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#07B6D5oklch(0.715 0.126 215.9)
Secondary
#D507B6oklch(0.596 0.261 336.8)
Accent
#B6D507oklch(0.821 0.193 119.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 | #07B6D5 | 2.42:1(Fail) | 7.90:1(AAA) | Best on Dark UI / Buttons |
Secondary | #D507B6 | 4.63:1(AA) | 4.14:1(AA (large text)) | Best on Light UI / Backgrounds |
Accent | #B6D507 | 1.68:1(Fail) | 11.41: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: '#F4F9FA',
100: '#E6F2F4',
200: '#B0F1FD',
300: '#7EE8FB',
400: '#43DEF9',
500: '#07B6D5',
600: '#06B2D0',
700: '#0590A8',
800: '#046A7C',
900: '#004A57',
950: '#002B33',
},
secondary: '#D507B6',
accent: '#B6D507',
}
}
}
};12-Tone Bright Spring Color Wheel Chart & Hex Codes
Warm golden undertones with extreme, dazzling clarity and high-voltage tropical chroma.
Neon Tropical Turquoise
Piercing aquatic turquoise for active controls.
Electric Coral Red
High-voltage warm coral for primary action CTAs.
Sunny Marigold Honey
Radiant sunny gold for star reviews and VIP tags.
Lime Spring Zest
Energetic lime green for health telemetry.
Flamingo Electric Pink
Vibrant tropical pink for e-commerce hearts.
Bright Lagoon Aqua
Electric cyan for links and progress rings.
Warm Sunflower Gold
Hero radiant gold for conversion anchors.
Obsidian Slate Anchor
Near-black base grounding high-energy bright hues.
Warm Vanilla Frost
Airy golden cream for welcoming cards.
Poppy Vermilion Orange
High-octane warm red for alerts and badges.
Spring Mint Jade
Fresh tropical green for positive KPIs.
Glacial Ice Highlight
Pristine contrasting surface.
Bright Spring Optical Dimensions Matrix
The three optical axes governing Bright Spring palettes in design systems and seasonal analysis.
Warm-Neutral (Golden Aqua & Coral)
Light to Medium (Bright open luminosity)
Ultra High / Vivid (Dazzling tropical saturation)
How to Use Bright Spring in Digital Product Design
Bright Spring (Clear Spring) bridges the boundary between Warm Spring and Bright Winter. It combines warm golden undertones with extreme, dazzling clarity and high chroma. It avoids all muted or dusty tones, capturing the vibrant optimism of tropical waters, blooming hibiscus, and sunlit citrus groves.
✓Recommended UI Applications
Outstanding for gamified apps, travel discovery platforms, children's educational media, and modern creator commerce. It boosts engagement through infectious energy and high optical excitement.
⚠Accessibility & Contrast Guidelines
Bright turquoise (#06B6D4) and coral (#F43F5E) have high luminescence. Always pair with dark obsidian text (#0B0F19) on buttons to pass WCAG AA standards with an 8.6:1 ratio.
Curated UI Pairings for Bright Spring
Expertly tested color coordinates that harmonize with Bright Spring without visual clashes.
Electric Coral Red
#F43F5ETriadic warm spark for primary CTA buttons and heart badges.
Sunny Marigold
#FBBF24Radiant golden accent for VIP tiers and notification toasts.
Obsidian Slate Anchor
#0B0F19High-contrast dark anchor grounding high-energy bright hues.
Bright Spring Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#06B6D4
rgb(6, 182, 212)
hsl(189°, 94%, 43%)
oklch(0.715 0.126 215.2)
Frequently Asked Questions About Bright Spring
What primary role should Bright Spring take in a digital interface?
Bright Spring (Clear Spring) bridges the boundary between Warm Spring and Bright Winter. It combines warm golden undertones with extreme, dazzling clarity and high chroma. It avoids all muted or dusty tones, capturing the vibrant optimism of tropical waters, blooming hibiscus, and sunlit citrus groves. 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 Bright Spring?
Bright turquoise (#06B6D4) and coral (#F43F5E) have high luminescence. Always pair with dark obsidian text (#0B0F19) on buttons to pass WCAG AA standards with an 8.6:1 ratio. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Bright Spring 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.