Pine to Tutu Color Palette

About this palette

Pine to Tutu is a 5-color cool palette: #345B32 (Pine), #6379BE (Flood), #16203F (Nightwalker), #EEA1A4 (Cosy Summer Sunset), #FFE4E2 (Tutu). It mixes green, blue, pink, white tones and feels cool overall. The strongest text pairing is #16203F on #FFE4E2 with a contrast ratio of 13.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine	rgb(52, 91, 50)	hsl(117, 29%, 28%)
Flood	rgb(99, 121, 190)	hsl(225, 41%, 57%)
Nightwalker	rgb(22, 32, 63)	hsl(225, 48%, 17%)
Cosy Summer Sunset	rgb(238, 161, 164)	hsl(358, 69%, 78%)
Tutu	rgb(255, 228, 226)	hsl(4, 100%, 94%)

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.

Aa13.29:1 Super#16203F on #FFE4E2
Aa13.29:1 Super#FFE4E2 on #16203F
Aa7.82:1 Very good#16203F on #EEA1A4
Aa7.82:1 Very good#EEA1A4 on #16203F
Aa6.49:1 Good#345B32 on #FFE4E2
Aa6.49:1 Good#FFE4E2 on #345B32
Aa3.82:1 Poor#345B32 on #EEA1A4
Aa3.82:1 Poor#EEA1A4 on #345B32

Color blindness preview

CSS variables

/* Pine to Tutu — https://swatchly.xyz/palette/345b32-6379be-16203f-eea1a4-ffe4e2 */
:root {
  --pine: #345b32;
  --flood: #6379be;
  --nightwalker: #16203f;
  --cosy-summer-sunset: #eea1a4;
  --tutu: #ffe4e2;
}

Tailwind CSS v4

/* Pine to Tutu — https://swatchly.xyz/palette/345b32-6379be-16203f-eea1a4-ffe4e2 */
@theme {
  --color-pine: #345b32;
  --color-pine-50: #e5fde3;
  --color-pine-100: #d9f4d6;
  --color-pine-200: #c0e1be;
  --color-pine-300: #a6cba3;
  --color-pine-400: #82ab80;
  --color-pine-500: #668f63;
  --color-pine-600: #4c7349;
  --color-pine-700: #345b32;
  --color-pine-800: #284727;
  --color-pine-900: #1d371c;
  --color-pine-950: #10220f;
  --color-flood: #6379be;
  --color-flood-50: #eff3ff;
  --color-flood-100: #dfe7ff;
  --color-flood-200: #c1d1ff;
  --color-flood-300: #a1b8f9;
  --color-flood-400: #7f96dc;
  --color-flood-500: #6379be;
  --color-flood-600: #4c60a1;
  --color-flood-700: #3a4b85;
  --color-flood-800: #2c3a6d;
  --color-flood-900: #202d58;
  --color-flood-950: #131b3b;
  --color-nightwalker: #16203f;
  --color-nightwalker-50: #f1f5ff;
  --color-nightwalker-100: #e3ebff;
  --color-nightwalker-200: #cbd7f6;
  --color-nightwalker-300: #b3c0e3;
  --color-nightwalker-400: #92a1c7;
  --color-nightwalker-500: #7786ac;
  --color-nightwalker-600: #5e6c90;
  --color-nightwalker-700: #4a5677;
  --color-nightwalker-800: #394460;
  --color-nightwalker-900: #2b354d;
  --color-nightwalker-950: #16203f;
  --color-cosy-summer-sunset: #eea1a4;
  --color-cosy-summer-sunset-50: #ffecec;
  --color-cosy-summer-sunset-100: #ffdcdc;
  --color-cosy-summer-sunset-200: #fcbec0;
  --color-cosy-summer-sunset-300: #eea1a4;
  --color-cosy-summer-sunset-400: #cd8487;
  --color-cosy-summer-sunset-500: #b16a6d;
  --color-cosy-summer-sunset-600: #955156;
  --color-cosy-summer-sunset-700: #7b3e42;
  --color-cosy-summer-sunset-800: #642f33;
  --color-cosy-summer-sunset-900: #502326;
  --color-cosy-summer-sunset-950: #341416;
  --color-tutu: #ffe4e2;
  --color-tutu-50: #fff2f1;
  --color-tutu-100: #ffe4e2;
  --color-tutu-200: #e6d2d1;
  --color-tutu-300: #d1bbb9;
  --color-tutu-400: #b39b99;
  --color-tutu-500: #98807e;
  --color-tutu-600: #7c6564;
  --color-tutu-700: #644f4e;
  --color-tutu-800: #4f3d3c;
  --color-tutu-900: #3e2f2e;
  --color-tutu-950: #271c1b;
}