Dreamy, friendly, optimistic, and gentle.
Five high-lightness colors create a playful atmosphere but require a separate dark ink color for readable content and controls.
Pastel · Curated palette
Pastel Dream Color Palette
A soft pink, lavender, blue, mint, and yellow palette designed for surfaces, highlights, and friendly interface sections.
#FBCFE8#DDD6FE#BFDBFE#A7F3D0#FEF3C7- Education products
- Family brands
- Creative onboarding
- Wellness and community interfaces
- Small text using the pastel values themselves
- Status systems that rely only on pastel hue differences
Color values
HEX, RGB, OKLCH, CPS, and CMYK planning values.
CMYK values are generic planning approximations. Final print output requires a target ICC profile and physical proof.
| Color | HEX | RGB | OKLCH | CMYK approximation | Nearest CPS |
|---|---|---|---|---|---|
#FBCFE8 | 251, 207, 232 | oklch(89.9% 0.059 343) | 0% / 18% / 8% / 2% | CPS 30100EΔE00 1.51 | |
#DDD6FE | 221, 214, 254 | oklch(89.4% 0.055 293) | 13% / 16% / 0% / 0% | CPS 25200SΔE00 1.82 | |
#BFDBFE | 191, 219, 254 | oklch(88.2% 0.057 254) | 25% / 14% / 0% / 0% | CPS 22200SΔE00 1.67 | |
#A7F3D0 | 167, 243, 208 | oklch(90.5% 0.089 164) | 31% / 0% / 14% / 5% | CPS 15200VΔE00 3.36 | |
#FEF3C7 | 254, 243, 199 | oklch(96.2% 0.058 96) | 0% / 4% / 22% / 0% | CPS 09100VΔE00 2.51 |
Semantic role mapping
Give every color a stable job.
This role map is a practical starting point. Validate it against the real components, text sizes, and interaction states in your product.
Promotional card background
Secondary feature section
Help and information panel
Success background with label and icon
Warning background with dark text
Context previews
Review the palette in light, dark, and mobile UI.
These previews reveal role assumptions that are invisible in a simple swatch strip.
Pastel DreamOverviewProjects
Primary metric24,680
Latest activity
Role-based color preview
ReadyDark contextDashboardSettings
Selected stateColor system
Focus and status
Check the real relationships
ActivePastel Dream•••
Mobile previewBuild with roles
Test text, controls, and states before export.
Important foreground and background pairs.
AaDark text on pink surface#172033 on #FBCFE811.77:1AA normal text
AaDark text on lavender surface#172033 on #DDD6FE11.72:1AA normal text
AaDark text on mint surface#172033 on #A7F3D012.68:1AA normal text
AaDark text on yellow surface#172033 on #FEF3C714.61:1AA normal text
Accessibility notes
- Use a stable dark foreground such as #172033 across the pastel surfaces.
- Create stronger variants for links, focus, and buttons.
- Pair success and warning backgrounds with text and icons.
Color-vision note
Pastel values can converge because their lightness is similar. Use labels, icons, and stronger borders for differentiation.
Print note
Pastel print appearance depends strongly on paper white, ink, and profile. Treat listed CMYK as planning approximations.
Related palettes
Sage Studio Color Palette
Tropical Bright Color Palette
SaaS Interface Color Palette