Color collection
Pastel Yellow Color Palettes
Warm yellow palettes for cheerful brands, education products, note apps, and family-focused pages.
#928EE1Accent#E89CA6Surface#EAE7F9Text#141221Support#CE8682Pastel Yellow 1Pastel / Yellow / WarmQuality 91Primary#8EE194Accent#9CE8C9Surface#E7F9EAText#122114Support#8782CEPastel Yellow 2Pastel / Yellow / WarmQuality 91Primary#8EE1ABAccent#9CE3E8Surface#E7F9EFText#122118Support#9D82CEPastel Yellow 7Pastel / Yellow / WarmQuality 91Primary#8EA2E1Accent#E89CC9Surface#E7E9F9Text#121521Support#CE8294Pastel Yellow 9Pastel / Yellow / WarmQuality 91Primary#AA8EE1Accent#E8B59CSurface#EFE7F9Text#181221Support#CE9C82Pastel Yellow 22Pastel / Yellow / WarmQuality 91Primary#8EE190Accent#E89CE6Surface#E7F9E9Text#122114Support#8382CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for education tools, note apps, and friendly landing pages. Balance pastel yellow with charcoal text and one cooler support color to avoid low contrast.
Pastel palettes are softened without letting text fade into the surface; the neutral text role is intentionally stronger than the accent colors.
CSS Variables
:root {
--primary: #928EE1;
--accent: #E89CA6;
--surface: #EAE7F9;
--text: #141221;
--support: #CE8682;
}FAQ
Where should I use pastel yellow color palettes?
These palettes are designed for education tools, note apps, and friendly landing pages.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Balance pastel yellow with charcoal text and one cooler support color to avoid low contrast.