Start generating

Gentle Cold to Black Box color palette

BFEEE5Gentle ColdEEAAA6Calabrese4BB0E7ThalassophileA46B68Rustling Leaves065B4AEvergreen002837Black Box
Open in generator Export PNG, PDF, ASE…

About this palette

Gentle Cold to Black Box is a 6-color cool palette: #BFEEE5 (Gentle Cold), #EEAAA6 (Calabrese), #4BB0E7 (Thalassophile), #A46B68 (Rustling Leaves), #065B4A (Evergreen), #002837 (Black Box). It mixes turquoise, pink, blue, red tones and feels cool overall. The strongest text pairing is #BFEEE5 on #002837 with a contrast ratio of 12.20:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Gentle Coldrgb(191, 238, 229)hsl(169, 58%, 84%)
Calabresergb(238, 170, 166)hsl(3, 68%, 79%)
Thalassophilergb(75, 176, 231)hsl(201, 76%, 60%)
Rustling Leavesrgb(164, 107, 104)hsl(3, 25%, 53%)
Evergreenrgb(6, 91, 74)hsl(168, 88%, 19%)
Black Boxrgb(0, 40, 55)hsl(196, 100%, 11%)

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.

  • Aa12.20:1 Super#BFEEE5 on #002837
  • Aa12.20:1 Super#002837 on #BFEEE5
  • Aa8.05:1 Very good#EEAAA6 on #002837
  • Aa8.05:1 Very good#002837 on #EEAAA6
  • Aa6.38:1 Good#4BB0E7 on #002837
  • Aa6.38:1 Good#002837 on #4BB0E7
  • Aa6.37:1 Good#BFEEE5 on #065B4A
  • Aa6.37:1 Good#065B4A on #BFEEE5

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Gentle Cold to Black Box — https://swatchly.xyz/palette/bfeee5-eeaaa6-4bb0e7-a46b68-065b4a-002837 */
:root {
  --gentle-cold: #bfeee5;
  --calabrese: #eeaaa6;
  --thalassophile: #4bb0e7;
  --rustling-leaves: #a46b68;
  --evergreen: #065b4a;
  --black-box: #002837;
}

Tailwind CSS v4

/* Gentle Cold to Black Box — https://swatchly.xyz/palette/bfeee5-eeaaa6-4bb0e7-a46b68-065b4a-002837 */
@theme {
  --color-gentle-cold: #bfeee5;
  --color-gentle-cold-50: #d9f5ef;
  --color-gentle-cold-100: #bfeee5;
  --color-gentle-cold-200: #b6d9d2;
  --color-gentle-cold-300: #9dc5bd;
  --color-gentle-cold-400: #7ca8a0;
  --color-gentle-cold-500: #628e86;
  --color-gentle-cold-600: #4a746d;
  --color-gentle-cold-700: #375e57;
  --color-gentle-cold-800: #274a44;
  --color-gentle-cold-900: #1b3934;
  --color-gentle-cold-950: #0e2420;
  --color-calabrese: #eeaaa6;
  --color-calabrese-50: #fff0ee;
  --color-calabrese-100: #ffe1df;
  --color-calabrese-200: #fbc6c3;
  --color-calabrese-300: #eeaaa6;
  --color-calabrese-400: #cc8c89;
  --color-calabrese-500: #b0716e;
  --color-calabrese-600: #935855;
  --color-calabrese-700: #794341;
  --color-calabrese-800: #613231;
  --color-calabrese-900: #4d2524;
  --color-calabrese-950: #321615;
  --color-thalassophile: #4bb0e7;
  --color-thalassophile-50: #eef8ff;
  --color-thalassophile-100: #dbf1ff;
  --color-thalassophile-200: #b2e1ff;
  --color-thalassophile-300: #7fcefe;
  --color-thalassophile-400: #4bb0e7;
  --color-thalassophile-500: #2893c8;
  --color-thalassophile-600: #0077a7;
  --color-thalassophile-700: #005e86;
  --color-thalassophile-800: #004969;
  --color-thalassophile-900: #003852;
  --color-thalassophile-950: #002234;
  --color-rustling-leaves: #a46b68;
  --color-rustling-leaves-50: #ffefee;
  --color-rustling-leaves-100: #ffdfdd;
  --color-rustling-leaves-200: #f6c4c1;
  --color-rustling-leaves-300: #e1aaa7;
  --color-rustling-leaves-400: #c28884;
  --color-rustling-leaves-500: #a46b68;
  --color-rustling-leaves-600: #885351;
  --color-rustling-leaves-700: #6f403e;
  --color-rustling-leaves-800: #5a312f;
  --color-rustling-leaves-900: #472523;
  --color-rustling-leaves-950: #2f1615;
  --color-evergreen: #065b4a;
  --color-evergreen-50: #d9fff3;
  --color-evergreen-100: #cbf6e9;
  --color-evergreen-200: #afe3d3;
  --color-evergreen-300: #90cdba;
  --color-evergreen-400: #68ad99;
  --color-evergreen-500: #49907d;
  --color-evergreen-600: #2d7361;
  --color-evergreen-700: #065b4a;
  --color-evergreen-800: #0a4739;
  --color-evergreen-900: #03372c;
  --color-evergreen-950: #01221a;
  --color-black-box: #002837;
  --color-black-box-50: #e9f8ff;
  --color-black-box-100: #d7f0fc;
  --color-black-box-200: #bfddeb;
  --color-black-box-300: #a5c7d7;
  --color-black-box-400: #82a8ba;
  --color-black-box-500: #678ea0;
  --color-black-box-600: #4e7485;
  --color-black-box-700: #3b5d6d;
  --color-black-box-800: #2c4a58;
  --color-black-box-900: #203b47;
  --color-black-box-950: #002837;
}

Similar palettes