Veiling Waterfalls to Pineapple color palette

CEECFFVeiling Waterfalls 84CEFFClear Sky B98660Deer 1583D7Soothing Sapphire 825004Milk Chocolate 5E3D0DPineapple

Open in generator Export PNG, PDF, ASE…

About this palette

Veiling Waterfalls to Pineapple is a 6-color vintage palette: #CEECFF (Veiling Waterfalls), #84CEFF (Clear Sky), #B98660 (Deer), #1583D7 (Soothing Sapphire), #825004 (Milk Chocolate), #5E3D0D (Pineapple). It mixes blue, orange, brown tones and feels balanced overall. The strongest text pairing is #CEECFF on #5E3D0D with a contrast ratio of 7.94:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Veiling Waterfalls	rgb(206, 236, 255)	hsl(203, 100%, 90%)
Clear Sky	rgb(132, 206, 255)	hsl(204, 100%, 76%)
Deer	rgb(185, 134, 96)	hsl(26, 39%, 55%)
Soothing Sapphire	rgb(21, 131, 215)	hsl(206, 82%, 46%)
Milk Chocolate	rgb(130, 80, 4)	hsl(36, 94%, 26%)
Pineapple	rgb(94, 61, 13)	hsl(36, 76%, 21%)

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.

Aa7.94:1 Very good#CEECFF on #5E3D0D
Aa7.94:1 Very good#5E3D0D on #CEECFF
Aa5.70:1 Good#84CEFF on #5E3D0D
Aa5.70:1 Good#5E3D0D on #84CEFF
Aa5.51:1 Good#CEECFF on #825004
Aa5.51:1 Good#825004 on #CEECFF
Aa3.95:1 Poor#84CEFF on #825004
Aa3.95:1 Poor#825004 on #84CEFF

Color blindness preview

CSS variables

/* Veiling Waterfalls to Pineapple — https://swatchly.xyz/palette/ceecff-84ceff-b98660-1583d7-825004-5e3d0d */
:root {
  --veiling-waterfalls: #ceecff;
  --clear-sky: #84ceff;
  --deer: #b98660;
  --soothing-sapphire: #1583d7;
  --milk-chocolate: #825004;
  --pineapple: #5e3d0d;
}

Tailwind CSS v4

/* Veiling Waterfalls to Pineapple — https://swatchly.xyz/palette/ceecff-84ceff-b98660-1583d7-825004-5e3d0d */
@theme {
  --color-veiling-waterfalls: #ceecff;
  --color-veiling-waterfalls-50: #e4f4ff;
  --color-veiling-waterfalls-100: #ceecff;
  --color-veiling-waterfalls-200: #c1d8e6;
  --color-veiling-waterfalls-300: #a9c2d2;
  --color-veiling-waterfalls-400: #89a4b5;
  --color-veiling-waterfalls-500: #6e899a;
  --color-veiling-waterfalls-600: #556f7f;
  --color-veiling-waterfalls-700: #415968;
  --color-veiling-waterfalls-800: #304552;
  --color-veiling-waterfalls-900: #243540;
  --color-veiling-waterfalls-950: #142129;
  --color-clear-sky: #84ceff;
  --color-clear-sky-50: #eff8ff;
  --color-clear-sky-100: #ddf1ff;
  --color-clear-sky-200: #b6e1ff;
  --color-clear-sky-300: #84ceff;
  --color-clear-sky-400: #68adda;
  --color-clear-sky-500: #4791bf;
  --color-clear-sky-600: #2a75a1;
  --color-clear-sky-700: #125c84;
  --color-clear-sky-800: #01486b;
  --color-clear-sky-900: #003753;
  --color-clear-sky-950: #002236;
  --color-deer: #b98660;
  --color-deer-50: #fff5ef;
  --color-deer-100: #ffecde;
  --color-deer-200: #fcd6ba;
  --color-deer-300: #ecc0a0;
  --color-deer-400: #d2a17d;
  --color-deer-500: #b98660;
  --color-deer-600: #9a6944;
  --color-deer-700: #7e512e;
  --color-deer-800: #643d1e;
  --color-deer-900: #4e2d12;
  --color-deer-950: #321a07;
  --color-soothing-sapphire: #1583d7;
  --color-soothing-sapphire-50: #ebf5ff;
  --color-soothing-sapphire-100: #d8ebff;
  --color-soothing-sapphire-200: #b2d8ff;
  --color-soothing-sapphire-300: #83c2ff;
  --color-soothing-sapphire-400: #42a1f5;
  --color-soothing-sapphire-500: #1583d7;
  --color-soothing-sapphire-600: #0069b2;
  --color-soothing-sapphire-700: #00538f;
  --color-soothing-sapphire-800: #004172;
  --color-soothing-sapphire-900: #00325a;
  --color-soothing-sapphire-950: #001f3b;
  --color-milk-chocolate: #825004;
  --color-milk-chocolate-50: #fff3e6;
  --color-milk-chocolate-100: #ffe7cd;
  --color-milk-chocolate-200: #fbd0a4;
  --color-milk-chocolate-300: #e9ba86;
  --color-milk-chocolate-400: #ce9a60;
  --color-milk-chocolate-500: #b47f41;
  --color-milk-chocolate-600: #996626;
  --color-milk-chocolate-700: #825004;
  --color-milk-chocolate-800: #673e00;
  --color-milk-chocolate-900: #502f00;
  --color-milk-chocolate-950: #341c00;
  --color-pineapple: #5e3d0d;
  --color-pineapple-50: #fff3e5;
  --color-pineapple-100: #ffe7cb;
  --color-pineapple-200: #f0d2b0;
  --color-pineapple-300: #dcbb94;
  --color-pineapple-400: #c09b70;
  --color-pineapple-500: #a58053;
  --color-pineapple-600: #89663b;
  --color-pineapple-700: #705028;
  --color-pineapple-800: #5e3d0d;
  --color-pineapple-900: #472f0f;
  --color-pineapple-950: #2e1d06;
}