Windstorm to Blushing Rose color palette

6598C8Windstorm FFD5B6Gentle Caress 00273CMidnight Dreams 006796Wavy Navy 643B00Brown DAA07DBlushing Rose

Open in generator Export PNG, PDF, ASE…

About this palette

Windstorm to Blushing Rose is a 6-color vintage palette: #6598C8 (Windstorm), #FFD5B6 (Gentle Caress), #00273C (Midnight Dreams), #006796 (Wavy Navy), #643B00 (Brown), #DAA07D (Blushing Rose). It mixes blue, orange, brown tones and feels balanced overall. The strongest text pairing is #FFD5B6 on #00273C with a contrast ratio of 11.39:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Windstorm	rgb(101, 152, 200)	hsl(209, 47%, 59%)
Gentle Caress	rgb(255, 213, 182)	hsl(25, 100%, 86%)
Midnight Dreams	rgb(0, 39, 60)	hsl(201, 100%, 12%)
Wavy Navy	rgb(0, 103, 150)	hsl(199, 100%, 29%)
Brown	rgb(100, 59, 0)	hsl(35, 100%, 20%)
Blushing Rose	rgb(218, 160, 125)	hsl(23, 56%, 67%)

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.

Aa11.39:1 Very good#FFD5B6 on #00273C
Aa11.39:1 Very good#00273C on #FFD5B6
Aa7.13:1 Very good#FFD5B6 on #643B00
Aa7.13:1 Very good#643B00 on #FFD5B6
Aa6.87:1 Good#00273C on #DAA07D
Aa6.87:1 Good#DAA07D on #00273C
Aa5.07:1 Good#6598C8 on #00273C
Aa5.07:1 Good#00273C on #6598C8

Color blindness preview

CSS variables

/* Windstorm to Blushing Rose — https://swatchly.xyz/palette/6598c8-ffd5b6-00273c-006796-643b00-daa07d */
:root {
  --windstorm: #6598c8;
  --gentle-caress: #ffd5b6;
  --midnight-dreams: #00273c;
  --wavy-navy: #006796;
  --brown: #643b00;
  --blushing-rose: #daa07d;
}

Tailwind CSS v4

/* Windstorm to Blushing Rose — https://swatchly.xyz/palette/6598c8-ffd5b6-00273c-006796-643b00-daa07d */
@theme {
  --color-windstorm: #6598c8;
  --color-windstorm-50: #f2f8ff;
  --color-windstorm-100: #e4f2ff;
  --color-windstorm-200: #c5e2ff;
  --color-windstorm-300: #a5cff8;
  --color-windstorm-400: #82b2e0;
  --color-windstorm-500: #6598c8;
  --color-windstorm-600: #497aa9;
  --color-windstorm-700: #32618b;
  --color-windstorm-800: #214b70;
  --color-windstorm-900: #153958;
  --color-windstorm-950: #082339;
  --color-gentle-caress: #ffd5b6;
  --color-gentle-caress-50: #fff8f4;
  --color-gentle-caress-100: #ffede0;
  --color-gentle-caress-200: #ffd5b6;
  --color-gentle-caress-300: #e1bfa6;
  --color-gentle-caress-400: #c39d81;
  --color-gentle-caress-500: #a68064;
  --color-gentle-caress-600: #896549;
  --color-gentle-caress-700: #6f4e35;
  --color-gentle-caress-800: #573b25;
  --color-gentle-caress-900: #452d1a;
  --color-gentle-caress-950: #2c1b0d;
  --color-midnight-dreams: #00273c;
  --color-midnight-dreams-50: #ecf7ff;
  --color-midnight-dreams-100: #d8efff;
  --color-midnight-dreams-200: #bedcf1;
  --color-midnight-dreams-300: #a4c6dd;
  --color-midnight-dreams-400: #82a7c0;
  --color-midnight-dreams-500: #668da6;
  --color-midnight-dreams-600: #4e738b;
  --color-midnight-dreams-700: #3a5c73;
  --color-midnight-dreams-800: #2b4a5d;
  --color-midnight-dreams-900: #203a4b;
  --color-midnight-dreams-950: #00273c;
  --color-wavy-navy: #006796;
  --color-wavy-navy-50: #ecf7ff;
  --color-wavy-navy-100: #d8efff;
  --color-wavy-navy-200: #b4e0ff;
  --color-wavy-navy-300: #8ccefa;
  --color-wavy-navy-400: #65b1e1;
  --color-wavy-navy-500: #4597c8;
  --color-wavy-navy-600: #287dad;
  --color-wavy-navy-700: #006796;
  --color-wavy-navy-800: #005177;
  --color-wavy-navy-900: #003e5d;
  --color-wavy-navy-950: #00273c;
  --color-brown: #643b00;
  --color-brown-50: #fff3e7;
  --color-brown-100: #ffe6ce;
  --color-brown-200: #f5d0ab;
  --color-brown-300: #e2b98f;
  --color-brown-400: #c6996a;
  --color-brown-500: #ab7e4d;
  --color-brown-600: #8f6434;
  --color-brown-700: #764f20;
  --color-brown-800: #643b00;
  --color-brown-900: #4c2e08;
  --color-brown-950: #311c02;
  --color-blushing-rose: #daa07d;
  --color-blushing-rose-50: #fff8f4;
  --color-blushing-rose-100: #ffefe5;
  --color-blushing-rose-200: #ffd8c0;
  --color-blushing-rose-300: #f1c1a4;
  --color-blushing-rose-400: #daa07d;
  --color-blushing-rose-500: #ba8261;
  --color-blushing-rose-600: #9b6644;
  --color-blushing-rose-700: #7e4e2f;
  --color-blushing-rose-800: #643a1e;
  --color-blushing-rose-900: #4e2a13;
  --color-blushing-rose-950: #311807;
}