Café Noir to Sky Color Palette

About this palette

Café Noir to Sky is a 5-color cool, vintage palette: #4C3824 (Café Noir), #246180 (Blue Velvet), #507B96 (Beach View), #C8A886 (Semolina), #89D7FF (Sky). It mixes brown, blue, orange tones and feels cool overall. The strongest text pairing is #4C3824 on #89D7FF with a contrast ratio of 6.97:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Café Noir	rgb(76, 56, 36)	hsl(30, 36%, 22%)
Blue Velvet	rgb(36, 97, 128)	hsl(200, 56%, 32%)
Beach View	rgb(80, 123, 150)	hsl(203, 30%, 45%)
Semolina	rgb(200, 168, 134)	hsl(31, 37%, 65%)
Sky	rgb(137, 215, 255)	hsl(200, 100%, 77%)

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.

Aa6.97:1 Good#4C3824 on #89D7FF
Aa6.97:1 Good#89D7FF on #4C3824
Aa4.95:1 Good#4C3824 on #C8A886
Aa4.95:1 Good#C8A886 on #4C3824
Aa4.27:1 Poor#246180 on #89D7FF
Aa4.27:1 Poor#89D7FF on #246180
Aa3.04:1 Poor#246180 on #C8A886
Aa3.04:1 Poor#C8A886 on #246180

Color blindness preview

CSS variables

/* Café Noir to Sky — https://swatchly.xyz/palette/4c3824-246180-507b96-c8a886-89d7ff */
:root {
  --caf-noir: #4c3824;
  --blue-velvet: #246180;
  --beach-view: #507b96;
  --semolina: #c8a886;
  --sky: #89d7ff;
}

Tailwind CSS v4

/* Café Noir to Sky — https://swatchly.xyz/palette/4c3824-246180-507b96-c8a886-89d7ff */
@theme {
  --color-caf-noir: #4c3824;
  --color-caf-noir-50: #fff3e7;
  --color-caf-noir-100: #f8e8d9;
  --color-caf-noir-200: #e7d4c2;
  --color-caf-noir-300: #d1bca8;
  --color-caf-noir-400: #b29b85;
  --color-caf-noir-500: #957e68;
  --color-caf-noir-600: #78634e;
  --color-caf-noir-700: #5f4c3a;
  --color-caf-noir-800: #4c3824;
  --color-caf-noir-900: #392b1e;
  --color-caf-noir-950: #231a10;
  --color-blue-velvet: #246180;
  --color-blue-velvet-50: #ebf7ff;
  --color-blue-velvet-100: #d6f0ff;
  --color-blue-velvet-200: #b3e0fa;
  --color-blue-velvet-300: #98cbe8;
  --color-blue-velvet-400: #74accd;
  --color-blue-velvet-500: #5792b3;
  --color-blue-velvet-600: #3d7797;
  --color-blue-velvet-700: #246180;
  --color-blue-velvet-800: #194c65;
  --color-blue-velvet-900: #0e3a50;
  --color-blue-velvet-950: #052534;
  --color-beach-view: #507b96;
  --color-beach-view-50: #ebf7ff;
  --color-beach-view-100: #dbf1ff;
  --color-beach-view-200: #c0e0f6;
  --color-beach-view-300: #a7cce5;
  --color-beach-view-400: #85aeca;
  --color-beach-view-500: #6994b0;
  --color-beach-view-600: #507b96;
  --color-beach-view-700: #3a627b;
  --color-beach-view-800: #294d62;
  --color-beach-view-900: #1c3b4d;
  --color-beach-view-950: #0e2432;
  --color-semolina: #c8a886;
  --color-semolina-50: #fff9f2;
  --color-semolina-100: #ffefdf;
  --color-semolina-200: #f3dcc4;
  --color-semolina-300: #e1c7ab;
  --color-semolina-400: #c8a886;
  --color-semolina-500: #a98a6a;
  --color-semolina-600: #8b6e4d;
  --color-semolina-700: #705538;
  --color-semolina-800: #584127;
  --color-semolina-900: #44301a;
  --color-semolina-950: #2a1c0d;
  --color-sky: #89d7ff;
  --color-sky-50: #f6fcff;
  --color-sky-100: #e5f6ff;
  --color-sky-200: #bde8ff;
  --color-sky-300: #89d7ff;
  --color-sky-400: #6db4d9;
  --color-sky-500: #4997bc;
  --color-sky-600: #297a9e;
  --color-sky-700: #0e6081;
  --color-sky-800: #004a66;
  --color-sky-900: #00384e;
  --color-sky-950: #002332;
}