Soda Pop to Fatback Color Palette

About this palette

Soda Pop to Fatback is a 4-color pastel, light, gradient palette: #C5C482 (Soda Pop), #FFCFC3 (Cloud Number Nine), #E7E6FF (Holographic Lavender), #FFF6EB (Fatback). It mixes yellow, pink, white tones and feels warm overall. The strongest text pairing is #C5C482 on #FFF6EB with a contrast ratio of 1.69:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soda Pop	rgb(197, 196, 130)	hsl(59, 37%, 64%)
Cloud Number Nine	rgb(255, 207, 195)	hsl(12, 100%, 88%)
Holographic Lavender	rgb(231, 230, 255)	hsl(242, 100%, 95%)
Fatback	rgb(255, 246, 235)	hsl(33, 100%, 96%)

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.

Color blindness preview

CSS variables

/* Soda Pop to Fatback — https://swatchly.xyz/palette/c5c482-ffcfc3-e7e6ff-fff6eb */
:root {
  --soda-pop: #c5c482;
  --cloud-number-nine: #ffcfc3;
  --holographic-lavender: #e7e6ff;
  --fatback: #fff6eb;
}

Tailwind CSS v4

/* Soda Pop to Fatback — https://swatchly.xyz/palette/c5c482-ffcfc3-e7e6ff-fff6eb */
@theme {
  --color-soda-pop: #c5c482;
  --color-soda-pop-50: #f7f7d3;
  --color-soda-pop-100: #ededc4;
  --color-soda-pop-200: #dadaa9;
  --color-soda-pop-300: #c5c482;
  --color-soda-pop-400: #a6a466;
  --color-soda-pop-500: #8b8949;
  --color-soda-pop-600: #706f30;
  --color-soda-pop-700: #5a581c;
  --color-soda-pop-800: #46450e;
  --color-soda-pop-900: #363506;
  --color-soda-pop-950: #222101;
  --color-cloud-number-nine: #ffcfc3;
  --color-cloud-number-nine-50: #fff6f3;
  --color-cloud-number-nine-100: #ffe9e4;
  --color-cloud-number-nine-200: #ffcfc3;
  --color-cloud-number-nine-300: #e1bab0;
  --color-cloud-number-nine-400: #c4998e;
  --color-cloud-number-nine-500: #a87c71;
  --color-cloud-number-nine-600: #8a6157;
  --color-cloud-number-nine-700: #704b42;
  --color-cloud-number-nine-800: #593931;
  --color-cloud-number-nine-900: #462b24;
  --color-cloud-number-nine-950: #2d1915;
  --color-holographic-lavender: #e7e6ff;
  --color-holographic-lavender-50: #f2f2ff;
  --color-holographic-lavender-100: #e7e6ff;
  --color-holographic-lavender-200: #d4d3e6;
  --color-holographic-lavender-300: #bebdd2;
  --color-holographic-lavender-400: #9f9eb4;
  --color-holographic-lavender-500: #848399;
  --color-holographic-lavender-600: #6a697e;
  --color-holographic-lavender-700: #545366;
  --color-holographic-lavender-800: #414051;
  --color-holographic-lavender-900: #32313f;
  --color-holographic-lavender-950: #1f1e28;
  --color-fatback: #fff6eb;
  --color-fatback-50: #fff6eb;
  --color-fatback-100: #f2ece6;
  --color-fatback-200: #ded8d0;
  --color-fatback-300: #c8c1b8;
  --color-fatback-400: #a9a197;
  --color-fatback-500: #8d857b;
  --color-fatback-600: #726a61;
  --color-fatback-700: #5b544c;
  --color-fatback-800: #47413a;
  --color-fatback-900: #37322c;
  --color-fatback-950: #221f1a;
}