Start generating

Aegean Blue to Sun Flooded Woods color palette

1E3B71Aegean Blue484A00GodzillaC04B00Red Panda068BFFToo Blue to Be TrueF48A59Toasted HuskCFD332Sun Flooded Woods
Open in generator Export PNG, PDF, ASE…

About this palette

Aegean Blue to Sun Flooded Woods is a 6-color vibrant, warm palette: #1E3B71 (Aegean Blue), #484A00 (Godzilla), #C04B00 (Red Panda), #068BFF (Too Blue to Be True), #F48A59 (Toasted Husk), #CFD332 (Sun Flooded Woods). It mixes blue, brown, orange, yellow tones and feels warm overall. The strongest text pairing is #1E3B71 on #CFD332 with a contrast ratio of 6.78:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Aegean Bluergb(30, 59, 113)hsl(219, 58%, 28%)
Godzillargb(72, 74, 0)hsl(62, 100%, 15%)
Red Pandargb(192, 75, 0)hsl(23, 100%, 38%)
Too Blue to Be Truergb(6, 139, 255)hsl(208, 100%, 51%)
Toasted Huskrgb(244, 138, 89)hsl(19, 88%, 65%)
Sun Flooded Woodsrgb(207, 211, 50)hsl(61, 65%, 51%)

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.

  • Aa6.78:1 Good#1E3B71 on #CFD332
  • Aa6.78:1 Good#CFD332 on #1E3B71
  • Aa5.77:1 Good#484A00 on #CFD332
  • Aa5.77:1 Good#CFD332 on #484A00
  • Aa4.49:1 Poor#1E3B71 on #F48A59
  • Aa4.49:1 Poor#F48A59 on #1E3B71
  • Aa3.83:1 Poor#484A00 on #F48A59
  • Aa3.83:1 Poor#F48A59 on #484A00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Aegean Blue to Sun Flooded Woods — https://swatchly.xyz/palette/1e3b71-484a00-c04b00-068bff-f48a59-cfd332 */
:root {
  --aegean-blue: #1e3b71;
  --godzilla: #484a00;
  --red-panda: #c04b00;
  --too-blue-to-be-true: #068bff;
  --toasted-husk: #f48a59;
  --sun-flooded-woods: #cfd332;
}

Tailwind CSS v4

/* Aegean Blue to Sun Flooded Woods — https://swatchly.xyz/palette/1e3b71-484a00-c04b00-068bff-f48a59-cfd332 */
@theme {
  --color-aegean-blue: #1e3b71;
  --color-aegean-blue-50: #f0f5ff;
  --color-aegean-blue-100: #e1ecff;
  --color-aegean-blue-200: #c2d9ff;
  --color-aegean-blue-300: #a1c1f8;
  --color-aegean-blue-400: #7ea0dc;
  --color-aegean-blue-500: #6283bf;
  --color-aegean-blue-600: #4867a0;
  --color-aegean-blue-700: #345083;
  --color-aegean-blue-800: #1e3b71;
  --color-aegean-blue-900: #1a2e52;
  --color-aegean-blue-950: #0d1c35;
  --color-godzilla: #484a00;
  --color-godzilla-50: #f6f9d4;
  --color-godzilla-100: #ecefc6;
  --color-godzilla-200: #d8dcab;
  --color-godzilla-300: #c3c78f;
  --color-godzilla-400: #a4a86b;
  --color-godzilla-500: #8a8d4d;
  --color-godzilla-600: #707334;
  --color-godzilla-700: #5a5d21;
  --color-godzilla-800: #484a00;
  --color-godzilla-900: #373908;
  --color-godzilla-950: #222402;
  --color-red-panda: #c04b00;
  --color-red-panda-50: #fff2ed;
  --color-red-panda-100: #ffe7de;
  --color-red-panda-200: #ffcfbb;
  --color-red-panda-300: #ffb090;
  --color-red-panda-400: #f78451;
  --color-red-panda-500: #dd662d;
  --color-red-panda-600: #c04b00;
  --color-red-panda-700: #9a3a00;
  --color-red-panda-800: #792c00;
  --color-red-panda-900: #5e2100;
  --color-red-panda-950: #3d1200;
  --color-too-blue-to-be-true: #068bff;
  --color-too-blue-to-be-true-50: #f0f7ff;
  --color-too-blue-to-be-true-100: #e1efff;
  --color-too-blue-to-be-true-200: #c2ddff;
  --color-too-blue-to-be-true-300: #9cc9ff;
  --color-too-blue-to-be-true-400: #60a9ff;
  --color-too-blue-to-be-true-500: #068bff;
  --color-too-blue-to-be-true-600: #0070d0;
  --color-too-blue-to-be-true-700: #0058a6;
  --color-too-blue-to-be-true-800: #004484;
  --color-too-blue-to-be-true-900: #003467;
  --color-too-blue-to-be-true-950: #002043;
  --color-toasted-husk: #f48a59;
  --color-toasted-husk-50: #fff6f2;
  --color-toasted-husk-100: #ffebe3;
  --color-toasted-husk-200: #ffd3c0;
  --color-toasted-husk-300: #ffb494;
  --color-toasted-husk-400: #f48a59;
  --color-toasted-husk-500: #d36d3c;
  --color-toasted-husk-600: #b3501b;
  --color-toasted-husk-700: #933a00;
  --color-toasted-husk-800: #732b00;
  --color-toasted-husk-900: #592000;
  --color-toasted-husk-950: #391100;
  --color-sun-flooded-woods: #cfd332;
  --color-sun-flooded-woods-50: #fbffc8;
  --color-sun-flooded-woods-100: #f3f8aa;
  --color-sun-flooded-woods-200: #e2e787;
  --color-sun-flooded-woods-300: #cfd332;
  --color-sun-flooded-woods-400: #aeb103;
  --color-sun-flooded-woods-500: #909300;
  --color-sun-flooded-woods-600: #737500;
  --color-sun-flooded-woods-700: #5b5c00;
  --color-sun-flooded-woods-800: #464700;
  --color-sun-flooded-woods-900: #353600;
  --color-sun-flooded-woods-950: #212100;
}

Similar palettes