Cornflake to Siren Color Palette

About this palette

Cornflake to Siren is a 5-color warm palette: #EEE78A (Cornflake), #00667E (Teal With It), #F074D7 (Nervous Neon Pink), #0087A0 (Cruising), #622547 (Siren). It mixes yellow, blue, pink, red tones and feels warm overall. The strongest text pairing is #EEE78A on #622547 with a contrast ratio of 8.76:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cornflake	rgb(238, 231, 138)	hsl(56, 75%, 74%)
Teal With It	rgb(0, 102, 126)	hsl(191, 100%, 25%)
Nervous Neon Pink	rgb(240, 116, 215)	hsl(312, 81%, 70%)
Cruising	rgb(0, 135, 160)	hsl(189, 100%, 31%)
Siren	rgb(98, 37, 71)	hsl(327, 45%, 26%)

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.

Aa8.76:1 Very good#EEE78A on #622547
Aa8.76:1 Very good#622547 on #EEE78A
Aa5.13:1 Good#EEE78A on #00667E
Aa5.13:1 Good#00667E on #EEE78A
Aa4.37:1 Poor#F074D7 on #622547
Aa4.37:1 Poor#622547 on #F074D7
Aa3.30:1 Poor#EEE78A on #0087A0
Aa3.30:1 Poor#0087A0 on #EEE78A

Color blindness preview

CSS variables

/* Cornflake to Siren — https://swatchly.xyz/palette/eee78a-00667e-f074d7-0087a0-622547 */
:root {
  --cornflake: #eee78a;
  --teal-with-it: #00667e;
  --nervous-neon-pink: #f074d7;
  --cruising: #0087a0;
  --siren: #622547;
}

Tailwind CSS v4

/* Cornflake to Siren — https://swatchly.xyz/palette/eee78a-00667e-f074d7-0087a0-622547 */
@theme {
  --color-cornflake: #eee78a;
  --color-cornflake-50: #f4f1bc;
  --color-cornflake-100: #eee78a;
  --color-cornflake-200: #d9d48e;
  --color-cornflake-300: #c5bf70;
  --color-cornflake-400: #a8a148;
  --color-cornflake-500: #8e8725;
  --color-cornflake-600: #756d00;
  --color-cornflake-700: #5e5700;
  --color-cornflake-800: #494400;
  --color-cornflake-900: #383400;
  --color-cornflake-950: #232000;
  --color-teal-with-it: #00667e;
  --color-teal-with-it-50: #e7f9ff;
  --color-teal-with-it-100: #cef2ff;
  --color-teal-with-it-200: #aae3f7;
  --color-teal-with-it-300: #8dcfe5;
  --color-teal-with-it-400: #66b1ca;
  --color-teal-with-it-500: #4697b0;
  --color-teal-with-it-600: #297c95;
  --color-teal-with-it-700: #00667e;
  --color-teal-with-it-800: #005063;
  --color-teal-with-it-900: #003d4d;
  --color-teal-with-it-950: #002732;
  --color-nervous-neon-pink: #f074d7;
  --color-nervous-neon-pink-50: #fff4fc;
  --color-nervous-neon-pink-100: #ffe7f8;
  --color-nervous-neon-pink-200: #ffcaf1;
  --color-nervous-neon-pink-300: #ffa4ea;
  --color-nervous-neon-pink-400: #f074d7;
  --color-nervous-neon-pink-500: #cf56b8;
  --color-nervous-neon-pink-600: #af389a;
  --color-nervous-neon-pink-700: #901f7e;
  --color-nervous-neon-pink-800: #740c65;
  --color-nervous-neon-pink-900: #5c014f;
  --color-nervous-neon-pink-950: #3b0032;
  --color-cruising: #0087a0;
  --color-cruising-50: #e5f9ff;
  --color-cruising-100: #d1f5ff;
  --color-cruising-200: #a4e9fc;
  --color-cruising-300: #86d6ec;
  --color-cruising-400: #5bbad2;
  --color-cruising-500: #35a0ba;
  --color-cruising-600: #0087a0;
  --color-cruising-700: #006b80;
  --color-cruising-800: #005464;
  --color-cruising-900: #00404d;
  --color-cruising-950: #002831;
  --color-siren: #622547;
  --color-siren-50: #fff1f7;
  --color-siren-100: #ffe2ef;
  --color-siren-200: #fdc5df;
  --color-siren-300: #eaaac9;
  --color-siren-400: #cc88aa;
  --color-siren-500: #af6b8e;
  --color-siren-600: #915172;
  --color-siren-700: #753c5a;
  --color-siren-800: #622547;
  --color-siren-900: #491f36;
  --color-siren-950: #2f1121;
}