Backroom Ember to Pacific Color Palette

About this palette

Backroom Ember to Pacific is a 5-color cool, vintage palette: #A39049 (Backroom Ember), #CD988B (Café Crème), #1D424D (Cold and Dark), #DADDFF (Icy Plains), #29656E (Pacific). It mixes yellow, red, blue, purple, turquoise tones and feels cool overall. The strongest text pairing is #1D424D on #DADDFF with a contrast ratio of 8.13:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Backroom Ember	rgb(163, 144, 73)	hsl(47, 38%, 46%)
Café Crème	rgb(205, 152, 139)	hsl(12, 40%, 67%)
Cold and Dark	rgb(29, 66, 77)	hsl(194, 45%, 21%)
Icy Plains	rgb(218, 221, 255)	hsl(235, 100%, 93%)
Pacific	rgb(41, 101, 110)	hsl(188, 46%, 30%)

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.13:1 Very good#1D424D on #DADDFF
Aa8.13:1 Very good#DADDFF on #1D424D
Aa4.96:1 Good#DADDFF on #29656E
Aa4.96:1 Good#29656E on #DADDFF
Aa4.36:1 Poor#CD988B on #1D424D
Aa4.36:1 Poor#1D424D on #CD988B
Aa3.43:1 Poor#A39049 on #1D424D
Aa3.43:1 Poor#1D424D on #A39049

Color blindness preview

CSS variables

/* Backroom Ember to Pacific — https://swatchly.xyz/palette/a39049-cd988b-1d424d-daddff-29656e */
:root {
  --backroom-ember: #a39049;
  --caf-cr-me: #cd988b;
  --cold-and-dark: #1d424d;
  --icy-plains: #daddff;
  --pacific: #29656e;
}

Tailwind CSS v4

/* Backroom Ember to Pacific — https://swatchly.xyz/palette/a39049-cd988b-1d424d-daddff-29656e */
@theme {
  --color-backroom-ember: #a39049;
  --color-backroom-ember-50: #fff7db;
  --color-backroom-ember-100: #fbefc5;
  --color-backroom-ember-200: #ebddac;
  --color-backroom-ember-300: #d8c88f;
  --color-backroom-ember-400: #bcaa68;
  --color-backroom-ember-500: #a39049;
  --color-backroom-ember-600: #86732b;
  --color-backroom-ember-700: #6c5b13;
  --color-backroom-ember-800: #554600;
  --color-backroom-ember-900: #413500;
  --color-backroom-ember-950: #282000;
  --color-caf-cr-me: #cd988b;
  --color-caf-cr-me-50: #fff4f2;
  --color-caf-cr-me-100: #ffe8e2;
  --color-caf-cr-me-200: #f9d0c6;
  --color-caf-cr-me-300: #e7b9ae;
  --color-caf-cr-me-400: #cd988b;
  --color-caf-cr-me-500: #af7c70;
  --color-caf-cr-me-600: #916155;
  --color-caf-cr-me-700: #764b40;
  --color-caf-cr-me-800: #5e382f;
  --color-caf-cr-me-900: #4a2a22;
  --color-caf-cr-me-950: #2f1813;
  --color-cold-and-dark: #1d424d;
  --color-cold-and-dark-50: #e7f9ff;
  --color-cold-and-dark-100: #d7f0f9;
  --color-cold-and-dark-200: #c0dde7;
  --color-cold-and-dark-300: #a4c6d2;
  --color-cold-and-dark-400: #81a6b2;
  --color-cold-and-dark-500: #648a96;
  --color-cold-and-dark-600: #4a6e79;
  --color-cold-and-dark-700: #355660;
  --color-cold-and-dark-800: #1d424d;
  --color-cold-and-dark-900: #1a3239;
  --color-cold-and-dark-950: #0e1e24;
  --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-pacific: #29656e;
  --color-pacific-50: #e1fbff;
  --color-pacific-100: #cef3f9;
  --color-pacific-200: #b6e2e9;
  --color-pacific-300: #9bcdd6;
  --color-pacific-400: #78b0b9;
  --color-pacific-500: #5b959f;
  --color-pacific-600: #417b84;
  --color-pacific-700: #29656e;
  --color-pacific-800: #1d4f57;
  --color-pacific-900: #113d44;
  --color-pacific-950: #06272b;
}