Cereal Flake to Purple Void color palette

F3D7AACereal Flake 8EA2FFWidowmaker 6D78D2Serenity’s Reign 006827Woodland Wonder 43253DPurple Void

About this palette

Cereal Flake to Purple Void is a 5-color cool palette: #F3D7AA (Cereal Flake), #8EA2FF (Widowmaker), #6D78D2 (Serenity’s Reign), #006827 (Woodland Wonder), #43253D (Purple Void). It mixes yellow, blue, purple, green tones and feels cool overall. The strongest text pairing is #F3D7AA on #43253D with a contrast ratio of 9.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cereal Flake	rgb(243, 215, 170)	hsl(37, 75%, 81%)
Widowmaker	rgb(142, 162, 255)	hsl(229, 100%, 78%)
Serenity’s Reign	rgb(109, 120, 210)	hsl(233, 53%, 63%)
Woodland Wonder	rgb(0, 104, 39)	hsl(142, 100%, 20%)
Purple Void	rgb(67, 37, 61)	hsl(312, 29%, 20%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa9.62:1 Very good#F3D7AA on #43253D
Aa9.62:1 Very good#43253D on #F3D7AA
Aa5.58:1 Good#8EA2FF on #43253D
Aa5.58:1 Good#43253D on #8EA2FF
Aa5.02:1 Good#F3D7AA on #006827
Aa5.02:1 Good#006827 on #F3D7AA
Aa3.35:1 Poor#6D78D2 on #43253D
Aa3.35:1 Poor#43253D on #6D78D2

Color blindness preview

CSS variables

/* Cereal Flake to Purple Void — https://swatchly.xyz/palette/f3d7aa-8ea2ff-6d78d2-006827-43253d */
:root {
  --cereal-flake: #f3d7aa;
  --widowmaker: #8ea2ff;
  --serenity-s-reign: #6d78d2;
  --woodland-wonder: #006827;
  --purple-void: #43253d;
}

Tailwind CSS v4

/* Cereal Flake to Purple Void — https://swatchly.xyz/palette/f3d7aa-8ea2ff-6d78d2-006827-43253d */
@theme {
  --color-cereal-flake: #f3d7aa;
  --color-cereal-flake-50: #fff7e9;
  --color-cereal-flake-100: #fdecd1;
  --color-cereal-flake-200: #f3d7aa;
  --color-cereal-flake-300: #d8c19c;
  --color-cereal-flake-400: #b9a077;
  --color-cereal-flake-500: #9d8459;
  --color-cereal-flake-600: #816940;
  --color-cereal-flake-700: #68522c;
  --color-cereal-flake-800: #523f1d;
  --color-cereal-flake-900: #403013;
  --color-cereal-flake-950: #291d08;
  --color-widowmaker: #8ea2ff;
  --color-widowmaker-50: #f6f8ff;
  --color-widowmaker-100: #eaefff;
  --color-widowmaker-200: #d2dcff;
  --color-widowmaker-300: #b6c5ff;
  --color-widowmaker-400: #8ea2ff;
  --color-widowmaker-500: #7385de;
  --color-widowmaker-600: #5868bf;
  --color-widowmaker-700: #43509f;
  --color-widowmaker-800: #323c82;
  --color-widowmaker-900: #242d67;
  --color-widowmaker-950: #141a43;
  --color-serenity-s-reign: #6d78d2;
  --color-serenity-s-reign-50: #f1f4ff;
  --color-serenity-s-reign-100: #e3e8ff;
  --color-serenity-s-reign-200: #c9d2ff;
  --color-serenity-s-reign-300: #acb8ff;
  --color-serenity-s-reign-400: #8895ef;
  --color-serenity-s-reign-500: #6d78d2;
  --color-serenity-s-reign-600: #555eb3;
  --color-serenity-s-reign-700: #424996;
  --color-serenity-s-reign-800: #32377b;
  --color-serenity-s-reign-900: #262963;
  --color-serenity-s-reign-950: #161942;
  --color-woodland-wonder: #006827;
  --color-woodland-wonder-50: #e0ffe3;
  --color-woodland-wonder-100: #c7fbce;
  --color-woodland-wonder-200: #aceab4;
  --color-woodland-wonder-300: #8ed599;
  --color-woodland-wonder-400: #67b775;
  --color-woodland-wonder-500: #479b58;
  --color-woodland-wonder-600: #2a7f3f;
  --color-woodland-wonder-700: #006827;
  --color-woodland-wonder-800: #01511d;
  --color-woodland-wonder-900: #003f14;
  --color-woodland-wonder-950: #00280a;
  --color-purple-void: #43253d;
  --color-purple-void-50: #fff0fb;
  --color-purple-void-100: #fbe3f5;
  --color-purple-void-200: #eacde3;
  --color-purple-void-300: #d6b5ce;
  --color-purple-void-400: #b894b0;
  --color-purple-void-500: #9c7894;
  --color-purple-void-600: #805e78;
  --color-purple-void-700: #674960;
  --color-purple-void-800: #51374b;
  --color-purple-void-900: #43253d;
  --color-purple-void-950: #271824;
}