Muddy Yellow to Pastel Blue Color Palette

About this palette

Muddy Yellow to Pastel Blue is a 4-color vibrant palette: #B6AE00 (Muddy Yellow), #B05C00 (Ginger), #5E7DF4 (Pan Purple), #B2C3FF (Pastel Blue). It mixes yellow, brown, blue tones and feels balanced overall. The strongest text pairing is #B05C00 on #B2C3FF with a contrast ratio of 2.77:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Yellow	rgb(182, 174, 0)	hsl(57, 100%, 36%)
Ginger	rgb(176, 92, 0)	hsl(31, 100%, 35%)
Pan Purple	rgb(94, 125, 244)	hsl(228, 87%, 66%)
Pastel Blue	rgb(178, 195, 255)	hsl(227, 100%, 85%)

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

/* Muddy Yellow to Pastel Blue — https://swatchly.xyz/palette/b6ae00-b05c00-5e7df4-b2c3ff */
:root {
  --muddy-yellow: #b6ae00;
  --ginger: #b05c00;
  --pan-purple: #5e7df4;
  --pastel-blue: #b2c3ff;
}

Tailwind CSS v4

/* Muddy Yellow to Pastel Blue — https://swatchly.xyz/palette/b6ae00-b05c00-5e7df4-b2c3ff */
@theme {
  --color-muddy-yellow: #b6ae00;
  --color-muddy-yellow-50: #fefcbb;
  --color-muddy-yellow-100: #f6f4ab;
  --color-muddy-yellow-200: #e6e289;
  --color-muddy-yellow-300: #d2cd62;
  --color-muddy-yellow-400: #b6ae00;
  --color-muddy-yellow-500: #979000;
  --color-muddy-yellow-600: #797400;
  --color-muddy-yellow-700: #605b00;
  --color-muddy-yellow-800: #4a4700;
  --color-muddy-yellow-900: #393600;
  --color-muddy-yellow-950: #222000;
  --color-ginger: #b05c00;
  --color-ginger-50: #fff2ea;
  --color-ginger-100: #ffe8d8;
  --color-ginger-200: #ffd0b0;
  --color-ginger-300: #ffb37c;
  --color-ginger-400: #e59251;
  --color-ginger-500: #cc762e;
  --color-ginger-600: #b05c00;
  --color-ginger-700: #8d4800;
  --color-ginger-800: #6f3800;
  --color-ginger-900: #562a00;
  --color-ginger-950: #371800;
  --color-pan-purple: #5e7df4;
  --color-pan-purple-50: #f2f5ff;
  --color-pan-purple-100: #e4ecff;
  --color-pan-purple-200: #cad8ff;
  --color-pan-purple-300: #aac0ff;
  --color-pan-purple-400: #7f9dff;
  --color-pan-purple-500: #5e7df4;
  --color-pan-purple-600: #4661d3;
  --color-pan-purple-700: #3449b2;
  --color-pan-purple-800: #253693;
  --color-pan-purple-900: #1b2877;
  --color-pan-purple-950: #0e1750;
  --color-pastel-blue: #b2c3ff;
  --color-pastel-blue-50: #f5f7ff;
  --color-pastel-blue-100: #e9eeff;
  --color-pastel-blue-200: #cfdaff;
  --color-pastel-blue-300: #b2c3ff;
  --color-pastel-blue-400: #93a3da;
  --color-pastel-blue-500: #7786be;
  --color-pastel-blue-600: #5d6ba0;
  --color-pastel-blue-700: #475384;
  --color-pastel-blue-800: #36406a;
  --color-pastel-blue-900: #283053;
  --color-pastel-blue-950: #171d37;
}