Fabric of Space to Somewhere in a Fairytale color palette

31194FFabric of Space AA1E0BSalsa Picante F3FFD3Matt White 0095A6Oasis C09EE4Somewhere in a Fairytale

Open in generator Export PNG, PDF, ASE…

About this palette

Fabric of Space to Somewhere in a Fairytale is a 5-color cool palette: #31194F (Fabric of Space), #AA1E0B (Salsa Picante), #F3FFD3 (Matt White), #0095A6 (Oasis), #C09EE4 (Somewhere in a Fairytale). It mixes purple, red, white, turquoise tones and feels cool overall. The strongest text pairing is #31194F on #F3FFD3 with a contrast ratio of 14.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fabric of Space	rgb(49, 25, 79)	hsl(267, 52%, 20%)
Salsa Picante	rgb(170, 30, 11)	hsl(7, 88%, 35%)
Matt White	rgb(243, 255, 211)	hsl(76, 100%, 91%)
Oasis	rgb(0, 149, 166)	hsl(186, 100%, 33%)
Somewhere in a Fairytale	rgb(192, 158, 228)	hsl(269, 56%, 76%)

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.

Aa14.51:1 Super#31194F on #F3FFD3
Aa14.51:1 Super#F3FFD3 on #31194F
Aa6.92:1 Good#AA1E0B on #F3FFD3
Aa6.92:1 Good#F3FFD3 on #AA1E0B
Aa6.69:1 Good#31194F on #C09EE4
Aa6.69:1 Good#C09EE4 on #31194F
Aa4.23:1 Poor#31194F on #0095A6
Aa4.23:1 Poor#0095A6 on #31194F

Color blindness preview

CSS variables

/* Fabric of Space to Somewhere in a Fairytale — https://swatchly.xyz/palette/31194f-aa1e0b-f3ffd3-0095a6-c09ee4 */
:root {
  --fabric-of-space: #31194f;
  --salsa-picante: #aa1e0b;
  --matt-white: #f3ffd3;
  --oasis: #0095a6;
  --somewhere-in-a-fairytale: #c09ee4;
}

Tailwind CSS v4

/* Fabric of Space to Somewhere in a Fairytale — https://swatchly.xyz/palette/31194f-aa1e0b-f3ffd3-0095a6-c09ee4 */
@theme {
  --color-fabric-of-space: #31194f;
  --color-fabric-of-space-50: #f7f3ff;
  --color-fabric-of-space-100: #efe6ff;
  --color-fabric-of-space-200: #dfceff;
  --color-fabric-of-space-300: #c9b5ee;
  --color-fabric-of-space-400: #ab94d2;
  --color-fabric-of-space-500: #927ab9;
  --color-fabric-of-space-600: #79629e;
  --color-fabric-of-space-700: #634e85;
  --color-fabric-of-space-800: #513d6f;
  --color-fabric-of-space-900: #42315c;
  --color-fabric-of-space-950: #31194f;
  --color-salsa-picante: #aa1e0b;
  --color-salsa-picante-50: #fff2ef;
  --color-salsa-picante-100: #ffe4df;
  --color-salsa-picante-200: #ffcbc1;
  --color-salsa-picante-300: #ffab9b;
  --color-salsa-picante-400: #fd7761;
  --color-salsa-picante-500: #e25843;
  --color-salsa-picante-600: #c43c29;
  --color-salsa-picante-700: #aa1e0b;
  --color-salsa-picante-800: #881102;
  --color-salsa-picante-900: #6c0800;
  --color-salsa-picante-950: #470300;
  --color-matt-white: #f3ffd3;
  --color-matt-white-50: #f3ffd3;
  --color-matt-white-100: #ebf2d8;
  --color-matt-white-200: #d6debf;
  --color-matt-white-300: #bec8a4;
  --color-matt-white-400: #9ea881;
  --color-matt-white-500: #828c64;
  --color-matt-white-600: #67714b;
  --color-matt-white-700: #515a37;
  --color-matt-white-800: #3f4628;
  --color-matt-white-900: #30361c;
  --color-matt-white-950: #1d220f;
  --color-oasis: #0095a6;
  --color-oasis-50: #e0fbff;
  --color-oasis-100: #bff6ff;
  --color-oasis-200: #97e5f2;
  --color-oasis-300: #73d0df;
  --color-oasis-400: #41b1c2;
  --color-oasis-500: #0095a6;
  --color-oasis-600: #007886;
  --color-oasis-700: #005f6b;
  --color-oasis-800: #004b54;
  --color-oasis-900: #003a41;
  --color-oasis-950: #002429;
  --color-somewhere-in-a-fairytale: #c09ee4;
  --color-somewhere-in-a-fairytale-50: #fbf9ff;
  --color-somewhere-in-a-fairytale-100: #f6efff;
  --color-somewhere-in-a-fairytale-200: #ead8ff;
  --color-somewhere-in-a-fairytale-300: #dabff9;
  --color-somewhere-in-a-fairytale-400: #c09ee4;
  --color-somewhere-in-a-fairytale-500: #a180c3;
  --color-somewhere-in-a-fairytale-600: #8463a4;
  --color-somewhere-in-a-fairytale-700: #6a4b87;
  --color-somewhere-in-a-fairytale-800: #53386c;
  --color-somewhere-in-a-fairytale-900: #3f2854;
  --color-somewhere-in-a-fairytale-950: #261735;
}