Delicate Ice to Graphite color palette

B7D3E3Delicate Ice BEAB9DMushroom 7C788CFlying Carpet 5F4937Black Power 33341EGraphite

About this palette

Delicate Ice to Graphite is a 5-color muted, gradient palette: #B7D3E3 (Delicate Ice), #BEAB9D (Mushroom), #7C788C (Flying Carpet), #5F4937 (Black Power), #33341E (Graphite). It mixes blue, gray, brown tones and feels warm overall. The strongest text pairing is #B7D3E3 on #33341E with a contrast ratio of 8.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Delicate Ice	rgb(183, 211, 227)	hsl(202, 44%, 80%)
Mushroom	rgb(190, 171, 157)	hsl(25, 20%, 68%)
Flying Carpet	rgb(124, 120, 140)	hsl(252, 8%, 51%)
Black Power	rgb(95, 73, 55)	hsl(27, 27%, 29%)
Graphite	rgb(51, 52, 30)	hsl(63, 27%, 16%)

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.14:1 Very good#B7D3E3 on #33341E
Aa8.14:1 Very good#33341E on #B7D3E3
Aa5.76:1 Good#BEAB9D on #33341E
Aa5.76:1 Good#33341E on #BEAB9D
Aa5.39:1 Good#B7D3E3 on #5F4937
Aa5.39:1 Good#5F4937 on #B7D3E3
Aa3.81:1 Poor#BEAB9D on #5F4937
Aa3.81:1 Poor#5F4937 on #BEAB9D

Color blindness preview

CSS variables

/* Delicate Ice to Graphite — https://swatchly.xyz/palette/b7d3e3-beab9d-7c788c-5f4937-33341e */
:root {
  --delicate-ice: #b7d3e3;
  --mushroom: #beab9d;
  --flying-carpet: #7c788c;
  --black-power: #5f4937;
  --graphite: #33341e;
}

Tailwind CSS v4

/* Delicate Ice to Graphite — https://swatchly.xyz/palette/b7d3e3-beab9d-7c788c-5f4937-33341e */
@theme {
  --color-delicate-ice: #b7d3e3;
  --color-delicate-ice-50: #e1f2fc;
  --color-delicate-ice-100: #d4e7f2;
  --color-delicate-ice-200: #b7d3e3;
  --color-delicate-ice-300: #a5bdcb;
  --color-delicate-ice-400: #86a0af;
  --color-delicate-ice-500: #6c8695;
  --color-delicate-ice-600: #546d7b;
  --color-delicate-ice-700: #415864;
  --color-delicate-ice-800: #324551;
  --color-delicate-ice-900: #25353f;
  --color-delicate-ice-950: #152128;
  --color-mushroom: #beab9d;
  --color-mushroom-50: #fff9f4;
  --color-mushroom-100: #fcf0e8;
  --color-mushroom-200: #ecded4;
  --color-mushroom-300: #d9c9be;
  --color-mushroom-400: #beab9d;
  --color-mushroom-500: #9f8d80;
  --color-mushroom-600: #827063;
  --color-mushroom-700: #68584c;
  --color-mushroom-800: #514339;
  --color-mushroom-900: #3e3229;
  --color-mushroom-950: #261d17;
  --color-flying-carpet: #7c788c;
  --color-flying-carpet-50: #f3f1fe;
  --color-flying-carpet-100: #e8e5f3;
  --color-flying-carpet-200: #d2cfe0;
  --color-flying-carpet-300: #bab6c9;
  --color-flying-carpet-400: #9995a9;
  --color-flying-carpet-500: #7c788c;
  --color-flying-carpet-600: #646073;
  --color-flying-carpet-700: #4f4c5c;
  --color-flying-carpet-800: #3e3b4a;
  --color-flying-carpet-900: #302e3a;
  --color-flying-carpet-950: #1e1c25;
  --color-black-power: #5f4937;
  --color-black-power-50: #fff3e9;
  --color-black-power-100: #f9e8db;
  --color-black-power-200: #e6d2c2;
  --color-black-power-300: #d0b9a8;
  --color-black-power-400: #b19885;
  --color-black-power-500: #947c68;
  --color-black-power-600: #77614e;
  --color-black-power-700: #5f4937;
  --color-black-power-800: #4a392b;
  --color-black-power-900: #392b1f;
  --color-black-power-950: #241a11;
  --color-graphite: #33341e;
  --color-graphite-50: #f5f7e8;
  --color-graphite-100: #ebeddc;
  --color-graphite-200: #d8d9c5;
  --color-graphite-300: #c1c3ad;
  --color-graphite-400: #a2a48b;
  --color-graphite-500: #87886f;
  --color-graphite-600: #6c6e56;
  --color-graphite-700: #555741;
  --color-graphite-800: #424331;
  --color-graphite-900: #33341e;
  --color-graphite-950: #1f2014;
}