Gentle Caress to Midnight Dreams Color Palette

About this palette

Gentle Caress to Midnight Dreams is a 5-color cool palette: #FFD4B9 (Gentle Caress), #E47F00 (Pumpkin Cat), #009210 (Maniac Green), #7C0A7D (Purple), #002638 (Midnight Dreams). It mixes orange, green, purple, blue tones and feels cool overall. The strongest text pairing is #FFD4B9 on #002638 with a contrast ratio of 11.52:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gentle Caress	rgb(255, 212, 185)	hsl(23, 100%, 86%)
Pumpkin Cat	rgb(228, 127, 0)	hsl(33, 100%, 45%)
Maniac Green	rgb(0, 146, 16)	hsl(127, 100%, 29%)
Purple	rgb(124, 10, 125)	hsl(299, 85%, 26%)
Midnight Dreams	rgb(0, 38, 56)	hsl(199, 100%, 11%)

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.52:1 Very good#FFD4B9 on #002638
Aa11.52:1 Very good#002638 on #FFD4B9
Aa7.00:1 Good#FFD4B9 on #7C0A7D
Aa7.00:1 Good#7C0A7D on #FFD4B9
Aa5.50:1 Good#E47F00 on #002638
Aa5.50:1 Good#002638 on #E47F00
Aa3.84:1 Poor#009210 on #002638
Aa3.84:1 Poor#002638 on #009210

Color blindness preview

CSS variables

/* Gentle Caress to Midnight Dreams — https://swatchly.xyz/palette/ffd4b9-e47f00-009210-7c0a7d-002638 */
:root {
  --gentle-caress: #ffd4b9;
  --pumpkin-cat: #e47f00;
  --maniac-green: #009210;
  --purple: #7c0a7d;
  --midnight-dreams: #002638;
}

Tailwind CSS v4

/* Gentle Caress to Midnight Dreams — https://swatchly.xyz/palette/ffd4b9-e47f00-009210-7c0a7d-002638 */
@theme {
  --color-gentle-caress: #ffd4b9;
  --color-gentle-caress-50: #fff8f4;
  --color-gentle-caress-100: #ffede1;
  --color-gentle-caress-200: #ffd4b9;
  --color-gentle-caress-300: #e1bea8;
  --color-gentle-caress-400: #c39c84;
  --color-gentle-caress-500: #a78067;
  --color-gentle-caress-600: #89644d;
  --color-gentle-caress-700: #6f4e38;
  --color-gentle-caress-800: #583b28;
  --color-gentle-caress-900: #452c1c;
  --color-gentle-caress-950: #2c1b0f;
  --color-pumpkin-cat: #e47f00;
  --color-pumpkin-cat-50: #fff0e5;
  --color-pumpkin-cat-100: #ffe2cd;
  --color-pumpkin-cat-200: #ffc79b;
  --color-pumpkin-cat-300: #ffa555;
  --color-pumpkin-cat-400: #e47f00;
  --color-pumpkin-cat-500: #bf6900;
  --color-pumpkin-cat-600: #9a5400;
  --color-pumpkin-cat-700: #7c4200;
  --color-pumpkin-cat-800: #623300;
  --color-pumpkin-cat-900: #4d2700;
  --color-pumpkin-cat-950: #321700;
  --color-maniac-green: #009210;
  --color-maniac-green-50: #e1ffdf;
  --color-maniac-green-100: #c7ffc4;
  --color-maniac-green-200: #a5f3a0;
  --color-maniac-green-300: #86e182;
  --color-maniac-green-400: #5bc659;
  --color-maniac-green-500: #35ac36;
  --color-maniac-green-600: #009210;
  --color-maniac-green-700: #00740a;
  --color-maniac-green-800: #005b06;
  --color-maniac-green-900: #004603;
  --color-maniac-green-950: #002c01;
  --color-purple: #7c0a7d;
  --color-purple-50: #fff0fe;
  --color-purple-100: #ffe0fd;
  --color-purple-200: #ffbbfc;
  --color-purple-300: #f496f1;
  --color-purple-400: #d56ed4;
  --color-purple-500: #b74eb6;
  --color-purple-600: #963296;
  --color-purple-700: #7c0a7d;
  --color-purple-800: #600e60;
  --color-purple-900: #4c064d;
  --color-purple-950: #310232;
  --color-midnight-dreams: #002638;
  --color-midnight-dreams-50: #ebf7ff;
  --color-midnight-dreams-100: #d7effe;
  --color-midnight-dreams-200: #bfdcee;
  --color-midnight-dreams-300: #a5c6da;
  --color-midnight-dreams-400: #83a7bd;
  --color-midnight-dreams-500: #678da2;
  --color-midnight-dreams-600: #4e7287;
  --color-midnight-dreams-700: #3b5c6f;
  --color-midnight-dreams-800: #2b495a;
  --color-midnight-dreams-900: #203947;
  --color-midnight-dreams-950: #002638;
}