Icy Plains to Freshly Roasted Coffee color palette

DADDFFIcy Plains 228456Monster Monstera 1F1731Dark Knight E57350Phoenix Red 67351FFreshly Roasted Coffee

Open in generator Export PNG, PDF, ASE…

About this palette

Icy Plains to Freshly Roasted Coffee is a 5-color cool, vintage palette: #DADDFF (Icy Plains), #228456 (Monster Monstera), #1F1731 (Dark Knight), #E57350 (Phoenix Red), #67351F (Freshly Roasted Coffee). It mixes purple, green, red, brown tones and feels cool overall. The strongest text pairing is #DADDFF on #1F1731 with a contrast ratio of 12.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(218, 221, 255)	hsl(235, 100%, 93%)
Monster Monstera	rgb(34, 132, 86)	hsl(152, 59%, 33%)
Dark Knight	rgb(31, 23, 49)	hsl(258, 36%, 14%)
Phoenix Red	rgb(229, 115, 80)	hsl(14, 74%, 61%)
Freshly Roasted Coffee	rgb(103, 53, 31)	hsl(18, 54%, 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.

Aa12.87:1 Super#DADDFF on #1F1731
Aa12.87:1 Super#1F1731 on #DADDFF
Aa7.49:1 Very good#DADDFF on #67351F
Aa7.49:1 Very good#67351F on #DADDFF
Aa5.63:1 Good#1F1731 on #E57350
Aa5.63:1 Good#E57350 on #1F1731
Aa3.68:1 Poor#228456 on #1F1731
Aa3.68:1 Poor#1F1731 on #228456

Color blindness preview

CSS variables

/* Icy Plains to Freshly Roasted Coffee — https://swatchly.xyz/palette/daddff-228456-1f1731-e57350-67351f */
:root {
  --icy-plains: #daddff;
  --monster-monstera: #228456;
  --dark-knight: #1f1731;
  --phoenix-red: #e57350;
  --freshly-roasted-coffee: #67351f;
}

Tailwind CSS v4

/* Icy Plains to Freshly Roasted Coffee — https://swatchly.xyz/palette/daddff-228456-1f1731-e57350-67351f */
@theme {
  --color-icy-plains: #daddff;
  --color-icy-plains-50: #fafaff;
  --color-icy-plains-100: #f0f1ff;
  --color-icy-plains-200: #daddff;
  --color-icy-plains-300: #c3c5e1;
  --color-icy-plains-400: #a2a4c3;
  --color-icy-plains-500: #8587a6;
  --color-icy-plains-600: #696b89;
  --color-icy-plains-700: #52546e;
  --color-icy-plains-800: #3f4057;
  --color-icy-plains-900: #303144;
  --color-icy-plains-950: #1d1e2c;
  --color-monster-monstera: #228456;
  --color-monster-monstera-50: #ddffea;
  --color-monster-monstera-100: #c5fbda;
  --color-monster-monstera-200: #aaebc4;
  --color-monster-monstera-300: #8cd7ac;
  --color-monster-monstera-400: #64ba8a;
  --color-monster-monstera-500: #439f6f;
  --color-monster-monstera-600: #228456;
  --color-monster-monstera-700: #036a41;
  --color-monster-monstera-800: #005332;
  --color-monster-monstera-900: #004025;
  --color-monster-monstera-950: #002815;
  --color-dark-knight: #1f1731;
  --color-dark-knight-50: #f6f3ff;
  --color-dark-knight-100: #ede7fe;
  --color-dark-knight-200: #d9d3ee;
  --color-dark-knight-300: #c3bcda;
  --color-dark-knight-400: #a49cbd;
  --color-dark-knight-500: #8880a1;
  --color-dark-knight-600: #6d6584;
  --color-dark-knight-700: #564f6a;
  --color-dark-knight-800: #423c54;
  --color-dark-knight-900: #322d41;
  --color-dark-knight-950: #1f1731;
  --color-phoenix-red: #e57350;
  --color-phoenix-red-50: #ffeee8;
  --color-phoenix-red-100: #ffded4;
  --color-phoenix-red-200: #ffc0ad;
  --color-phoenix-red-300: #ff9b7d;
  --color-phoenix-red-400: #e57350;
  --color-phoenix-red-500: #c85836;
  --color-phoenix-red-600: #a9401d;
  --color-phoenix-red-700: #8c2c08;
  --color-phoenix-red-800: #721f00;
  --color-phoenix-red-900: #5b1700;
  --color-phoenix-red-950: #3d0c00;
  --color-freshly-roasted-coffee: #67351f;
  --color-freshly-roasted-coffee-50: #fff2ed;
  --color-freshly-roasted-coffee-100: #ffe5da;
  --color-freshly-roasted-coffee-200: #faccb9;
  --color-freshly-roasted-coffee-300: #e8b49f;
  --color-freshly-roasted-coffee-400: #cb937c;
  --color-freshly-roasted-coffee-500: #b07860;
  --color-freshly-roasted-coffee-600: #945e48;
  --color-freshly-roasted-coffee-700: #7a4934;
  --color-freshly-roasted-coffee-800: #67351f;
  --color-freshly-roasted-coffee-900: #4e2a1a;
  --color-freshly-roasted-coffee-950: #33190d;
}