Bento Box to Pastel Blue Color Palette

About this palette

Bento Box to Pastel Blue is a 4-color vibrant, warm palette: #CA3A43 (Bento Box), #988100 (Captain Kirk), #C1AF00 (Muddy Yellow), #A0B9FF (Pastel Blue). It mixes red, yellow, blue tones and feels warm overall. The strongest text pairing is #CA3A43 on #A0B9FF with a contrast ratio of 2.59:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bento Box	rgb(202, 58, 67)	hsl(356, 58%, 51%)
Captain Kirk	rgb(152, 129, 0)	hsl(51, 100%, 30%)
Muddy Yellow	rgb(193, 175, 0)	hsl(54, 100%, 38%)
Pastel Blue	rgb(160, 185, 255)	hsl(224, 100%, 81%)

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

/* Bento Box to Pastel Blue — https://swatchly.xyz/palette/ca3a43-988100-c1af00-a0b9ff */
:root {
  --bento-box: #ca3a43;
  --captain-kirk: #988100;
  --muddy-yellow: #c1af00;
  --pastel-blue: #a0b9ff;
}

Tailwind CSS v4

/* Bento Box to Pastel Blue — https://swatchly.xyz/palette/ca3a43-988100-c1af00-a0b9ff */
@theme {
  --color-bento-box: #ca3a43;
  --color-bento-box-50: #fff1f1;
  --color-bento-box-100: #ffe6e5;
  --color-bento-box-200: #ffcdcb;
  --color-bento-box-300: #ffaeab;
  --color-bento-box-400: #ff7979;
  --color-bento-box-500: #e7575c;
  --color-bento-box-600: #ca3a43;
  --color-bento-box-700: #a91f2e;
  --color-bento-box-800: #8a081e;
  --color-bento-box-900: #6d0014;
  --color-bento-box-950: #470009;
  --color-captain-kirk: #988100;
  --color-captain-kirk-50: #fff5ca;
  --color-captain-kirk-100: #f9eaae;
  --color-captain-kirk-200: #e7d68d;
  --color-captain-kirk-300: #d2be69;
  --color-captain-kirk-400: #b49d39;
  --color-captain-kirk-500: #988100;
  --color-captain-kirk-600: #7b6800;
  --color-captain-kirk-700: #615200;
  --color-captain-kirk-800: #4d4000;
  --color-captain-kirk-900: #3b3100;
  --color-captain-kirk-950: #261e00;
  --color-muddy-yellow: #c1af00;
  --color-muddy-yellow-50: #fffbd7;
  --color-muddy-yellow-100: #fdf4ad;
  --color-muddy-yellow-200: #ede28c;
  --color-muddy-yellow-300: #dbce65;
  --color-muddy-yellow-400: #c1af00;
  --color-muddy-yellow-500: #a09100;
  --color-muddy-yellow-600: #817400;
  --color-muddy-yellow-700: #665c00;
  --color-muddy-yellow-800: #4f4700;
  --color-muddy-yellow-900: #3c3500;
  --color-muddy-yellow-950: #242000;
  --color-pastel-blue: #a0b9ff;
  --color-pastel-blue-50: #edf2ff;
  --color-pastel-blue-100: #dee7ff;
  --color-pastel-blue-200: #c1d2ff;
  --color-pastel-blue-300: #a0b9ff;
  --color-pastel-blue-400: #839adc;
  --color-pastel-blue-500: #6980c1;
  --color-pastel-blue-600: #5166a4;
  --color-pastel-blue-700: #3e5088;
  --color-pastel-blue-800: #2f3e6f;
  --color-pastel-blue-900: #23305a;
  --color-pastel-blue-950: #141d3b;
}