Start generating

Castaway to Very Coffee color palette

5FBBBBCastaway161C27Satin Deep Black9D726EEquestrienneFFF3F3Ivory Tower5D4512Very Coffee
Open in generator Export PNG, PDF, ASE…

About this palette

Castaway to Very Coffee is a 5-color muted, vintage palette: #5FBBBB (Castaway), #161C27 (Satin Deep Black), #9D726E (Equestrienne), #FFF3F3 (Ivory Tower), #5D4512 (Very Coffee). It mixes turquoise, gray, red, white, brown tones and feels warm overall. The strongest text pairing is #161C27 on #FFF3F3 with a contrast ratio of 15.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Castawayrgb(95, 187, 187)hsl(180, 40%, 55%)
Satin Deep Blackrgb(22, 28, 39)hsl(219, 28%, 12%)
Equestriennergb(157, 114, 110)hsl(5, 19%, 52%)
Ivory Towerrgb(255, 243, 243)hsl(0, 100%, 98%)
Very Coffeergb(93, 69, 18)hsl(41, 68%, 22%)

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.

  • Aa15.75:1 Super#161C27 on #FFF3F3
  • Aa15.75:1 Super#FFF3F3 on #161C27
  • Aa8.33:1 Very good#FFF3F3 on #5D4512
  • Aa8.33:1 Very good#5D4512 on #FFF3F3
  • Aa7.57:1 Very good#5FBBBB on #161C27
  • Aa7.57:1 Very good#161C27 on #5FBBBB
  • Aa4.12:1 Poor#161C27 on #9D726E
  • Aa4.12:1 Poor#9D726E on #161C27

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia

CSS variables

/* Castaway to Very Coffee — https://swatchly.xyz/palette/5fbbbb-161c27-9d726e-fff3f3-5d4512 */
:root {
  --castaway: #5fbbbb;
  --satin-deep-black: #161c27;
  --equestrienne: #9d726e;
  --ivory-tower: #fff3f3;
  --very-coffee: #5d4512;
}

Tailwind CSS v4

/* Castaway to Very Coffee — https://swatchly.xyz/palette/5fbbbb-161c27-9d726e-fff3f3-5d4512 */
@theme {
  --color-castaway: #5fbbbb;
  --color-castaway-50: #e1ffff;
  --color-castaway-100: #c8fbfa;
  --color-castaway-200: #adebea;
  --color-castaway-300: #8fd7d7;
  --color-castaway-400: #5fbbbb;
  --color-castaway-500: #409d9d;
  --color-castaway-600: #1a8081;
  --color-castaway-700: #006667;
  --color-castaway-800: #004f50;
  --color-castaway-900: #003d3d;
  --color-castaway-950: #002525;
  --color-satin-deep-black: #161c27;
  --color-satin-deep-black-50: #f0f5fe;
  --color-satin-deep-black-100: #e6ebf5;
  --color-satin-deep-black-200: #d1d8e3;
  --color-satin-deep-black-300: #bac1ce;
  --color-satin-deep-black-400: #9aa2b0;
  --color-satin-deep-black-500: #7e8694;
  --color-satin-deep-black-600: #636b78;
  --color-satin-deep-black-700: #4d5460;
  --color-satin-deep-black-800: #3a404a;
  --color-satin-deep-black-900: #2b3039;
  --color-satin-deep-black-950: #161c27;
  --color-equestrienne: #9d726e;
  --color-equestrienne-50: #fff0ee;
  --color-equestrienne-100: #ffe0dd;
  --color-equestrienne-200: #eec9c6;
  --color-equestrienne-300: #d9b0ac;
  --color-equestrienne-400: #ba8e8a;
  --color-equestrienne-500: #9d726e;
  --color-equestrienne-600: #825a56;
  --color-equestrienne-700: #6a4643;
  --color-equestrienne-800: #553633;
  --color-equestrienne-900: #432926;
  --color-equestrienne-950: #2b1817;
  --color-ivory-tower: #fff3f3;
  --color-ivory-tower-50: #fff3f3;
  --color-ivory-tower-100: #f1eaea;
  --color-ivory-tower-200: #ded6d6;
  --color-ivory-tower-300: #c8bfbf;
  --color-ivory-tower-400: #a99f9f;
  --color-ivory-tower-500: #8e8383;
  --color-ivory-tower-600: #736969;
  --color-ivory-tower-700: #5c5353;
  --color-ivory-tower-800: #484040;
  --color-ivory-tower-900: #383131;
  --color-ivory-tower-950: #231e1e;
  --color-very-coffee: #5d4512;
  --color-very-coffee-50: #fff4e0;
  --color-very-coffee-100: #fbe9ca;
  --color-very-coffee-200: #ead5af;
  --color-very-coffee-300: #d7bf95;
  --color-very-coffee-400: #baa071;
  --color-very-coffee-500: #a08655;
  --color-very-coffee-600: #866d3d;
  --color-very-coffee-700: #6f572a;
  --color-very-coffee-800: #5d4512;
  --color-very-coffee-900: #473511;
  --color-very-coffee-950: #2e2106;
}

Similar palettes