Young Crab to Serrano Pepper color palette

FFA197Young Crab 003F47Rich Black DC5B50Pimento EDE8FFHolographic Lavender 606C00Serrano Pepper

About this palette

Young Crab to Serrano Pepper is a 5-color vintage palette: #FFA197 (Young Crab), #003F47 (Rich Black), #DC5B50 (Pimento), #EDE8FF (Holographic Lavender), #606C00 (Serrano Pepper). It mixes pink, turquoise, red, white, green tones and feels balanced overall. The strongest text pairing is #003F47 on #EDE8FF with a contrast ratio of 9.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Young Crab	rgb(255, 161, 151)	hsl(6, 100%, 80%)
Rich Black	rgb(0, 63, 71)	hsl(187, 100%, 14%)
Pimento	rgb(220, 91, 80)	hsl(5, 67%, 59%)
Holographic Lavender	rgb(237, 232, 255)	hsl(253, 100%, 95%)
Serrano Pepper	rgb(96, 108, 0)	hsl(67, 100%, 21%)

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.

Aa9.76:1 Very good#003F47 on #EDE8FF
Aa9.76:1 Very good#EDE8FF on #003F47
Aa5.99:1 Good#FFA197 on #003F47
Aa5.99:1 Good#003F47 on #FFA197
Aa4.83:1 Good#EDE8FF on #606C00
Aa4.83:1 Good#606C00 on #EDE8FF
Aa3.14:1 Poor#003F47 on #DC5B50
Aa3.14:1 Poor#DC5B50 on #003F47

Color blindness preview

CSS variables

/* Young Crab to Serrano Pepper — https://swatchly.xyz/palette/ffa197-003f47-dc5b50-ede8ff-606c00 */
:root {
  --young-crab: #ffa197;
  --rich-black: #003f47;
  --pimento: #dc5b50;
  --holographic-lavender: #ede8ff;
  --serrano-pepper: #606c00;
}

Tailwind CSS v4

/* Young Crab to Serrano Pepper — https://swatchly.xyz/palette/ffa197-003f47-dc5b50-ede8ff-606c00 */
@theme {
  --color-young-crab: #ffa197;
  --color-young-crab-50: #fff0ee;
  --color-young-crab-100: #ffe1de;
  --color-young-crab-200: #ffc5be;
  --color-young-crab-300: #ffa197;
  --color-young-crab-400: #db847b;
  --color-young-crab-500: #bf675f;
  --color-young-crab-600: #a14e47;
  --color-young-crab-700: #853a34;
  --color-young-crab-800: #6c2a25;
  --color-young-crab-900: #561e1a;
  --color-young-crab-950: #38100e;
  --color-rich-black: #003f47;
  --color-rich-black-50: #e1fbff;
  --color-rich-black-100: #d1f2f8;
  --color-rich-black-200: #b8e0e7;
  --color-rich-black-300: #9ccad2;
  --color-rich-black-400: #79acb5;
  --color-rich-black-500: #5d929b;
  --color-rich-black-600: #437880;
  --color-rich-black-700: #306169;
  --color-rich-black-800: #214d54;
  --color-rich-black-900: #003f47;
  --color-rich-black-950: #0a272c;
  --color-pimento: #dc5b50;
  --color-pimento-50: #fff3f1;
  --color-pimento-100: #ffe6e3;
  --color-pimento-200: #ffccc4;
  --color-pimento-300: #ffaba0;
  --color-pimento-400: #f77a6d;
  --color-pimento-500: #dc5b50;
  --color-pimento-600: #bb3e36;
  --color-pimento-700: #9b2722;
  --color-pimento-800: #7e1614;
  --color-pimento-900: #650a0a;
  --color-pimento-950: #420203;
  --color-holographic-lavender: #ede8ff;
  --color-holographic-lavender-50: #f6f4ff;
  --color-holographic-lavender-100: #ede8ff;
  --color-holographic-lavender-200: #d9d5e6;
  --color-holographic-lavender-300: #c2bed1;
  --color-holographic-lavender-400: #a39eb3;
  --color-holographic-lavender-500: #888398;
  --color-holographic-lavender-600: #6d697c;
  --color-holographic-lavender-700: #565264;
  --color-holographic-lavender-800: #43404f;
  --color-holographic-lavender-900: #34313e;
  --color-holographic-lavender-950: #201e27;
  --color-serrano-pepper: #606c00;
  --color-serrano-pepper-50: #f1fccb;
  --color-serrano-pepper-100: #e6f1b9;
  --color-serrano-pepper-200: #d0dd9a;
  --color-serrano-pepper-300: #b8c679;
  --color-serrano-pepper-400: #97a54f;
  --color-serrano-pepper-500: #7b882d;
  --color-serrano-pepper-600: #606c00;
  --color-serrano-pepper-700: #4c5600;
  --color-serrano-pepper-800: #3b4300;
  --color-serrano-pepper-900: #2d3400;
  --color-serrano-pepper-950: #1c2000;
}