Blushing Rose to Blue Ocean Color Palette

About this palette

Blushing Rose to Blue Ocean is a 5-color warm, vintage palette: #DD9C79 (Blushing Rose), #E4B8CC (Sweet Lilac), #31785D (Majorelle Gardens), #722F4D (Flirt), #0798C3 (Blue Ocean). It mixes orange, pink, turquoise, red, blue tones and feels warm overall. The strongest text pairing is #E4B8CC on #722F4D with a contrast ratio of 5.40:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blushing Rose	rgb(221, 156, 121)	hsl(21, 60%, 67%)
Sweet Lilac	rgb(228, 184, 204)	hsl(333, 45%, 81%)
Majorelle Gardens	rgb(49, 120, 93)	hsl(157, 42%, 33%)
Flirt	rgb(114, 47, 77)	hsl(333, 42%, 32%)
Blue Ocean	rgb(7, 152, 195)	hsl(194, 93%, 40%)

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.

Aa5.40:1 Good#E4B8CC on #722F4D
Aa5.40:1 Good#722F4D on #E4B8CC
Aa4.08:1 Poor#DD9C79 on #722F4D
Aa4.08:1 Poor#722F4D on #DD9C79
Aa3.03:1 Poor#E4B8CC on #31785D
Aa3.03:1 Poor#31785D on #E4B8CC

Color blindness preview

CSS variables

/* Blushing Rose to Blue Ocean — https://swatchly.xyz/palette/dd9c79-e4b8cc-31785d-722f4d-0798c3 */
:root {
  --blushing-rose: #dd9c79;
  --sweet-lilac: #e4b8cc;
  --majorelle-gardens: #31785d;
  --flirt: #722f4d;
  --blue-ocean: #0798c3;
}

Tailwind CSS v4

/* Blushing Rose to Blue Ocean — https://swatchly.xyz/palette/dd9c79-e4b8cc-31785d-722f4d-0798c3 */
@theme {
  --color-blushing-rose: #dd9c79;
  --color-blushing-rose-50: #fff8f4;
  --color-blushing-rose-100: #ffede4;
  --color-blushing-rose-200: #ffd6c0;
  --color-blushing-rose-300: #f4bda1;
  --color-blushing-rose-400: #dd9c79;
  --color-blushing-rose-500: #bd7f5d;
  --color-blushing-rose-600: #9e6241;
  --color-blushing-rose-700: #814b2c;
  --color-blushing-rose-800: #67371c;
  --color-blushing-rose-900: #502811;
  --color-blushing-rose-950: #331706;
  --color-sweet-lilac: #e4b8cc;
  --color-sweet-lilac-50: #fff5f9;
  --color-sweet-lilac-100: #ffe8f2;
  --color-sweet-lilac-200: #f2d2e0;
  --color-sweet-lilac-300: #e4b8cc;
  --color-sweet-lilac-400: #c199ab;
  --color-sweet-lilac-500: #a57c8f;
  --color-sweet-lilac-600: #886173;
  --color-sweet-lilac-700: #6e4b5b;
  --color-sweet-lilac-800: #573947;
  --color-sweet-lilac-900: #432a36;
  --color-sweet-lilac-950: #2b1922;
  --color-majorelle-gardens: #31785d;
  --color-majorelle-gardens-50: #dbffee;
  --color-majorelle-gardens-100: #cbf6e2;
  --color-majorelle-gardens-200: #b0e4cc;
  --color-majorelle-gardens-300: #93cfb4;
  --color-majorelle-gardens-400: #6db093;
  --color-majorelle-gardens-500: #4e9477;
  --color-majorelle-gardens-600: #31785d;
  --color-majorelle-gardens-700: #1f6048;
  --color-majorelle-gardens-800: #104c37;
  --color-majorelle-gardens-900: #073b2a;
  --color-majorelle-gardens-950: #022519;
  --color-flirt: #722f4d;
  --color-flirt-50: #fff1f6;
  --color-flirt-100: #ffe2ec;
  --color-flirt-200: #ffc4da;
  --color-flirt-300: #efacc6;
  --color-flirt-400: #d48ba8;
  --color-flirt-500: #ba708e;
  --color-flirt-600: #9e5775;
  --color-flirt-700: #84435f;
  --color-flirt-800: #722f4d;
  --color-flirt-900: #57253b;
  --color-flirt-950: #3a1525;
  --color-blue-ocean: #0798c3;
  --color-blue-ocean-50: #ebf9ff;
  --color-blue-ocean-100: #d6f2ff;
  --color-blue-ocean-200: #a7e4ff;
  --color-blue-ocean-300: #76d1f7;
  --color-blue-ocean-400: #45b3dd;
  --color-blue-ocean-500: #0798c3;
  --color-blue-ocean-600: #007a9e;
  --color-blue-ocean-700: #00617e;
  --color-blue-ocean-800: #004c63;
  --color-blue-ocean-900: #003a4d;
  --color-blue-ocean-950: #002431;
}