Fresh Botanical Bloom & Pastel Vibrance Category: Seasonal 30,200/mo searches

Spring Color Palette — HEX Codes, Swatches & UI Palette

Evoking new blossoms, morning dew, and gentle sunshine. This spring palette blends soft blush rose and buttercup yellow with fresh botanical sage and crisp sky blue for light, uplifting digital experiences and wellness branding.

Soft Accent

Blush Rose

#F4A6B8

Warm Glow

Buttercup Yellow

#FEE48C

Organic Complement

Botanical Sage

#9CAF88

Refreshing Tint

Sky Breeze

#A7D8DE

Vibrant Spring Green

Fresh Sprout

#77DD77

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Spring Color Palette.

Blush Rose

Soft Accent

HEX #F4A6B8

RGB rgb(244, 166, 184)

HSL hsl(346deg, 78%, 80%)

vs White: 1.91:1 (Fail) vs Black: 10.99:1 (AAA)

Buttercup Yellow

Warm Glow

HEX #FEE48C

RGB rgb(254, 228, 140)

HSL hsl(46deg, 98%, 77%)

vs White: 1.26:1 (Fail) vs Black: 16.69:1 (AAA)

Botanical Sage

Organic Complement

HEX #9CAF88

RGB rgb(156, 175, 136)

HSL hsl(89deg, 20%, 61%)

vs White: 2.36:1 (Fail) vs Black: 8.9:1 (AAA)

Sky Breeze

Refreshing Tint

HEX #A7D8DE

RGB rgb(167, 216, 222)

HSL hsl(187deg, 45%, 76%)

vs White: 1.55:1 (Fail) vs Black: 13.52:1 (AAA)

Fresh Sprout

Vibrant Spring Green

HEX #77DD77

RGB rgb(119, 221, 119)

HSL hsl(120deg, 60%, 67%)

vs White: 1.69:1 (Fail) vs Black: 12.39:1 (AAA)

UI Design & Color Hierarchy Guide

Ideal for wellness, beauty, eco-friendly e-commerce, and lifestyle apps. Use the soft mint or sky blue for subtle background tinting, and contrast with deep slate for accessible copy.

60% Dominant Base

Use the primary neutral/light swatch (Buttercup Yellow) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Buttercup Yellow | Darkest: Botanical Sage):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Blush Rose (#F4A6B8)	1.52:1 Fail	1.24:1 Fail
Buttercup Yellow (#FEE48C)	1.0:1 Fail	1.87:1 Fail
Botanical Sage (#9CAF88)	1.87:1 Fail	1.0:1 Fail
Sky Breeze (#A7D8DE)	1.23:1 Fail	1.52:1 Fail
Fresh Sprout (#77DD77)	1.35:1 Fail	1.39:1 Fail

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #F4A6B8; /* Blush Rose - Soft Accent */
  --color-2: #FEE48C; /* Buttercup Yellow - Warm Glow */
  --color-3: #9CAF88; /* Botanical Sage - Organic Complement */
  --color-4: #A7D8DE; /* Sky Breeze - Refreshing Tint */
  --color-5: #77DD77; /* Fresh Sprout - Vibrant Spring Green */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#F4A6B8',
    'palette-2': '#FEE48C',
    'palette-3': '#9CAF88',
    'palette-4': '#A7D8DE',
    'palette-5': '#77DD77'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel