Veiling Waterfalls to Nautilus Color Palette

About this palette

Veiling Waterfalls to Nautilus is a 5-color warm, earthy, vintage palette: #D8E7FF (Veiling Waterfalls), #C7AA7A (Toupe), #B78C29 (Treasures), #6D5130 (Chocolate Rain), #263E59 (Nautilus). It mixes blue, yellow, brown tones and feels warm overall. The strongest text pairing is #D8E7FF on #263E59 with a contrast ratio of 8.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Veiling Waterfalls	rgb(216, 231, 255)	hsl(217, 100%, 92%)
Toupe	rgb(199, 170, 122)	hsl(37, 41%, 63%)
Treasures	rgb(183, 140, 41)	hsl(42, 63%, 44%)
Chocolate Rain	rgb(109, 81, 48)	hsl(32, 39%, 31%)
Nautilus	rgb(38, 62, 89)	hsl(212, 40%, 25%)

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.

Aa8.77:1 Very good#D8E7FF on #263E59
Aa8.77:1 Very good#263E59 on #D8E7FF
Aa5.85:1 Good#D8E7FF on #6D5130
Aa5.85:1 Good#6D5130 on #D8E7FF
Aa4.94:1 Good#C7AA7A on #263E59
Aa4.94:1 Good#263E59 on #C7AA7A
Aa3.55:1 Poor#B78C29 on #263E59
Aa3.55:1 Poor#263E59 on #B78C29

Color blindness preview

CSS variables

/* Veiling Waterfalls to Nautilus — https://swatchly.xyz/palette/d8e7ff-c7aa7a-b78c29-6d5130-263e59 */
:root {
  --veiling-waterfalls: #d8e7ff;
  --toupe: #c7aa7a;
  --treasures: #b78c29;
  --chocolate-rain: #6d5130;
  --nautilus: #263e59;
}

Tailwind CSS v4

/* Veiling Waterfalls to Nautilus — https://swatchly.xyz/palette/d8e7ff-c7aa7a-b78c29-6d5130-263e59 */
@theme {
  --color-veiling-waterfalls: #d8e7ff;
  --color-veiling-waterfalls-50: #e9f1ff;
  --color-veiling-waterfalls-100: #d8e7ff;
  --color-veiling-waterfalls-200: #c9d4e6;
  --color-veiling-waterfalls-300: #b2bed2;
  --color-veiling-waterfalls-400: #92a0b6;
  --color-veiling-waterfalls-500: #78859b;
  --color-veiling-waterfalls-600: #5f6c80;
  --color-veiling-waterfalls-700: #4a5668;
  --color-veiling-waterfalls-800: #394353;
  --color-veiling-waterfalls-900: #2b3341;
  --color-veiling-waterfalls-950: #192029;
  --color-toupe: #c7aa7a;
  --color-toupe-50: #fff9ef;
  --color-toupe-100: #fff0d8;
  --color-toupe-200: #f2debc;
  --color-toupe-300: #e0c9a2;
  --color-toupe-400: #c7aa7a;
  --color-toupe-500: #a88c5e;
  --color-toupe-600: #8a6f41;
  --color-toupe-700: #6f572b;
  --color-toupe-800: #58421b;
  --color-toupe-900: #433110;
  --color-toupe-950: #291d06;
  --color-treasures: #b78c29;
  --color-treasures-50: #fff7e7;
  --color-treasures-100: #ffeece;
  --color-treasures-200: #fadb9d;
  --color-treasures-300: #e9c57d;
  --color-treasures-400: #cfa652;
  --color-treasures-500: #b78c29;
  --color-treasures-600: #976f00;
  --color-treasures-700: #785800;
  --color-treasures-800: #5d4300;
  --color-treasures-900: #473300;
  --color-treasures-950: #2d1e00;
  --color-chocolate-rain: #6d5130;
  --color-chocolate-rain-50: #fff3e6;
  --color-chocolate-rain-100: #fce7d1;
  --color-chocolate-rain-200: #ecd3b9;
  --color-chocolate-rain-300: #d8bc9e;
  --color-chocolate-rain-400: #bb9d7b;
  --color-chocolate-rain-500: #a0815f;
  --color-chocolate-rain-600: #846746;
  --color-chocolate-rain-700: #6d5130;
  --color-chocolate-rain-800: #563f24;
  --color-chocolate-rain-900: #433019;
  --color-chocolate-rain-950: #2b1d0c;
  --color-nautilus: #263e59;
  --color-nautilus-50: #eef6ff;
  --color-nautilus-100: #deedff;
  --color-nautilus-200: #c5daf3;
  --color-nautilus-300: #aac2df;
  --color-nautilus-400: #87a2c1;
  --color-nautilus-500: #6b85a4;
  --color-nautilus-600: #516a86;
  --color-nautilus-700: #3c526b;
  --color-nautilus-800: #263e59;
  --color-nautilus-900: #1f2f41;
  --color-nautilus-950: #111d29;
}