Succulents to Pretty in Pink Color Palette

About this palette

Succulents to Pretty in Pink is a 4-color vintage palette: #00734B (Succulents), #002945 (Midnight Ocean), #B58200 (Arrowwood), #F3BBEA (Pretty in Pink). It mixes green, blue, yellow, pink tones and feels balanced overall. The strongest text pairing is #002945 on #F3BBEA with a contrast ratio of 9.34:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Succulents	rgb(0, 115, 75)	hsl(159, 100%, 23%)
Midnight Ocean	rgb(0, 41, 69)	hsl(204, 100%, 14%)
Arrowwood	rgb(181, 130, 0)	hsl(43, 100%, 35%)
Pretty in Pink	rgb(243, 187, 234)	hsl(310, 70%, 84%)

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.34:1 Very good#002945 on #F3BBEA
Aa9.34:1 Very good#F3BBEA on #002945
Aa4.39:1 Poor#002945 on #B58200
Aa4.39:1 Poor#B58200 on #002945
Aa3.69:1 Poor#00734B on #F3BBEA
Aa3.69:1 Poor#F3BBEA on #00734B

Color blindness preview

CSS variables

/* Succulents to Pretty in Pink — https://swatchly.xyz/palette/00734b-002945-b58200-f3bbea */
:root {
  --succulents: #00734b;
  --midnight-ocean: #002945;
  --arrowwood: #b58200;
  --pretty-in-pink: #f3bbea;
}

Tailwind CSS v4

/* Succulents to Pretty in Pink — https://swatchly.xyz/palette/00734b-002945-b58200-f3bbea */
@theme {
  --color-succulents: #00734b;
  --color-succulents-50: #dcffeb;
  --color-succulents-100: #c1f8da;
  --color-succulents-200: #a2e5c1;
  --color-succulents-300: #80cea6;
  --color-succulents-400: #55ae83;
  --color-succulents-500: #329066;
  --color-succulents-600: #00734b;
  --color-succulents-700: #005b3b;
  --color-succulents-800: #00482d;
  --color-succulents-900: #003822;
  --color-succulents-950: #002314;
  --color-midnight-ocean: #002945;
  --color-midnight-ocean-50: #edf7ff;
  --color-midnight-ocean-100: #dbeeff;
  --color-midnight-ocean-200: #bddcf7;
  --color-midnight-ocean-300: #a2c6e4;
  --color-midnight-ocean-400: #7fa6c8;
  --color-midnight-ocean-500: #658cae;
  --color-midnight-ocean-600: #4c7393;
  --color-midnight-ocean-700: #3a5d7b;
  --color-midnight-ocean-800: #2b4b65;
  --color-midnight-ocean-900: #203c53;
  --color-midnight-ocean-950: #002945;
  --color-arrowwood: #b58200;
  --color-arrowwood-50: #fff5e4;
  --color-arrowwood-100: #ffebc8;
  --color-arrowwood-200: #fcd591;
  --color-arrowwood-300: #eabe6e;
  --color-arrowwood-400: #cf9e3e;
  --color-arrowwood-500: #b58200;
  --color-arrowwood-600: #926800;
  --color-arrowwood-700: #745200;
  --color-arrowwood-800: #5b3f00;
  --color-arrowwood-900: #463000;
  --color-arrowwood-950: #2c1d00;
  --color-pretty-in-pink: #f3bbea;
  --color-pretty-in-pink-50: #ffe8fb;
  --color-pretty-in-pink-100: #fdd7f6;
  --color-pretty-in-pink-200: #f3bbea;
  --color-pretty-in-pink-300: #d9a9d1;
  --color-pretty-in-pink-400: #bd89b5;
  --color-pretty-in-pink-500: #a26f9a;
  --color-pretty-in-pink-600: #875680;
  --color-pretty-in-pink-700: #6e4268;
  --color-pretty-in-pink-800: #593354;
  --color-pretty-in-pink-900: #462542;
  --color-pretty-in-pink-950: #2d152a;
}