Dreamy Confectionery & Soft Dreamy Tones Category: Aesthetic 33,100/mo searches

Pastel Color Palette — HEX Codes, Swatches & UI Palette

Gentle, desaturated hues inspired by French macarons and soft morning mist. Blending pastel lavender, blush pink, and mint green to evoke feelings of calm serenity, tenderness, and approachable warmth.

Creative Accent

Pastel Lavender

#C3B1E1

Soft Warm Accent

Blush Pink

#FFD1DC

Cool Serene Tone

Baby Sky Blue

#B5D8EB

Gentle Nature Tone

Pastel Mint

#C1E1C1

Warm Light Surface

Soft Peach

#FFDAC1

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 Pastel Color Palette.

Pastel Lavender

Creative Accent

HEX #C3B1E1

RGB rgb(195, 177, 225)

HSL hsl(262deg, 44%, 79%)

vs White: 1.96:1 (Fail) vs Black: 10.7:1 (AAA)

Blush Pink

Soft Warm Accent

HEX #FFD1DC

RGB rgb(255, 209, 220)

HSL hsl(346deg, 100%, 91%)

vs White: 1.36:1 (Fail) vs Black: 15.41:1 (AAA)

Baby Sky Blue

Cool Serene Tone

HEX #B5D8EB

RGB rgb(181, 216, 235)

HSL hsl(201deg, 57%, 82%)

vs White: 1.5:1 (Fail) vs Black: 13.99:1 (AAA)

Pastel Mint

Gentle Nature Tone

HEX #C1E1C1

RGB rgb(193, 225, 193)

HSL hsl(120deg, 35%, 82%)

vs White: 1.42:1 (Fail) vs Black: 14.81:1 (AAA)

Soft Peach

Warm Light Surface

HEX #FFDAC1

RGB rgb(255, 218, 193)

HSL hsl(24deg, 100%, 88%)

vs White: 1.31:1 (Fail) vs Black: 16.05:1 (AAA)

UI Design & Color Hierarchy Guide

Always ensure text elements set over pastels meet WCAG contrast guidelines. Use dark charcoal or navy (#1E293B) for body typography rather than matching pastel text.

60% Dominant Base

Use the primary neutral/light swatch (Soft Peach) 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: Soft Peach | Darkest: Pastel Lavender):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Pastel Lavender (#C3B1E1)	1.5:1 Fail	1.0:1 Fail
Blush Pink (#FFD1DC)	1.04:1 Fail	1.44:1 Fail
Baby Sky Blue (#B5D8EB)	1.15:1 Fail	1.31:1 Fail
Pastel Mint (#C1E1C1)	1.08:1 Fail	1.38:1 Fail
Soft Peach (#FFDAC1)	1.0:1 Fail	1.5: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: #C3B1E1; /* Pastel Lavender - Creative Accent */
  --color-2: #FFD1DC; /* Blush Pink - Soft Warm Accent */
  --color-3: #B5D8EB; /* Baby Sky Blue - Cool Serene Tone */
  --color-4: #C1E1C1; /* Pastel Mint - Gentle Nature Tone */
  --color-5: #FFDAC1; /* Soft Peach - Warm Light Surface */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#C3B1E1',
    'palette-2': '#FFD1DC',
    'palette-3': '#B5D8EB',
    'palette-4': '#C1E1C1',
    'palette-5': '#FFDAC1'
  }
}

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