Discreet Orange to Fat Smooch color palette

FFAE9FDiscreet Orange 4E2748Murasaki E584D5Love Dust EC6A65Coral Commander 7A2A42Red Octopus BB4D74Fat Smooch

Open in generator Export PNG, PDF, ASE…

About this palette

Discreet Orange to Fat Smooch is a 6-color warm palette: #FFAE9F (Discreet Orange), #4E2748 (Murasaki), #E584D5 (Love Dust), #EC6A65 (Coral Commander), #7A2A42 (Red Octopus), #BB4D74 (Fat Smooch). It mixes pink, purple, red tones and feels warm overall. The strongest text pairing is #FFAE9F on #4E2748 with a contrast ratio of 6.91:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Discreet Orange	rgb(255, 174, 159)	hsl(9, 100%, 81%)
Murasaki	rgb(78, 39, 72)	hsl(309, 33%, 23%)
Love Dust	rgb(229, 132, 213)	hsl(310, 65%, 71%)
Coral Commander	rgb(236, 106, 101)	hsl(2, 78%, 66%)
Red Octopus	rgb(122, 42, 66)	hsl(342, 49%, 32%)
Fat Smooch	rgb(187, 77, 116)	hsl(339, 45%, 52%)

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.

Aa6.91:1 Good#FFAE9F on #4E2748
Aa6.91:1 Good#4E2748 on #FFAE9F
Aa5.28:1 Good#FFAE9F on #7A2A42
Aa5.28:1 Good#7A2A42 on #FFAE9F
Aa5.03:1 Good#4E2748 on #E584D5
Aa5.03:1 Good#E584D5 on #4E2748
Aa3.99:1 Poor#4E2748 on #EC6A65
Aa3.99:1 Poor#EC6A65 on #4E2748

Color blindness preview

CSS variables

/* Discreet Orange to Fat Smooch — https://swatchly.xyz/palette/ffae9f-4e2748-e584d5-ec6a65-7a2a42-bb4d74 */
:root {
  --discreet-orange: #ffae9f;
  --murasaki: #4e2748;
  --love-dust: #e584d5;
  --coral-commander: #ec6a65;
  --red-octopus: #7a2a42;
  --fat-smooch: #bb4d74;
}

Tailwind CSS v4

/* Discreet Orange to Fat Smooch — https://swatchly.xyz/palette/ffae9f-4e2748-e584d5-ec6a65-7a2a42-bb4d74 */
@theme {
  --color-discreet-orange: #ffae9f;
  --color-discreet-orange-50: #fff5f3;
  --color-discreet-orange-100: #ffe9e4;
  --color-discreet-orange-200: #ffcfc5;
  --color-discreet-orange-300: #ffae9f;
  --color-discreet-orange-400: #da8f82;
  --color-discreet-orange-500: #bd7264;
  --color-discreet-orange-600: #9e574b;
  --color-discreet-orange-700: #824136;
  --color-discreet-orange-800: #683027;
  --color-discreet-orange-900: #52221b;
  --color-discreet-orange-950: #35130e;
  --color-murasaki: #4e2748;
  --color-murasaki-50: #fff0fc;
  --color-murasaki-100: #ffe0f9;
  --color-murasaki-200: #efcae8;
  --color-murasaki-300: #dbb2d3;
  --color-murasaki-400: #bf92b6;
  --color-murasaki-500: #a4779c;
  --color-murasaki-600: #895e81;
  --color-murasaki-700: #70496a;
  --color-murasaki-800: #5b3955;
  --color-murasaki-900: #4e2748;
  --color-murasaki-950: #301a2c;
  --color-love-dust: #e584d5;
  --color-love-dust-50: #fff6fd;
  --color-love-dust-100: #ffe9fa;
  --color-love-dust-200: #ffccf5;
  --color-love-dust-300: #fbabed;
  --color-love-dust-400: #e584d5;
  --color-love-dust-500: #c467b6;
  --color-love-dust-600: #a54a98;
  --color-love-dust-700: #87337c;
  --color-love-dust-800: #6c2263;
  --color-love-dust-900: #55154d;
  --color-love-dust-950: #360930;
  --color-coral-commander: #ec6a65;
  --color-coral-commander-50: #ffedeb;
  --color-coral-commander-100: #ffddda;
  --color-coral-commander-200: #ffbfb9;
  --color-coral-commander-300: #ff9992;
  --color-coral-commander-400: #ec6a65;
  --color-coral-commander-500: #ce4f4c;
  --color-coral-commander-600: #af3536;
  --color-coral-commander-700: #912125;
  --color-coral-commander-800: #771318;
  --color-coral-commander-900: #60080f;
  --color-coral-commander-950: #410206;
  --color-red-octopus: #7a2a42;
  --color-red-octopus-50: #fff1f4;
  --color-red-octopus-100: #ffe3e8;
  --color-red-octopus-200: #ffc6d1;
  --color-red-octopus-300: #f8a9ba;
  --color-red-octopus-400: #de879b;
  --color-red-octopus-500: #c36c81;
  --color-red-octopus-600: #a75369;
  --color-red-octopus-700: #8d3f54;
  --color-red-octopus-800: #7a2a42;
  --color-red-octopus-900: #5d2233;
  --color-red-octopus-950: #3e121f;
  --color-fat-smooch: #bb4d74;
  --color-fat-smooch-50: #fff1f4;
  --color-fat-smooch-100: #ffe6ec;
  --color-fat-smooch-200: #ffcdda;
  --color-fat-smooch-300: #ffadc4;
  --color-fat-smooch-400: #f083a6;
  --color-fat-smooch-500: #d7678c;
  --color-fat-smooch-600: #bb4d74;
  --color-fat-smooch-700: #9b355b;
  --color-fat-smooch-800: #7e2246;
  --color-fat-smooch-900: #641535;
  --color-fat-smooch-950: #420820;
}