Botanical Night to Seafoam Splashes color palette

073A2FBotanical Night 245D71Night Shift 9C6786Fruit of Passion E6B69BWax Flower ACF0D1Seafoam Splashes

Open in generator Export PNG, PDF, ASE…

About this palette

Botanical Night to Seafoam Splashes is a 5-color cool, vintage palette: #073A2F (Botanical Night), #245D71 (Night Shift), #9C6786 (Fruit of Passion), #E6B69B (Wax Flower), #ACF0D1 (Seafoam Splashes). It mixes turquoise, blue, red, orange, green tones and feels cool overall. The strongest text pairing is #073A2F on #ACF0D1 with a contrast ratio of 9.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(7, 58, 47)	hsl(167, 78%, 13%)
Night Shift	rgb(36, 93, 113)	hsl(196, 52%, 29%)
Fruit of Passion	rgb(156, 103, 134)	hsl(325, 21%, 51%)
Wax Flower	rgb(230, 182, 155)	hsl(22, 60%, 75%)
Seafoam Splashes	rgb(172, 240, 209)	hsl(153, 69%, 81%)

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.

Aa9.75:1 Very good#073A2F on #ACF0D1
Aa9.75:1 Very good#ACF0D1 on #073A2F
Aa6.96:1 Good#073A2F on #E6B69B
Aa6.96:1 Good#E6B69B on #073A2F
Aa5.61:1 Good#245D71 on #ACF0D1
Aa5.61:1 Good#ACF0D1 on #245D71
Aa4.00:1 Poor#245D71 on #E6B69B
Aa4.00:1 Poor#E6B69B on #245D71

Color blindness preview

CSS variables

/* Botanical Night to Seafoam Splashes — https://swatchly.xyz/palette/073a2f-245d71-9c6786-e6b69b-acf0d1 */
:root {
  --botanical-night: #073a2f;
  --night-shift: #245d71;
  --fruit-of-passion: #9c6786;
  --wax-flower: #e6b69b;
  --seafoam-splashes: #acf0d1;
}

Tailwind CSS v4

/* Botanical Night to Seafoam Splashes — https://swatchly.xyz/palette/073a2f-245d71-9c6786-e6b69b-acf0d1 */
@theme {
  --color-botanical-night: #073a2f;
  --color-botanical-night-50: #e1fcf4;
  --color-botanical-night-100: #d5f3e9;
  --color-botanical-night-200: #bde1d5;
  --color-botanical-night-300: #a2cbbf;
  --color-botanical-night-400: #7fac9f;
  --color-botanical-night-500: #629183;
  --color-botanical-night-600: #487568;
  --color-botanical-night-700: #345d52;
  --color-botanical-night-800: #24493f;
  --color-botanical-night-900: #073a2f;
  --color-botanical-night-950: #0c231d;
  --color-night-shift: #245d71;
  --color-night-shift-50: #e8f8ff;
  --color-night-shift-100: #d0f1ff;
  --color-night-shift-200: #b5dff0;
  --color-night-shift-300: #99c9dd;
  --color-night-shift-400: #75abc0;
  --color-night-shift-500: #578fa4;
  --color-night-shift-600: #3d7488;
  --color-night-shift-700: #245d71;
  --color-night-shift-800: #1b4959;
  --color-night-shift-900: #103846;
  --color-night-shift-950: #06232d;
  --color-fruit-of-passion: #9c6786;
  --color-fruit-of-passion-50: #ffedf7;
  --color-fruit-of-passion-100: #ffdbef;
  --color-fruit-of-passion-200: #efc1db;
  --color-fruit-of-passion-300: #daa7c4;
  --color-fruit-of-passion-400: #ba84a3;
  --color-fruit-of-passion-500: #9c6786;
  --color-fruit-of-passion-600: #81506d;
  --color-fruit-of-passion-700: #693d58;
  --color-fruit-of-passion-800: #552f45;
  --color-fruit-of-passion-900: #432337;
  --color-fruit-of-passion-950: #2c1523;
  --color-wax-flower: #e6b69b;
  --color-wax-flower-50: #fff3ec;
  --color-wax-flower-100: #ffe6d8;
  --color-wax-flower-200: #f4d0bb;
  --color-wax-flower-300: #e6b69b;
  --color-wax-flower-400: #c4977e;
  --color-wax-flower-500: #a87b62;
  --color-wax-flower-600: #8b6149;
  --color-wax-flower-700: #714b35;
  --color-wax-flower-800: #5b3926;
  --color-wax-flower-900: #472b1b;
  --color-wax-flower-950: #2e1a0e;
  --color-seafoam-splashes: #acf0d1;
  --color-seafoam-splashes-50: #edfff6;
  --color-seafoam-splashes-100: #d5fce9;
  --color-seafoam-splashes-200: #acf0d1;
  --color-seafoam-splashes-300: #9ed5bc;
  --color-seafoam-splashes-400: #77b59a;
  --color-seafoam-splashes-500: #57997d;
  --color-seafoam-splashes-600: #3c7c62;
  --color-seafoam-splashes-700: #26634c;
  --color-seafoam-splashes-800: #164e39;
  --color-seafoam-splashes-900: #0c3c2b;
  --color-seafoam-splashes-950: #04261a;
}