Café Noir to Veiling Waterfalls color palette

4C381DCafé Noir 6E4240Wine Cellar 569EA5Atlas Cedar 90B7BCSummit DBE4FFVeiling Waterfalls

About this palette

Café Noir to Veiling Waterfalls is a 5-color muted, cool, vintage palette: #4C381D (Café Noir), #6E4240 (Wine Cellar), #569EA5 (Atlas Cedar), #90B7BC (Summit), #DBE4FF (Veiling Waterfalls). It mixes brown, red, turquoise, blue tones and feels cool overall. The strongest text pairing is #4C381D on #DBE4FF with a contrast ratio of 8.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Café Noir	rgb(76, 56, 29)	hsl(34, 45%, 21%)
Wine Cellar	rgb(110, 66, 64)	hsl(3, 26%, 34%)
Atlas Cedar	rgb(86, 158, 165)	hsl(185, 31%, 49%)
Summit	rgb(144, 183, 188)	hsl(187, 25%, 65%)
Veiling Waterfalls	rgb(219, 228, 255)	hsl(225, 100%, 93%)

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.76:1 Very good#4C381D on #DBE4FF
Aa8.76:1 Very good#DBE4FF on #4C381D
Aa6.58:1 Good#6E4240 on #DBE4FF
Aa6.58:1 Good#DBE4FF on #6E4240
Aa5.12:1 Good#4C381D on #90B7BC
Aa5.12:1 Good#90B7BC on #4C381D
Aa3.85:1 Poor#6E4240 on #90B7BC
Aa3.85:1 Poor#90B7BC on #6E4240

Color blindness preview

CSS variables

/* Café Noir to Veiling Waterfalls — https://swatchly.xyz/palette/4c381d-6e4240-569ea5-90b7bc-dbe4ff */
:root {
  --caf-noir: #4c381d;
  --wine-cellar: #6e4240;
  --atlas-cedar: #569ea5;
  --summit: #90b7bc;
  --veiling-waterfalls: #dbe4ff;
}

Tailwind CSS v4

/* Café Noir to Veiling Waterfalls — https://swatchly.xyz/palette/4c381d-6e4240-569ea5-90b7bc-dbe4ff */
@theme {
  --color-caf-noir: #4c381d;
  --color-caf-noir-50: #fff3e5;
  --color-caf-noir-100: #f8e9d5;
  --color-caf-noir-200: #e7d4bd;
  --color-caf-noir-300: #d1bca2;
  --color-caf-noir-400: #b29b7e;
  --color-caf-noir-500: #957e62;
  --color-caf-noir-600: #796348;
  --color-caf-noir-700: #5f4c34;
  --color-caf-noir-800: #4c381d;
  --color-caf-noir-900: #392b1a;
  --color-caf-noir-950: #231a0d;
  --color-wine-cellar: #6e4240;
  --color-wine-cellar-50: #fff2f0;
  --color-wine-cellar-100: #ffe4e2;
  --color-wine-cellar-200: #f4cbc8;
  --color-wine-cellar-300: #dfb2af;
  --color-wine-cellar-400: #c1908d;
  --color-wine-cellar-500: #a47471;
  --color-wine-cellar-600: #865957;
  --color-wine-cellar-700: #6e4240;
  --color-wine-cellar-800: #563332;
  --color-wine-cellar-900: #432625;
  --color-wine-cellar-950: #2b1615;
  --color-atlas-cedar: #569ea5;
  --color-atlas-cedar-50: #e4fdff;
  --color-atlas-cedar-100: #cff8fc;
  --color-atlas-cedar-200: #b6e8ed;
  --color-atlas-cedar-300: #9ad4da;
  --color-atlas-cedar-400: #75b8be;
  --color-atlas-cedar-500: #569ea5;
  --color-atlas-cedar-600: #388188;
  --color-atlas-cedar-700: #20676d;
  --color-atlas-cedar-800: #0d5156;
  --color-atlas-cedar-900: #023e43;
  --color-atlas-cedar-950: #00262a;
  --color-summit: #90b7bc;
  --color-summit-50: #effdff;
  --color-summit-100: #e1f7fa;
  --color-summit-200: #cce7ea;
  --color-summit-300: #b4d3d7;
  --color-summit-400: #90b7bc;
  --color-summit-500: #73999d;
  --color-summit-600: #567b80;
  --color-summit-700: #406266;
  --color-summit-800: #2e4c50;
  --color-summit-900: #20393d;
  --color-summit-950: #112325;
  --color-veiling-waterfalls: #dbe4ff;
  --color-veiling-waterfalls-50: #eaefff;
  --color-veiling-waterfalls-100: #dbe4ff;
  --color-veiling-waterfalls-200: #cbd2e6;
  --color-veiling-waterfalls-300: #b5bcd3;
  --color-veiling-waterfalls-400: #969eb6;
  --color-veiling-waterfalls-500: #7b839c;
  --color-veiling-waterfalls-600: #636a81;
  --color-veiling-waterfalls-700: #4e5569;
  --color-veiling-waterfalls-800: #3c4254;
  --color-veiling-waterfalls-900: #2d3242;
  --color-veiling-waterfalls-950: #1b1f2a;
}