Noble Red to Sour Color Palette

About this palette

Noble Red to Sour is a 5-color cool palette: #90222B (Noble Red), #4BD7D2 (Fish Boy), #8074E5 (Matt Purple), #301B52 (Fabric of Space), #ECF0BB (Sour). It mixes red, turquoise, purple, yellow tones and feels cool overall. The strongest text pairing is #301B52 on #ECF0BB with a contrast ratio of 12.64:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noble Red	rgb(144, 34, 43)	hsl(355, 62%, 35%)
Fish Boy	rgb(75, 215, 210)	hsl(178, 64%, 57%)
Matt Purple	rgb(128, 116, 229)	hsl(246, 68%, 68%)
Fabric of Space	rgb(48, 27, 82)	hsl(263, 50%, 21%)
Sour	rgb(236, 240, 187)	hsl(65, 64%, 84%)

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.

Aa12.64:1 Super#301B52 on #ECF0BB
Aa12.64:1 Super#ECF0BB on #301B52
Aa8.51:1 Very good#4BD7D2 on #301B52
Aa8.51:1 Very good#301B52 on #4BD7D2
Aa7.25:1 Very good#90222B on #ECF0BB
Aa7.25:1 Very good#ECF0BB on #90222B
Aa4.88:1 Good#90222B on #4BD7D2
Aa4.88:1 Good#4BD7D2 on #90222B

Color blindness preview

CSS variables

/* Noble Red to Sour — https://swatchly.xyz/palette/90222b-4bd7d2-8074e5-301b52-ecf0bb */
:root {
  --noble-red: #90222b;
  --fish-boy: #4bd7d2;
  --matt-purple: #8074e5;
  --fabric-of-space: #301b52;
  --sour: #ecf0bb;
}

Tailwind CSS v4

/* Noble Red to Sour — https://swatchly.xyz/palette/90222b-4bd7d2-8074e5-301b52-ecf0bb */
@theme {
  --color-noble-red: #90222b;
  --color-noble-red-50: #fff1f1;
  --color-noble-red-100: #ffe4e2;
  --color-noble-red-200: #ffc6c4;
  --color-noble-red-300: #ffa2a0;
  --color-noble-red-400: #e97878;
  --color-noble-red-500: #cb5a5b;
  --color-noble-red-600: #aa3f42;
  --color-noble-red-700: #90222b;
  --color-noble-red-800: #711b21;
  --color-noble-red-900: #5a1117;
  --color-noble-red-950: #3b070b;
  --color-fish-boy: #4bd7d2;
  --color-fish-boy-50: #d0fffc;
  --color-fish-boy-100: #affaf6;
  --color-fish-boy-200: #8ce9e4;
  --color-fish-boy-300: #4bd7d2;
  --color-fish-boy-400: #26b6b2;
  --color-fish-boy-500: #009995;
  --color-fish-boy-600: #007b78;
  --color-fish-boy-700: #00625f;
  --color-fish-boy-800: #004d4b;
  --color-fish-boy-900: #003c3a;
  --color-fish-boy-950: #002524;
  --color-matt-purple: #8074e5;
  --color-matt-purple-50: #f4f4ff;
  --color-matt-purple-100: #e9e9ff;
  --color-matt-purple-200: #d3d3ff;
  --color-matt-purple-300: #bbb9ff;
  --color-matt-purple-400: #9a91ff;
  --color-matt-purple-500: #8074e5;
  --color-matt-purple-600: #6759c5;
  --color-matt-purple-700: #5142a6;
  --color-matt-purple-800: #3f3188;
  --color-matt-purple-900: #30236d;
  --color-matt-purple-950: #1e1449;
  --color-fabric-of-space: #301b52;
  --color-fabric-of-space-50: #f6f3ff;
  --color-fabric-of-space-100: #ede7ff;
  --color-fabric-of-space-200: #dccfff;
  --color-fabric-of-space-300: #c6b6f0;
  --color-fabric-of-space-400: #a693d2;
  --color-fabric-of-space-500: #8976b5;
  --color-fabric-of-space-600: #6d5a95;
  --color-fabric-of-space-700: #544378;
  --color-fabric-of-space-800: #3f315d;
  --color-fabric-of-space-900: #301b52;
  --color-fabric-of-space-950: #1b132b;
  --color-sour: #ecf0bb;
  --color-sour-50: #f5f8db;
  --color-sour-100: #ecf0bb;
  --color-sour-200: #d8dbb5;
  --color-sour-300: #c2c599;
  --color-sour-400: #a2a676;
  --color-sour-500: #878a59;
  --color-sour-600: #6d7040;
  --color-sour-700: #57592d;
  --color-sour-800: #43451f;
  --color-sour-900: #343514;
  --color-sour-950: #202109;
}