Tangent Periwinkle to Magic Carpet color palette

4C487FTangent Periwinkle F1BFF4Purple’s Baby Sister 1F2C49Midnight Ocean 97C6FFClear Sky 8F4A8APrunella 8783C5Magic Carpet

Open in generator Export PNG, PDF, ASE…

About this palette

Tangent Periwinkle to Magic Carpet is a 6-color cool palette: #4C487F (Tangent Periwinkle), #F1BFF4 (Purple’s Baby Sister), #1F2C49 (Midnight Ocean), #97C6FF (Clear Sky), #8F4A8A (Prunella), #8783C5 (Magic Carpet). It mixes purple, pink, blue tones and feels cool overall. The strongest text pairing is #F1BFF4 on #1F2C49 with a contrast ratio of 8.91:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tangent Periwinkle	rgb(76, 72, 127)	hsl(244, 28%, 39%)
Purple’s Baby Sister	rgb(241, 191, 244)	hsl(297, 71%, 85%)
Midnight Ocean	rgb(31, 44, 73)	hsl(221, 40%, 20%)
Clear Sky	rgb(151, 198, 255)	hsl(213, 100%, 80%)
Prunella	rgb(143, 74, 138)	hsl(304, 32%, 43%)
Magic Carpet	rgb(135, 131, 197)	hsl(244, 36%, 64%)

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.

Aa8.91:1 Very good#F1BFF4 on #1F2C49
Aa8.91:1 Very good#1F2C49 on #F1BFF4
Aa7.81:1 Very good#1F2C49 on #97C6FF
Aa7.81:1 Very good#97C6FF on #1F2C49
Aa5.31:1 Good#4C487F on #F1BFF4
Aa5.31:1 Good#F1BFF4 on #4C487F
Aa4.66:1 Good#4C487F on #97C6FF
Aa4.66:1 Good#97C6FF on #4C487F

Color blindness preview

CSS variables

/* Tangent Periwinkle to Magic Carpet — https://swatchly.xyz/palette/4c487f-f1bff4-1f2c49-97c6ff-8f4a8a-8783c5 */
:root {
  --tangent-periwinkle: #4c487f;
  --purple-s-baby-sister: #f1bff4;
  --midnight-ocean: #1f2c49;
  --clear-sky: #97c6ff;
  --prunella: #8f4a8a;
  --magic-carpet: #8783c5;
}

Tailwind CSS v4

/* Tangent Periwinkle to Magic Carpet — https://swatchly.xyz/palette/4c487f-f1bff4-1f2c49-97c6ff-8f4a8a-8783c5 */
@theme {
  --color-tangent-periwinkle: #4c487f;
  --color-tangent-periwinkle-50: #f4f4ff;
  --color-tangent-periwinkle-100: #e9e9ff;
  --color-tangent-periwinkle-200: #d2d1ff;
  --color-tangent-periwinkle-300: #b9b9ef;
  --color-tangent-periwinkle-400: #9997d3;
  --color-tangent-periwinkle-500: #7d7bb6;
  --color-tangent-periwinkle-600: #636097;
  --color-tangent-periwinkle-700: #4c487f;
  --color-tangent-periwinkle-800: #3b3863;
  --color-tangent-periwinkle-900: #2d2a4f;
  --color-tangent-periwinkle-950: #1b1933;
  --color-purple-s-baby-sister: #f1bff4;
  --color-purple-s-baby-sister-50: #feebff;
  --color-purple-s-baby-sister-100: #fbdbfd;
  --color-purple-s-baby-sister-200: #f1bff4;
  --color-purple-s-baby-sister-300: #d7acd9;
  --color-purple-s-baby-sister-400: #ba8cbd;
  --color-purple-s-baby-sister-500: #9f71a2;
  --color-purple-s-baby-sister-600: #845887;
  --color-purple-s-baby-sister-700: #6b446e;
  --color-purple-s-baby-sister-800: #563359;
  --color-purple-s-baby-sister-900: #432646;
  --color-purple-s-baby-sister-950: #2b162d;
  --color-midnight-ocean: #1f2c49;
  --color-midnight-ocean-50: #f0f5ff;
  --color-midnight-ocean-100: #e2ebff;
  --color-midnight-ocean-200: #cad8f4;
  --color-midnight-ocean-300: #b2c1e1;
  --color-midnight-ocean-400: #90a0c3;
  --color-midnight-ocean-500: #7384a6;
  --color-midnight-ocean-600: #596889;
  --color-midnight-ocean-700: #43516d;
  --color-midnight-ocean-800: #313d55;
  --color-midnight-ocean-900: #1f2c49;
  --color-midnight-ocean-950: #141a28;
  --color-clear-sky: #97c6ff;
  --color-clear-sky-50: #f0f7ff;
  --color-clear-sky-100: #e0eeff;
  --color-clear-sky-200: #bfdcff;
  --color-clear-sky-300: #97c6ff;
  --color-clear-sky-400: #7aa6db;
  --color-clear-sky-500: #5d8abf;
  --color-clear-sky-600: #446fa1;
  --color-clear-sky-700: #305785;
  --color-clear-sky-800: #21446c;
  --color-clear-sky-900: #163456;
  --color-clear-sky-950: #0b2038;
  --color-prunella: #8f4a8a;
  --color-prunella-50: #fff0fd;
  --color-prunella-100: #ffdffb;
  --color-prunella-200: #fac0f4;
  --color-prunella-300: #e7a5e0;
  --color-prunella-400: #c982c3;
  --color-prunella-500: #ac65a7;
  --color-prunella-600: #8f4a8a;
  --color-prunella-700: #743770;
  --color-prunella-800: #5d285a;
  --color-prunella-900: #4a1c47;
  --color-prunella-950: #300f2e;
  --color-magic-carpet: #8783c5;
  --color-magic-carpet-50: #f5f5ff;
  --color-magic-carpet-100: #ebebff;
  --color-magic-carpet-200: #d7d6ff;
  --color-magic-carpet-300: #c0bef8;
  --color-magic-carpet-400: #a19edf;
  --color-magic-carpet-500: #8783c5;
  --color-magic-carpet-600: #6c67a6;
  --color-magic-carpet-700: #55508a;
  --color-magic-carpet-800: #423d6f;
  --color-magic-carpet-900: #322e58;
  --color-magic-carpet-950: #1e1b39;
}