Resplendent Growth to Baby Blue color palette

358E38Resplendent Growth D2A381Latte 006A42Jewel 58325BLong Passionate Night 9ED2FFBaby Blue

About this palette

Resplendent Growth to Baby Blue is a 5-color cool, earthy palette: #358E38 (Resplendent Growth), #D2A381 (Latte), #006A42 (Jewel), #58325B (Long Passionate Night), #9ED2FF (Baby Blue). It mixes green, orange, purple, blue tones and feels cool overall. The strongest text pairing is #58325B on #9ED2FF with a contrast ratio of 6.49:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Resplendent Growth	rgb(53, 142, 56)	hsl(122, 46%, 38%)
Latte	rgb(210, 163, 129)	hsl(25, 47%, 66%)
Jewel	rgb(0, 106, 66)	hsl(157, 100%, 21%)
Long Passionate Night	rgb(88, 50, 91)	hsl(296, 29%, 28%)
Baby Blue	rgb(158, 210, 255)	hsl(208, 100%, 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.

Aa6.49:1 Good#58325B on #9ED2FF
Aa6.49:1 Good#9ED2FF on #58325B
Aa4.60:1 Good#D2A381 on #58325B
Aa4.60:1 Good#58325B on #D2A381
Aa4.18:1 Poor#006A42 on #9ED2FF
Aa4.18:1 Poor#9ED2FF on #006A42

Color blindness preview

CSS variables

/* Resplendent Growth to Baby Blue — https://swatchly.xyz/palette/358e38-d2a381-006a42-58325b-9ed2ff */
:root {
  --resplendent-growth: #358e38;
  --latte: #d2a381;
  --jewel: #006a42;
  --long-passionate-night: #58325b;
  --baby-blue: #9ed2ff;
}

Tailwind CSS v4

/* Resplendent Growth to Baby Blue — https://swatchly.xyz/palette/358e38-d2a381-006a42-58325b-9ed2ff */
@theme {
  --color-resplendent-growth: #358e38;
  --color-resplendent-growth-50: #e1ffdf;
  --color-resplendent-growth-100: #cafec8;
  --color-resplendent-growth-200: #b1efaf;
  --color-resplendent-growth-300: #96dd94;
  --color-resplendent-growth-400: #70c16f;
  --color-resplendent-growth-500: #51a852;
  --color-resplendent-growth-600: #358e38;
  --color-resplendent-growth-700: #1a7320;
  --color-resplendent-growth-800: #035b0e;
  --color-resplendent-growth-900: #004607;
  --color-resplendent-growth-950: #002c03;
  --color-latte: #d2a381;
  --color-latte-50: #fff8f3;
  --color-latte-100: #ffeee3;
  --color-latte-200: #fbd9c1;
  --color-latte-300: #eac3a7;
  --color-latte-400: #d2a381;
  --color-latte-500: #b28565;
  --color-latte-600: #946949;
  --color-latte-700: #785133;
  --color-latte-800: #5f3d23;
  --color-latte-900: #4a2d17;
  --color-latte-950: #2e1a0a;
  --color-jewel: #006a42;
  --color-jewel-50: #ddffea;
  --color-jewel-100: #c7f9db;
  --color-jewel-200: #ace9c5;
  --color-jewel-300: #8ed5ad;
  --color-jewel-400: #67b78c;
  --color-jewel-500: #479c71;
  --color-jewel-600: #2a8158;
  --color-jewel-700: #006a42;
  --color-jewel-800: #005333;
  --color-jewel-900: #004026;
  --color-jewel-950: #002916;
  --color-long-passionate-night: #58325b;
  --color-long-passionate-night-50: #fef0ff;
  --color-long-passionate-night-100: #fde0ff;
  --color-long-passionate-night-200: #eccaee;
  --color-long-passionate-night-300: #d8b2db;
  --color-long-passionate-night-400: #bb91be;
  --color-long-passionate-night-500: #9f75a2;
  --color-long-passionate-night-600: #845b86;
  --color-long-passionate-night-700: #6b466d;
  --color-long-passionate-night-800: #58325b;
  --color-long-passionate-night-900: #422844;
  --color-long-passionate-night-950: #2a172c;
  --color-baby-blue: #9ed2ff;
  --color-baby-blue-50: #f7fbff;
  --color-baby-blue-100: #e8f4ff;
  --color-baby-blue-200: #c7e5ff;
  --color-baby-blue-300: #9ed2ff;
  --color-baby-blue-400: #80b0d9;
  --color-baby-blue-500: #6192bc;
  --color-baby-blue-600: #45759e;
  --color-baby-blue-700: #2f5c81;
  --color-baby-blue-800: #1f4767;
  --color-baby-blue-900: #143650;
  --color-baby-blue-950: #082134;
}