Veiling Waterfalls to Steampunk Gold Color Palette

About this palette

Veiling Waterfalls to Steampunk Gold is a 4-color vintage palette: #D5E7FF (Veiling Waterfalls), #5569C5 (God of Rain), #5B4100 (Pineapple), #C49D54 (Steampunk Gold). It mixes blue, brown, yellow tones and feels balanced overall. The strongest text pairing is #D5E7FF on #5B4100 with a contrast ratio of 7.59:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Veiling Waterfalls	rgb(213, 231, 255)	hsl(214, 100%, 92%)
God of Rain	rgb(85, 105, 197)	hsl(229, 49%, 55%)
Pineapple	rgb(91, 65, 0)	hsl(43, 100%, 18%)
Steampunk Gold	rgb(196, 157, 84)	hsl(39, 49%, 55%)

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.59:1 Very good#D5E7FF on #5B4100
Aa7.59:1 Very good#5B4100 on #D5E7FF
Aa3.96:1 Poor#D5E7FF on #5569C5
Aa3.96:1 Poor#5569C5 on #D5E7FF
Aa3.77:1 Poor#5B4100 on #C49D54
Aa3.77:1 Poor#C49D54 on #5B4100

Color blindness preview

CSS variables

/* Veiling Waterfalls to Steampunk Gold — https://swatchly.xyz/palette/d5e7ff-5569c5-5b4100-c49d54 */
:root {
  --veiling-waterfalls: #d5e7ff;
  --god-of-rain: #5569c5;
  --pineapple: #5b4100;
  --steampunk-gold: #c49d54;
}

Tailwind CSS v4

/* Veiling Waterfalls to Steampunk Gold — https://swatchly.xyz/palette/d5e7ff-5569c5-5b4100-c49d54 */
@theme {
  --color-veiling-waterfalls: #d5e7ff;
  --color-veiling-waterfalls-50: #e7f1ff;
  --color-veiling-waterfalls-100: #d5e7ff;
  --color-veiling-waterfalls-200: #c6d4e6;
  --color-veiling-waterfalls-300: #afbfd3;
  --color-veiling-waterfalls-400: #90a0b6;
  --color-veiling-waterfalls-500: #76869b;
  --color-veiling-waterfalls-600: #5d6c81;
  --color-veiling-waterfalls-700: #485669;
  --color-veiling-waterfalls-800: #374353;
  --color-veiling-waterfalls-900: #293441;
  --color-veiling-waterfalls-950: #18202a;
  --color-god-of-rain: #5569c5;
  --color-god-of-rain-50: #f2f5ff;
  --color-god-of-rain-100: #e6ecff;
  --color-god-of-rain-200: #cdd8ff;
  --color-god-of-rain-300: #afc1ff;
  --color-god-of-rain-400: #889ffb;
  --color-god-of-rain-500: #6d84e2;
  --color-god-of-rain-600: #5569c5;
  --color-god-of-rain-700: #4051a5;
  --color-god-of-rain-800: #303e87;
  --color-god-of-rain-900: #232e6d;
  --color-god-of-rain-950: #141b49;
  --color-pineapple: #5b4100;
  --color-pineapple-50: #fff4df;
  --color-pineapple-100: #fce9c6;
  --color-pineapple-200: #ebd5ab;
  --color-pineapple-300: #d8be8f;
  --color-pineapple-400: #bb9f6a;
  --color-pineapple-500: #a0844d;
  --color-pineapple-600: #856a34;
  --color-pineapple-700: #6d5421;
  --color-pineapple-800: #5b4100;
  --color-pineapple-900: #453208;
  --color-pineapple-950: #2d1f02;
  --color-steampunk-gold: #c49d54;
  --color-steampunk-gold-50: #fff5e3;
  --color-steampunk-gold-100: #ffe9c4;
  --color-steampunk-gold-200: #f2d5a0;
  --color-steampunk-gold-300: #dfbe81;
  --color-steampunk-gold-400: #c49d54;
  --color-steampunk-gold-500: #a78137;
  --color-steampunk-gold-600: #8a6618;
  --color-steampunk-gold-700: #705000;
  --color-steampunk-gold-800: #583e00;
  --color-steampunk-gold-900: #442f00;
  --color-steampunk-gold-950: #2b1c00;
}