Pineapple to Veiling Waterfalls color palette

5E3F12Pineapple 2A1717Dark Orchestra 6EB7BCCastaway 008891Turkish Jade D9E4FFVeiling Waterfalls

About this palette

Pineapple to Veiling Waterfalls is a 5-color cool palette: #5E3F12 (Pineapple), #2A1717 (Dark Orchestra), #6EB7BC (Castaway), #008891 (Turkish Jade), #D9E4FF (Veiling Waterfalls). It mixes brown, gray, turquoise, blue tones and feels cool overall. The strongest text pairing is #2A1717 on #D9E4FF with a contrast ratio of 13.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pineapple	rgb(94, 63, 18)	hsl(36, 68%, 22%)
Dark Orchestra	rgb(42, 23, 23)	hsl(0, 29%, 13%)
Castaway	rgb(110, 183, 188)	hsl(184, 37%, 58%)
Turkish Jade	rgb(0, 136, 145)	hsl(184, 100%, 28%)
Veiling Waterfalls	rgb(217, 228, 255)	hsl(223, 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.

Aa13.37:1 Super#2A1717 on #D9E4FF
Aa13.37:1 Super#D9E4FF on #2A1717
Aa7.51:1 Very good#5E3F12 on #D9E4FF
Aa7.51:1 Very good#D9E4FF on #5E3F12
Aa7.43:1 Very good#2A1717 on #6EB7BC
Aa7.43:1 Very good#6EB7BC on #2A1717
Aa4.17:1 Poor#5E3F12 on #6EB7BC
Aa4.17:1 Poor#6EB7BC on #5E3F12

Color blindness preview

CSS variables

/* Pineapple to Veiling Waterfalls — https://swatchly.xyz/palette/5e3f12-2a1717-6eb7bc-008891-d9e4ff */
:root {
  --pineapple: #5e3f12;
  --dark-orchestra: #2a1717;
  --castaway: #6eb7bc;
  --turkish-jade: #008891;
  --veiling-waterfalls: #d9e4ff;
}

Tailwind CSS v4

/* Pineapple to Veiling Waterfalls — https://swatchly.xyz/palette/5e3f12-2a1717-6eb7bc-008891-d9e4ff */
@theme {
  --color-pineapple: #5e3f12;
  --color-pineapple-50: #fff3e5;
  --color-pineapple-100: #ffe7cb;
  --color-pineapple-200: #eed3b1;
  --color-pineapple-300: #dbbc96;
  --color-pineapple-400: #be9c72;
  --color-pineapple-500: #a48156;
  --color-pineapple-600: #89683d;
  --color-pineapple-700: #70522b;
  --color-pineapple-800: #5e3f12;
  --color-pineapple-900: #473112;
  --color-pineapple-950: #2e1e07;
  --color-dark-orchestra: #2a1717;
  --color-dark-orchestra-50: #fff1f1;
  --color-dark-orchestra-100: #f8e6e6;
  --color-dark-orchestra-200: #e6d2d1;
  --color-dark-orchestra-300: #d2bbba;
  --color-dark-orchestra-400: #b49b9a;
  --color-dark-orchestra-500: #987f7e;
  --color-dark-orchestra-600: #7c6464;
  --color-dark-orchestra-700: #634e4d;
  --color-dark-orchestra-800: #4e3b3b;
  --color-dark-orchestra-900: #3c2c2c;
  --color-dark-orchestra-950: #2a1717;
  --color-castaway: #6eb7bc;
  --color-castaway-50: #e5fdff;
  --color-castaway-100: #cef8fb;
  --color-castaway-200: #b5e8eb;
  --color-castaway-300: #98d4d8;
  --color-castaway-400: #6eb7bc;
  --color-castaway-500: #519a9e;
  --color-castaway-600: #337d82;
  --color-castaway-700: #1c6468;
  --color-castaway-800: #0a4e52;
  --color-castaway-900: #003c3f;
  --color-castaway-950: #002527;
  --color-turkish-jade: #008891;
  --color-turkish-jade-50: #ddfcff;
  --color-turkish-jade-100: #c0faff;
  --color-turkish-jade-200: #a5eaf0;
  --color-turkish-jade-300: #86d7df;
  --color-turkish-jade-400: #5bbbc3;
  --color-turkish-jade-500: #35a2aa;
  --color-turkish-jade-600: #008891;
  --color-turkish-jade-700: #006c73;
  --color-turkish-jade-800: #00545a;
  --color-turkish-jade-900: #004145;
  --color-turkish-jade-950: #00282c;
  --color-veiling-waterfalls: #d9e4ff;
  --color-veiling-waterfalls-50: #e9efff;
  --color-veiling-waterfalls-100: #d9e4ff;
  --color-veiling-waterfalls-200: #c9d2e6;
  --color-veiling-waterfalls-300: #b3bcd3;
  --color-veiling-waterfalls-400: #949eb6;
  --color-veiling-waterfalls-500: #7a849c;
  --color-veiling-waterfalls-600: #616a81;
  --color-veiling-waterfalls-700: #4d556a;
  --color-veiling-waterfalls-800: #3b4254;
  --color-veiling-waterfalls-900: #2c3242;
  --color-veiling-waterfalls-950: #1b1f2a;
}