Darkest Forest to Fizzy & Dizzy color palette

2B2D00Darkest Forest 87312BPlanet of the Apes 8C7FBCMagic Carpet 4EDFE4Hammam Blue F5F8CDFizzy & Dizzy

Open in generator Export PNG, PDF, ASE…

About this palette

Darkest Forest to Fizzy & Dizzy is a 5-color warm, vintage palette: #2B2D00 (Darkest Forest), #87312B (Planet of the Apes), #8C7FBC (Magic Carpet), #4EDFE4 (Hammam Blue), #F5F8CD (Fizzy & Dizzy). It mixes green, red, purple, turquoise, white tones and feels warm overall. The strongest text pairing is #2B2D00 on #F5F8CD with a contrast ratio of 12.98:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(43, 45, 0)	hsl(63, 100%, 9%)
Planet of the Apes	rgb(135, 49, 43)	hsl(4, 52%, 35%)
Magic Carpet	rgb(140, 127, 188)	hsl(253, 31%, 62%)
Hammam Blue	rgb(78, 223, 228)	hsl(182, 74%, 60%)
Fizzy & Dizzy	rgb(245, 248, 205)	hsl(64, 75%, 89%)

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.

Aa12.98:1 Super#2B2D00 on #F5F8CD
Aa12.98:1 Super#F5F8CD on #2B2D00
Aa8.79:1 Very good#2B2D00 on #4EDFE4
Aa8.79:1 Very good#4EDFE4 on #2B2D00
Aa7.66:1 Very good#87312B on #F5F8CD
Aa7.66:1 Very good#F5F8CD on #87312B
Aa5.19:1 Good#87312B on #4EDFE4
Aa5.19:1 Good#4EDFE4 on #87312B

Color blindness preview

CSS variables

/* Darkest Forest to Fizzy & Dizzy — https://swatchly.xyz/palette/2b2d00-87312b-8c7fbc-4edfe4-f5f8cd */
:root {
  --darkest-forest: #2b2d00;
  --planet-of-the-apes: #87312b;
  --magic-carpet: #8c7fbc;
  --hammam-blue: #4edfe4;
  --fizzy-dizzy: #f5f8cd;
}

Tailwind CSS v4

/* Darkest Forest to Fizzy & Dizzy — https://swatchly.xyz/palette/2b2d00-87312b-8c7fbc-4edfe4-f5f8cd */
@theme {
  --color-darkest-forest: #2b2d00;
  --color-darkest-forest-50: #f5f8de;
  --color-darkest-forest-100: #ebeed1;
  --color-darkest-forest-200: #d7dbb8;
  --color-darkest-forest-300: #c1c59d;
  --color-darkest-forest-400: #a0a478;
  --color-darkest-forest-500: #83875a;
  --color-darkest-forest-600: #676b40;
  --color-darkest-forest-700: #4f522c;
  --color-darkest-forest-800: #3b3e1d;
  --color-darkest-forest-900: #2b2d00;
  --color-darkest-forest-950: #191a08;
  --color-planet-of-the-apes: #87312b;
  --color-planet-of-the-apes-50: #fff2f0;
  --color-planet-of-the-apes-100: #ffe4e0;
  --color-planet-of-the-apes-200: #ffc7c0;
  --color-planet-of-the-apes-300: #fba69b;
  --color-planet-of-the-apes-400: #de8278;
  --color-planet-of-the-apes-500: #c1655b;
  --color-planet-of-the-apes-600: #a14a42;
  --color-planet-of-the-apes-700: #87312b;
  --color-planet-of-the-apes-800: #6a2621;
  --color-planet-of-the-apes-900: #541b17;
  --color-planet-of-the-apes-950: #370e0b;
  --color-magic-carpet: #8c7fbc;
  --color-magic-carpet-50: #f6f4ff;
  --color-magic-carpet-100: #ede9ff;
  --color-magic-carpet-200: #dbd2ff;
  --color-magic-carpet-300: #c5bbf1;
  --color-magic-carpet-400: #a79ad6;
  --color-magic-carpet-500: #8c7fbc;
  --color-magic-carpet-600: #71649e;
  --color-magic-carpet-700: #5a4e82;
  --color-magic-carpet-800: #463b69;
  --color-magic-carpet-900: #362c53;
  --color-magic-carpet-950: #211a36;
  --color-hammam-blue: #4edfe4;
  --color-hammam-blue-50: #e5feff;
  --color-hammam-blue-100: #befdff;
  --color-hammam-blue-200: #95eff2;
  --color-hammam-blue-300: #4edfe4;
  --color-hammam-blue-400: #2cbcc1;
  --color-hammam-blue-500: #009da2;
  --color-hammam-blue-600: #007e82;
  --color-hammam-blue-700: #006467;
  --color-hammam-blue-800: #004e50;
  --color-hammam-blue-900: #003b3d;
  --color-hammam-blue-950: #002526;
  --color-fizzy-dizzy: #f5f8cd;
  --color-fizzy-dizzy-50: #f5f8cd;
  --color-fizzy-dizzy-100: #ebedd2;
  --color-fizzy-dizzy-200: #d7dabb;
  --color-fizzy-dizzy-300: #c1c4a0;
  --color-fizzy-dizzy-400: #a2a57e;
  --color-fizzy-dizzy-500: #878962;
  --color-fizzy-dizzy-600: #6d6f49;
  --color-fizzy-dizzy-700: #565836;
  --color-fizzy-dizzy-800: #434527;
  --color-fizzy-dizzy-900: #34351b;
  --color-fizzy-dizzy-950: #20210e;
}