Midnight Pines to Cotton Ball Color Palette

About this palette

Midnight Pines to Cotton Ball is a 4-color vintage palette: #282200 (Midnight Pines), #007571 (Prismarine), #D1818F (I Love You Pink), #F4F5FF (Cotton Ball). It mixes brown, turquoise, red, white tones and feels warm overall. The strongest text pairing is #282200 on #F4F5FF with a contrast ratio of 14.67:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(40, 34, 0)	hsl(51, 100%, 8%)
Prismarine	rgb(0, 117, 113)	hsl(178, 100%, 23%)
I Love You Pink	rgb(209, 129, 143)	hsl(350, 47%, 66%)
Cotton Ball	rgb(244, 245, 255)	hsl(235, 100%, 98%)

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.

Aa14.67:1 Super#282200 on #F4F5FF
Aa14.67:1 Super#F4F5FF on #282200
Aa5.49:1 Good#282200 on #D1818F
Aa5.49:1 Good#D1818F on #282200
Aa5.12:1 Good#007571 on #F4F5FF
Aa5.12:1 Good#F4F5FF on #007571

Color blindness preview

CSS variables

/* Midnight Pines to Cotton Ball — https://swatchly.xyz/palette/282200-007571-d1818f-f4f5ff */
:root {
  --midnight-pines: #282200;
  --prismarine: #007571;
  --i-love-you-pink: #d1818f;
  --cotton-ball: #f4f5ff;
}

Tailwind CSS v4

/* Midnight Pines to Cotton Ball — https://swatchly.xyz/palette/282200-007571-d1818f-f4f5ff */
@theme {
  --color-midnight-pines: #282200;
  --color-midnight-pines-50: #f9f6e0;
  --color-midnight-pines-100: #f0ecd4;
  --color-midnight-pines-200: #ddd9bc;
  --color-midnight-pines-300: #c7c2a1;
  --color-midnight-pines-400: #a9a37f;
  --color-midnight-pines-500: #8e8863;
  --color-midnight-pines-600: #746e4b;
  --color-midnight-pines-700: #5d5837;
  --color-midnight-pines-800: #4a4529;
  --color-midnight-pines-900: #3a361d;
  --color-midnight-pines-950: #282200;
  --color-prismarine: #007571;
  --color-prismarine-50: #d5fffc;
  --color-prismarine-100: #c1f6f2;
  --color-prismarine-200: #a2e4df;
  --color-prismarine-300: #81cdc9;
  --color-prismarine-400: #56aea9;
  --color-prismarine-500: #32918d;
  --color-prismarine-600: #007571;
  --color-prismarine-700: #005d5a;
  --color-prismarine-800: #004946;
  --color-prismarine-900: #003836;
  --color-prismarine-950: #002322;
  --color-i-love-you-pink: #d1818f;
  --color-i-love-you-pink-50: #ffeef0;
  --color-i-love-you-pink-100: #ffdfe3;
  --color-i-love-you-pink-200: #ffc0ca;
  --color-i-love-you-pink-300: #eea5b0;
  --color-i-love-you-pink-400: #d1818f;
  --color-i-love-you-pink-500: #b46775;
  --color-i-love-you-pink-600: #974e5d;
  --color-i-love-you-pink-700: #7c3b48;
  --color-i-love-you-pink-800: #652c38;
  --color-i-love-you-pink-900: #50202a;
  --color-i-love-you-pink-950: #35121a;
  --color-cotton-ball: #f4f5ff;
  --color-cotton-ball-50: #f4f5ff;
  --color-cotton-ball-100: #ebebf1;
  --color-cotton-ball-200: #d7d7de;
  --color-cotton-ball-300: #c0c0c9;
  --color-cotton-ball-400: #a0a1aa;
  --color-cotton-ball-500: #85858e;
  --color-cotton-ball-600: #6a6b73;
  --color-cotton-ball-700: #54555c;
  --color-cotton-ball-800: #414248;
  --color-cotton-ball-900: #323238;
  --color-cotton-ball-950: #1e1f23;
}