Delicate Ice to Medium Roast color palette

B1D3E4Delicate Ice C3A7D2Lilac Lace 7E916FCrispy Crunch 4F7C57Amazon 73412DNoble Chocolate 3B230DMedium Roast

Open in generator Export PNG, PDF, ASE…

About this palette

Delicate Ice to Medium Roast is a 6-color cool, earthy palette: #B1D3E4 (Delicate Ice), #C3A7D2 (Lilac Lace), #7E916F (Crispy Crunch), #4F7C57 (Amazon), #73412D (Noble Chocolate), #3B230D (Medium Roast). It mixes blue, purple, green, brown tones and feels cool overall. The strongest text pairing is #B1D3E4 on #3B230D with a contrast ratio of 9.29:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Delicate Ice	rgb(177, 211, 228)	hsl(200, 49%, 79%)
Lilac Lace	rgb(195, 167, 210)	hsl(279, 32%, 74%)
Crispy Crunch	rgb(126, 145, 111)	hsl(94, 13%, 50%)
Amazon	rgb(79, 124, 87)	hsl(131, 22%, 40%)
Noble Chocolate	rgb(115, 65, 45)	hsl(17, 44%, 31%)
Medium Roast	rgb(59, 35, 13)	hsl(29, 64%, 14%)

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.29:1 Very good#B1D3E4 on #3B230D
Aa9.29:1 Very good#3B230D on #B1D3E4
Aa6.83:1 Good#C3A7D2 on #3B230D
Aa6.83:1 Good#3B230D on #C3A7D2
Aa5.27:1 Good#B1D3E4 on #73412D
Aa5.27:1 Good#73412D on #B1D3E4
Aa4.31:1 Poor#7E916F on #3B230D
Aa4.31:1 Poor#3B230D on #7E916F

Color blindness preview

CSS variables

/* Delicate Ice to Medium Roast — https://swatchly.xyz/palette/b1d3e4-c3a7d2-7e916f-4f7c57-73412d-3b230d */
:root {
  --delicate-ice: #b1d3e4;
  --lilac-lace: #c3a7d2;
  --crispy-crunch: #7e916f;
  --amazon: #4f7c57;
  --noble-chocolate: #73412d;
  --medium-roast: #3b230d;
}

Tailwind CSS v4

/* Delicate Ice to Medium Roast — https://swatchly.xyz/palette/b1d3e4-c3a7d2-7e916f-4f7c57-73412d-3b230d */
@theme {
  --color-delicate-ice: #b1d3e4;
  --color-delicate-ice-50: #ddf2fc;
  --color-delicate-ice-100: #cfe6f2;
  --color-delicate-ice-200: #b1d3e4;
  --color-delicate-ice-300: #a0becc;
  --color-delicate-ice-400: #81a0b0;
  --color-delicate-ice-500: #678796;
  --color-delicate-ice-600: #4f6e7c;
  --color-delicate-ice-700: #3c5866;
  --color-delicate-ice-800: #2e4652;
  --color-delicate-ice-900: #213640;
  --color-delicate-ice-950: #122229;
  --color-lilac-lace: #c3a7d2;
  --color-lilac-lace-50: #f7e8ff;
  --color-lilac-lace-100: #edd9f8;
  --color-lilac-lace-200: #d9c2e5;
  --color-lilac-lace-300: #c3a7d2;
  --color-lilac-lace-400: #a58bb4;
  --color-lilac-lace-500: #8c729a;
  --color-lilac-lace-600: #735a80;
  --color-lilac-lace-700: #5e4769;
  --color-lilac-lace-800: #4b3755;
  --color-lilac-lace-900: #3c2b45;
  --color-lilac-lace-950: #261a2c;
  --color-crispy-crunch: #7e916f;
  --color-crispy-crunch-50: #effae6;
  --color-crispy-crunch-100: #e5f2db;
  --color-crispy-crunch-200: #d0dfc5;
  --color-crispy-crunch-300: #b9caac;
  --color-crispy-crunch-400: #99ac8b;
  --color-crispy-crunch-500: #7e916f;
  --color-crispy-crunch-600: #637555;
  --color-crispy-crunch-700: #4d5e40;
  --color-crispy-crunch-800: #3b492f;
  --color-crispy-crunch-900: #2c3822;
  --color-crispy-crunch-950: #1a2313;
  --color-amazon: #4f7c57;
  --color-amazon-50: #e3fee6;
  --color-amazon-100: #d7f5db;
  --color-amazon-200: #c0e4c5;
  --color-amazon-300: #a7cfad;
  --color-amazon-400: #85b18c;
  --color-amazon-500: #699670;
  --color-amazon-600: #4f7c57;
  --color-amazon-700: #3a6342;
  --color-amazon-800: #2a4e31;
  --color-amazon-900: #1e3d24;
  --color-amazon-950: #102614;
  --color-noble-chocolate: #73412d;
  --color-noble-chocolate-50: #fff2ed;
  --color-noble-chocolate-100: #ffe5db;
  --color-noble-chocolate-200: #f8cbb9;
  --color-noble-chocolate-300: #e5b29e;
  --color-noble-chocolate-400: #c7907a;
  --color-noble-chocolate-500: #aa735e;
  --color-noble-chocolate-600: #8c5944;
  --color-noble-chocolate-700: #73412d;
  --color-noble-chocolate-800: #5a3323;
  --color-noble-chocolate-900: #472618;
  --color-noble-chocolate-950: #2d160c;
  --color-medium-roast: #3b230d;
  --color-medium-roast-50: #fff3e9;
  --color-medium-roast-100: #fbe7d7;
  --color-medium-roast-200: #ead3bf;
  --color-medium-roast-300: #d6bba6;
  --color-medium-roast-400: #b69982;
  --color-medium-roast-500: #997c64;
  --color-medium-roast-600: #7b604a;
  --color-medium-roast-700: #614935;
  --color-medium-roast-800: #493525;
  --color-medium-roast-900: #3b230d;
  --color-medium-roast-950: #20150c;
}