Very Berry to Soft Boiled Color Palette

About this palette

Very Berry to Soft Boiled is a 5-color vibrant, warm palette: #BA3F87 (Very Berry), #489200 (Grass Is Greener), #ABA000 (Countryside), #00B6E1 (Blue Bikini), #FFB937 (Soft Boiled). It mixes red, green, yellow, blue tones and feels warm overall. The strongest text pairing is #BA3F87 on #FFB937 with a contrast ratio of 2.95:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Very Berry	rgb(186, 63, 135)	hsl(325, 49%, 49%)
Grass Is Greener	rgb(72, 146, 0)	hsl(90, 100%, 29%)
Countryside	rgb(171, 160, 0)	hsl(56, 100%, 34%)
Blue Bikini	rgb(0, 182, 225)	hsl(191, 100%, 44%)
Soft Boiled	rgb(255, 185, 55)	hsl(39, 100%, 61%)

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

/* Very Berry to Soft Boiled — https://swatchly.xyz/palette/ba3f87-489200-aba000-00b6e1-ffb937 */
:root {
  --very-berry: #ba3f87;
  --grass-is-greener: #489200;
  --countryside: #aba000;
  --blue-bikini: #00b6e1;
  --soft-boiled: #ffb937;
}

Tailwind CSS v4

/* Very Berry to Soft Boiled — https://swatchly.xyz/palette/ba3f87-489200-aba000-00b6e1-ffb937 */
@theme {
  --color-very-berry: #ba3f87;
  --color-very-berry-50: #fff1f7;
  --color-very-berry-100: #ffe5f1;
  --color-very-berry-200: #ffc9e3;
  --color-very-berry-300: #ffa6d4;
  --color-very-berry-400: #f179ba;
  --color-very-berry-500: #d75ba1;
  --color-very-berry-600: #ba3f87;
  --color-very-berry-700: #9a276d;
  --color-very-berry-800: #7d1456;
  --color-very-berry-900: #640743;
  --color-very-berry-950: #42012a;
  --color-grass-is-greener: #489200;
  --color-grass-is-greener-50: #dfffcf;
  --color-grass-is-greener-100: #c7f9ae;
  --color-grass-is-greener-200: #abe68c;
  --color-grass-is-greener-300: #8dd068;
  --color-grass-is-greener-400: #66b038;
  --color-grass-is-greener-500: #489200;
  --color-grass-is-greener-600: #397600;
  --color-grass-is-greener-700: #2c5e00;
  --color-grass-is-greener-800: #214a00;
  --color-grass-is-greener-900: #183a00;
  --color-grass-is-greener-950: #0d2500;
  --color-countryside: #aba000;
  --color-countryside-50: #fbf7b6;
  --color-countryside-100: #f2eca3;
  --color-countryside-200: #dfd87f;
  --color-countryside-300: #c9c156;
  --color-countryside-400: #aba000;
  --color-countryside-500: #8e8500;
  --color-countryside-600: #736b00;
  --color-countryside-700: #5b5500;
  --color-countryside-800: #484300;
  --color-countryside-900: #383300;
  --color-countryside-950: #232000;
  --color-blue-bikini: #00b6e1;
  --color-blue-bikini-50: #eaf9ff;
  --color-blue-bikini-100: #d3f3ff;
  --color-blue-bikini-200: #a0e6ff;
  --color-blue-bikini-300: #66d4f8;
  --color-blue-bikini-400: #00b6e1;
  --color-blue-bikini-500: #0097bc;
  --color-blue-bikini-600: #007a98;
  --color-blue-bikini-700: #006079;
  --color-blue-bikini-800: #004b5f;
  --color-blue-bikini-900: #003a49;
  --color-blue-bikini-950: #00242f;
  --color-soft-boiled: #ffb937;
  --color-soft-boiled-50: #fff7ec;
  --color-soft-boiled-100: #ffedd2;
  --color-soft-boiled-200: #ffd697;
  --color-soft-boiled-300: #ffb937;
  --color-soft-boiled-400: #d9990f;
  --color-soft-boiled-500: #b67e00;
  --color-soft-boiled-600: #926500;
  --color-soft-boiled-700: #744f00;
  --color-soft-boiled-800: #5a3d00;
  --color-soft-boiled-900: #452e00;
  --color-soft-boiled-950: #2c1c00;
}