Himalayan Salt to Black Chocolate Color Palette

About this palette

Himalayan Salt to Black Chocolate is a 4-color vintage palette: #C5725E (Himalayan Salt), #006456 (Philodendron), #A8CCF7 (Baby Blue), #451306 (Black Chocolate). It mixes red, turquoise, blue, brown tones and feels balanced overall. The strongest text pairing is #A8CCF7 on #451306 with a contrast ratio of 9.38:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Himalayan Salt	rgb(197, 114, 94)	hsl(12, 47%, 57%)
Philodendron	rgb(0, 100, 86)	hsl(172, 100%, 20%)
Baby Blue	rgb(168, 204, 247)	hsl(213, 83%, 81%)
Black Chocolate	rgb(69, 19, 6)	hsl(12, 84%, 15%)

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.38:1 Very good#A8CCF7 on #451306
Aa9.38:1 Very good#451306 on #A8CCF7
Aa4.41:1 Poor#C5725E on #451306
Aa4.41:1 Poor#451306 on #C5725E
Aa4.28:1 Poor#006456 on #A8CCF7
Aa4.28:1 Poor#A8CCF7 on #006456

Color blindness preview

CSS variables

/* Himalayan Salt to Black Chocolate — https://swatchly.xyz/palette/c5725e-006456-a8ccf7-451306 */
:root {
  --himalayan-salt: #c5725e;
  --philodendron: #006456;
  --baby-blue: #a8ccf7;
  --black-chocolate: #451306;
}

Tailwind CSS v4

/* Himalayan Salt to Black Chocolate — https://swatchly.xyz/palette/c5725e-006456-a8ccf7-451306 */
@theme {
  --color-himalayan-salt: #c5725e;
  --color-himalayan-salt-50: #fff3f0;
  --color-himalayan-salt-100: #ffe7e1;
  --color-himalayan-salt-200: #ffcdc1;
  --color-himalayan-salt-300: #fab09d;
  --color-himalayan-salt-400: #df8e7a;
  --color-himalayan-salt-500: #c5725e;
  --color-himalayan-salt-600: #a65744;
  --color-himalayan-salt-700: #894030;
  --color-himalayan-salt-800: #6e2f20;
  --color-himalayan-salt-900: #572215;
  --color-himalayan-salt-950: #391209;
  --color-philodendron: #006456;
  --color-philodendron-50: #d8fff5;
  --color-philodendron-100: #c8f7ec;
  --color-philodendron-200: #ace5d8;
  --color-philodendron-300: #8ed0c1;
  --color-philodendron-400: #67b2a2;
  --color-philodendron-500: #479787;
  --color-philodendron-600: #2a7b6d;
  --color-philodendron-700: #006456;
  --color-philodendron-800: #014e43;
  --color-philodendron-900: #003c33;
  --color-philodendron-950: #002620;
  --color-baby-blue: #a8ccf7;
  --color-baby-blue-50: #f5faff;
  --color-baby-blue-100: #e7f2ff;
  --color-baby-blue-200: #c7e1ff;
  --color-baby-blue-300: #a8ccf7;
  --color-baby-blue-400: #8aabd2;
  --color-baby-blue-500: #6c8eb6;
  --color-baby-blue-600: #517298;
  --color-baby-blue-700: #3c597c;
  --color-baby-blue-800: #2b4563;
  --color-baby-blue-900: #1e344d;
  --color-baby-blue-950: #102032;
  --color-black-chocolate: #451306;
  --color-black-chocolate-50: #fff2ee;
  --color-black-chocolate-100: #ffe5dd;
  --color-black-chocolate-200: #fccabd;
  --color-black-chocolate-300: #e9b2a3;
  --color-black-chocolate-400: #cd9180;
  --color-black-chocolate-500: #b27666;
  --color-black-chocolate-600: #975d4e;
  --color-black-chocolate-700: #7d493b;
  --color-black-chocolate-800: #67392d;
  --color-black-chocolate-900: #542c21;
  --color-black-chocolate-950: #451306;
}