Cardinal to Pink Elephants Color Palette

About this palette

Cardinal to Pink Elephants is a 4-color vibrant palette: #C51D33 (Cardinal), #0091E4 (Out of the Blue), #7BA2FF (Fennel Flower), #FFA3EE (Pink Elephants). It mixes red, blue, pink tones and feels balanced overall. The strongest text pairing is #C51D33 on #FFA3EE with a contrast ratio of 3.26:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cardinal	rgb(197, 29, 51)	hsl(352, 74%, 44%)
Out of the Blue	rgb(0, 145, 228)	hsl(202, 100%, 45%)
Fennel Flower	rgb(123, 162, 255)	hsl(222, 100%, 74%)
Pink Elephants	rgb(255, 163, 238)	hsl(311, 100%, 82%)

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.

Aa3.26:1 Poor#C51D33 on #FFA3EE
Aa3.26:1 Poor#FFA3EE on #C51D33

Color blindness preview

CSS variables

/* Cardinal to Pink Elephants — https://swatchly.xyz/palette/c51d33-0091e4-7ba2ff-ffa3ee */
:root {
  --cardinal: #c51d33;
  --out-of-the-blue: #0091e4;
  --fennel-flower: #7ba2ff;
  --pink-elephants: #ffa3ee;
}

Tailwind CSS v4

/* Cardinal to Pink Elephants — https://swatchly.xyz/palette/c51d33-0091e4-7ba2ff-ffa3ee */
@theme {
  --color-cardinal: #c51d33;
  --color-cardinal-50: #fff1f1;
  --color-cardinal-100: #ffe4e2;
  --color-cardinal-200: #ffc8c5;
  --color-cardinal-300: #ffa5a2;
  --color-cardinal-400: #ff6a6d;
  --color-cardinal-500: #e5434d;
  --color-cardinal-600: #c51d33;
  --color-cardinal-700: #a30022;
  --color-cardinal-800: #810019;
  --color-cardinal-900: #650011;
  --color-cardinal-950: #430008;
  --color-out-of-the-blue: #0091e4;
  --color-out-of-the-blue-50: #eff7ff;
  --color-out-of-the-blue-100: #deefff;
  --color-out-of-the-blue-200: #badfff;
  --color-out-of-the-blue-300: #8ecbff;
  --color-out-of-the-blue-400: #41adfe;
  --color-out-of-the-blue-500: #0091e4;
  --color-out-of-the-blue-600: #0075b9;
  --color-out-of-the-blue-700: #005c94;
  --color-out-of-the-blue-800: #004875;
  --color-out-of-the-blue-900: #00375b;
  --color-out-of-the-blue-950: #00223b;
  --color-fennel-flower: #7ba2ff;
  --color-fennel-flower-50: #f3f7ff;
  --color-fennel-flower-100: #e5eeff;
  --color-fennel-flower-200: #cadbff;
  --color-fennel-flower-300: #a9c4ff;
  --color-fennel-flower-400: #7ba2ff;
  --color-fennel-flower-500: #6085df;
  --color-fennel-flower-600: #4769c0;
  --color-fennel-flower-700: #3351a0;
  --color-fennel-flower-800: #243e83;
  --color-fennel-flower-900: #192e69;
  --color-fennel-flower-950: #0c1b45;
  --color-pink-elephants: #ffa3ee;
  --color-pink-elephants-50: #fff5fd;
  --color-pink-elephants-100: #ffe7fa;
  --color-pink-elephants-200: #ffc9f4;
  --color-pink-elephants-300: #ffa3ee;
  --color-pink-elephants-400: #d985ca;
  --color-pink-elephants-500: #bc66ae;
  --color-pink-elephants-600: #9e4b90;
  --color-pink-elephants-700: #813575;
  --color-pink-elephants-800: #67245d;
  --color-pink-elephants-900: #511849;
  --color-pink-elephants-950: #350c2f;
}