Very Coffee to Pastel Blue Color Palette

About this palette

Very Coffee to Pastel Blue is a 4-color palette: #604000 (Very Coffee), #9F454F (Eternal Flame), #00BBD4 (Caribbean Blue), #ACBFFF (Pastel Blue). It mixes brown, red, turquoise, blue tones and feels balanced overall. The strongest text pairing is #604000 on #ACBFFF with a contrast ratio of 5.22:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Very Coffee	rgb(96, 64, 0)	hsl(40, 100%, 19%)
Eternal Flame	rgb(159, 69, 79)	hsl(353, 39%, 45%)
Caribbean Blue	rgb(0, 187, 212)	hsl(187, 100%, 42%)
Pastel Blue	rgb(172, 191, 255)	hsl(226, 100%, 84%)

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.

Aa5.22:1 Good#604000 on #ACBFFF
Aa5.22:1 Good#ACBFFF on #604000
Aa4.06:1 Poor#604000 on #00BBD4
Aa4.06:1 Poor#00BBD4 on #604000
Aa3.39:1 Poor#9F454F on #ACBFFF
Aa3.39:1 Poor#ACBFFF on #9F454F

Color blindness preview

CSS variables

/* Very Coffee to Pastel Blue — https://swatchly.xyz/palette/604000-9f454f-00bbd4-acbfff */
:root {
  --very-coffee: #604000;
  --eternal-flame: #9f454f;
  --caribbean-blue: #00bbd4;
  --pastel-blue: #acbfff;
}

Tailwind CSS v4

/* Very Coffee to Pastel Blue — https://swatchly.xyz/palette/604000-9f454f-00bbd4-acbfff */
@theme {
  --color-very-coffee: #604000;
  --color-very-coffee-50: #fff3e3;
  --color-very-coffee-100: #ffe7c6;
  --color-very-coffee-200: #efd3aa;
  --color-very-coffee-300: #dcbc8e;
  --color-very-coffee-400: #c09d6a;
  --color-very-coffee-500: #a5824d;
  --color-very-coffee-600: #8a6934;
  --color-very-coffee-700: #725320;
  --color-very-coffee-800: #604000;
  --color-very-coffee-900: #493208;
  --color-very-coffee-950: #2f1e02;
  --color-eternal-flame: #9f454f;
  --color-eternal-flame-50: #fff1f2;
  --color-eternal-flame-100: #ffe2e3;
  --color-eternal-flame-200: #ffc4c7;
  --color-eternal-flame-300: #f9a2a8;
  --color-eternal-flame-400: #dc7e85;
  --color-eternal-flame-500: #be6169;
  --color-eternal-flame-600: #9f454f;
  --color-eternal-flame-700: #82333c;
  --color-eternal-flame-800: #69242d;
  --color-eternal-flame-900: #541921;
  --color-eternal-flame-950: #370d13;
  --color-caribbean-blue: #00bbd4;
  --color-caribbean-blue-50: #e8fbff;
  --color-caribbean-blue-100: #cdf7ff;
  --color-caribbean-blue-200: #90ecfe;
  --color-caribbean-blue-300: #68d8ed;
  --color-caribbean-blue-400: #00bbd4;
  --color-caribbean-blue-500: #009bb1;
  --color-caribbean-blue-600: #007d8e;
  --color-caribbean-blue-700: #006371;
  --color-caribbean-blue-800: #004d58;
  --color-caribbean-blue-900: #003b44;
  --color-caribbean-blue-950: #00242b;
  --color-pastel-blue: #acbfff;
  --color-pastel-blue-50: #f2f5ff;
  --color-pastel-blue-100: #e5ebff;
  --color-pastel-blue-200: #cad7ff;
  --color-pastel-blue-300: #acbfff;
  --color-pastel-blue-400: #8e9fdb;
  --color-pastel-blue-500: #7283bf;
  --color-pastel-blue-600: #5969a2;
  --color-pastel-blue-700: #445286;
  --color-pastel-blue-800: #343f6c;
  --color-pastel-blue-900: #263056;
  --color-pastel-blue-950: #161d38;
}