Pink Orchid to Acai Color Palette

About this palette

Pink Orchid to Acai is a 5-color cool palette: #C777D4 (Pink Orchid), #4282D4 (Soothing Sapphire), #8AC0FF (Cooler Than Ever), #59419F (Ruthless Empress), #3D2A5C (Acai). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #8AC0FF on #3D2A5C with a contrast ratio of 6.57:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Orchid	rgb(199, 119, 212)	hsl(292, 52%, 65%)
Soothing Sapphire	rgb(66, 130, 212)	hsl(214, 63%, 55%)
Cooler Than Ever	rgb(138, 192, 255)	hsl(212, 100%, 77%)
Ruthless Empress	rgb(89, 65, 159)	hsl(255, 42%, 44%)
Acai	rgb(61, 42, 92)	hsl(263, 37%, 26%)

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.57:1 Good#8AC0FF on #3D2A5C
Aa6.57:1 Good#3D2A5C on #8AC0FF
Aa4.17:1 Poor#C777D4 on #3D2A5C
Aa4.17:1 Poor#3D2A5C on #C777D4
Aa4.13:1 Poor#8AC0FF on #59419F
Aa4.13:1 Poor#59419F on #8AC0FF
Aa3.19:1 Poor#4282D4 on #3D2A5C
Aa3.19:1 Poor#3D2A5C on #4282D4

Color blindness preview

CSS variables

/* Pink Orchid to Acai — https://swatchly.xyz/palette/c777d4-4282d4-8ac0ff-59419f-3d2a5c */
:root {
  --pink-orchid: #c777d4;
  --soothing-sapphire: #4282d4;
  --cooler-than-ever: #8ac0ff;
  --ruthless-empress: #59419f;
  --acai: #3d2a5c;
}

Tailwind CSS v4

/* Pink Orchid to Acai — https://swatchly.xyz/palette/c777d4-4282d4-8ac0ff-59419f-3d2a5c */
@theme {
  --color-pink-orchid: #c777d4;
  --color-pink-orchid-50: #fdedff;
  --color-pink-orchid-100: #fadcff;
  --color-pink-orchid-200: #f6baff;
  --color-pink-orchid-300: #e49df0;
  --color-pink-orchid-400: #c777d4;
  --color-pink-orchid-500: #ab5db8;
  --color-pink-orchid-600: #8f449b;
  --color-pink-orchid-700: #753080;
  --color-pink-orchid-800: #5e2268;
  --color-pink-orchid-900: #4b1754;
  --color-pink-orchid-950: #320b38;
  --color-soothing-sapphire: #4282d4;
  --color-soothing-sapphire-50: #edf5ff;
  --color-soothing-sapphire-100: #dcebff;
  --color-soothing-sapphire-200: #bad7ff;
  --color-soothing-sapphire-300: #91c0ff;
  --color-soothing-sapphire-400: #619ff1;
  --color-soothing-sapphire-500: #4282d4;
  --color-soothing-sapphire-600: #2968b5;
  --color-soothing-sapphire-700: #165198;
  --color-soothing-sapphire-800: #083f7c;
  --color-soothing-sapphire-900: #023064;
  --color-soothing-sapphire-950: #001d43;
  --color-cooler-than-ever: #8ac0ff;
  --color-cooler-than-ever-50: #eaf4ff;
  --color-cooler-than-ever-100: #d8eaff;
  --color-cooler-than-ever-200: #b5d7ff;
  --color-cooler-than-ever-300: #8ac0ff;
  --color-cooler-than-ever-400: #6ea1dc;
  --color-cooler-than-ever-500: #5286c1;
  --color-cooler-than-ever-600: #3a6ca4;
  --color-cooler-than-ever-700: #275588;
  --color-cooler-than-ever-800: #1a436f;
  --color-cooler-than-ever-900: #10345a;
  --color-cooler-than-ever-950: #06203b;
  --color-ruthless-empress: #59419f;
  --color-ruthless-empress-50: #f5f4ff;
  --color-ruthless-empress-100: #ebe8ff;
  --color-ruthless-empress-200: #d7d1ff;
  --color-ruthless-empress-300: #c1b6ff;
  --color-ruthless-empress-400: #a390f2;
  --color-ruthless-empress-500: #8874d7;
  --color-ruthless-empress-600: #6f59b8;
  --color-ruthless-empress-700: #59419f;
  --color-ruthless-empress-800: #45327e;
  --color-ruthless-empress-900: #352465;
  --color-ruthless-empress-950: #211543;
  --color-acai: #3d2a5c;
  --color-acai-50: #f6f3ff;
  --color-acai-100: #eee7ff;
  --color-acai-200: #ddcffd;
  --color-acai-300: #c7b7eb;
  --color-acai-400: #a997cf;
  --color-acai-500: #8f7cb5;
  --color-acai-600: #756299;
  --color-acai-700: #5e4d7f;
  --color-acai-800: #4b3c67;
  --color-acai-900: #3d2a5c;
  --color-acai-950: #251c37;
}