Cola to Blue Silk Color Palette

About this palette

Cola to Blue Silk is a 5-color muted palette: #3F3022 (Cola), #6A5B43 (Baby Bear), #7E899B (Roman Silver), #A1BCD1 (Gentle Sky), #D0DDEA (Blue Silk). It mixes gray, brown, blue tones and feels balanced overall. The strongest text pairing is #3F3022 on #D0DDEA with a contrast ratio of 9.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cola	rgb(63, 48, 34)	hsl(29, 30%, 19%)
Baby Bear	rgb(106, 91, 67)	hsl(37, 23%, 34%)
Roman Silver	rgb(126, 137, 155)	hsl(217, 13%, 55%)
Gentle Sky	rgb(161, 188, 209)	hsl(206, 34%, 73%)
Blue Silk	rgb(208, 221, 234)	hsl(210, 38%, 87%)

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.

Aa9.18:1 Very good#3F3022 on #D0DDEA
Aa9.18:1 Very good#D0DDEA on #3F3022
Aa6.41:1 Good#3F3022 on #A1BCD1
Aa6.41:1 Good#A1BCD1 on #3F3022
Aa4.77:1 Good#6A5B43 on #D0DDEA
Aa4.77:1 Good#D0DDEA on #6A5B43
Aa3.58:1 Poor#3F3022 on #7E899B
Aa3.58:1 Poor#7E899B on #3F3022

Color blindness preview

CSS variables

/* Cola to Blue Silk — https://swatchly.xyz/palette/3f3022-6a5b43-7e899b-a1bcd1-d0ddea */
:root {
  --cola: #3f3022;
  --baby-bear: #6a5b43;
  --roman-silver: #7e899b;
  --gentle-sky: #a1bcd1;
  --blue-silk: #d0ddea;
}

Tailwind CSS v4

/* Cola to Blue Silk — https://swatchly.xyz/palette/3f3022-6a5b43-7e899b-a1bcd1-d0ddea */
@theme {
  --color-cola: #3f3022;
  --color-cola-50: #fef3e9;
  --color-cola-100: #f5e9de;
  --color-cola-200: #e3d5c8;
  --color-cola-300: #cebeaf;
  --color-cola-400: #b09e8e;
  --color-cola-500: #948373;
  --color-cola-600: #796959;
  --color-cola-700: #625245;
  --color-cola-800: #4d4034;
  --color-cola-900: #3f3022;
  --color-cola-950: #261e17;
  --color-baby-bear: #6a5b43;
  --color-baby-bear-50: #fdf4e5;
  --color-baby-bear-100: #f4ead9;
  --color-baby-bear-200: #e4d7c3;
  --color-baby-bear-300: #d0c2ac;
  --color-baby-bear-400: #b3a48b;
  --color-baby-bear-500: #9a8a70;
  --color-baby-bear-600: #807058;
  --color-baby-bear-700: #6a5b43;
  --color-baby-bear-800: #534733;
  --color-baby-bear-900: #413625;
  --color-baby-bear-950: #292115;
  --color-roman-silver: #7e899b;
  --color-roman-silver-50: #f0f6ff;
  --color-roman-silver-100: #e5ecf9;
  --color-roman-silver-200: #d0d9e8;
  --color-roman-silver-300: #b9c3d3;
  --color-roman-silver-400: #99a4b6;
  --color-roman-silver-500: #7e899b;
  --color-roman-silver-600: #646e7f;
  --color-roman-silver-700: #4e5767;
  --color-roman-silver-800: #3c4451;
  --color-roman-silver-900: #2d343f;
  --color-roman-silver-950: #1b2028;
  --color-gentle-sky: #a1bcd1;
  --color-gentle-sky-50: #e4f3ff;
  --color-gentle-sky-100: #d6e8f6;
  --color-gentle-sky-200: #bed3e4;
  --color-gentle-sky-300: #a1bcd1;
  --color-gentle-sky-400: #849eb2;
  --color-gentle-sky-500: #6b8498;
  --color-gentle-sky-600: #536b7e;
  --color-gentle-sky-700: #405666;
  --color-gentle-sky-800: #304452;
  --color-gentle-sky-900: #243541;
  --color-gentle-sky-950: #15212a;
  --color-blue-silk: #d0ddea;
  --color-blue-silk-50: #f2f9ff;
  --color-blue-silk-100: #e8eff7;
  --color-blue-silk-200: #d0ddea;
  --color-blue-silk-300: #bbc5d0;
  --color-blue-silk-400: #9aa5b1;
  --color-blue-silk-500: #7e8995;
  --color-blue-silk-600: #636e7a;
  --color-blue-silk-700: #4d5761;
  --color-blue-silk-800: #3b434c;
  --color-blue-silk-900: #2c343b;
  --color-blue-silk-950: #1b2025;
}