Polly to Soulless Color Palette

About this palette

Polly to Soulless is a 4-color palette: #FFCCA4 (Polly), #009DB5 (Blue Ocean), #5649A2 (Ultrapurple Merge), #1F1206 (Soulless). It mixes orange, turquoise, purple, black tones and feels cool overall. The strongest text pairing is #FFCCA4 on #1F1206 with a contrast ratio of 12.57:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Polly	rgb(255, 204, 164)	hsl(26, 100%, 82%)
Blue Ocean	rgb(0, 157, 181)	hsl(188, 100%, 35%)
Ultrapurple Merge	rgb(86, 73, 162)	hsl(249, 38%, 46%)
Soulless	rgb(31, 18, 6)	hsl(29, 68%, 7%)

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.57:1 Super#FFCCA4 on #1F1206
Aa12.57:1 Super#1F1206 on #FFCCA4
Aa5.66:1 Good#009DB5 on #1F1206
Aa5.66:1 Good#1F1206 on #009DB5
Aa5.03:1 Good#FFCCA4 on #5649A2
Aa5.03:1 Good#5649A2 on #FFCCA4

Color blindness preview

CSS variables

/* Polly to Soulless — https://swatchly.xyz/palette/ffcca4-009db5-5649a2-1f1206 */
:root {
  --polly: #ffcca4;
  --blue-ocean: #009db5;
  --ultrapurple-merge: #5649a2;
  --soulless: #1f1206;
}

Tailwind CSS v4

/* Polly to Soulless — https://swatchly.xyz/palette/ffcca4-009db5-5649a2-1f1206 */
@theme {
  --color-polly: #ffcca4;
  --color-polly-50: #fff3e9;
  --color-polly-100: #ffe6d3;
  --color-polly-200: #ffcca4;
  --color-polly-300: #e2b796;
  --color-polly-400: #c59772;
  --color-polly-500: #a97b55;
  --color-polly-600: #8d613c;
  --color-polly-700: #734b29;
  --color-polly-800: #5c391b;
  --color-polly-900: #482b11;
  --color-polly-950: #2f1a07;
  --color-blue-ocean: #009db5;
  --color-blue-ocean-50: #e7faff;
  --color-blue-ocean-100: #cef6ff;
  --color-blue-ocean-200: #9ae9fb;
  --color-blue-ocean-300: #77d5ea;
  --color-blue-ocean-400: #45b8cf;
  --color-blue-ocean-500: #009db5;
  --color-blue-ocean-600: #007e92;
  --color-blue-ocean-700: #006474;
  --color-blue-ocean-800: #004e5b;
  --color-blue-ocean-900: #003c46;
  --color-blue-ocean-950: #00252c;
  --color-ultrapurple-merge: #5649a2;
  --color-ultrapurple-merge-50: #f4f4ff;
  --color-ultrapurple-merge-100: #e9e9ff;
  --color-ultrapurple-merge-200: #d4d3ff;
  --color-ultrapurple-merge-300: #bdbaff;
  --color-ultrapurple-merge-400: #9e96f2;
  --color-ultrapurple-merge-500: #847ad8;
  --color-ultrapurple-merge-600: #6b60ba;
  --color-ultrapurple-merge-700: #5649a2;
  --color-ultrapurple-merge-800: #433881;
  --color-ultrapurple-merge-900: #332968;
  --color-ultrapurple-merge-950: #201845;
  --color-soulless: #1f1206;
  --color-soulless-50: #fef3ea;
  --color-soulless-100: #f5e9de;
  --color-soulless-200: #e3d5c8;
  --color-soulless-300: #cebeb0;
  --color-soulless-400: #af9e8f;
  --color-soulless-500: #928071;
  --color-soulless-600: #746456;
  --color-soulless-700: #5b4c40;
  --color-soulless-800: #44382e;
  --color-soulless-900: #31281f;
  --color-soulless-950: #1f1206;
}