Cherry Berry to Pristine Oceanic Color Palette

About this palette

Cherry Berry to Pristine Oceanic is a 4-color vintage palette: #994D6F (Cherry Berry), #FFE9B2 (Banana Mania), #10284E (Midnight Ocean), #00CDB1 (Pristine Oceanic). It mixes red, yellow, blue, turquoise tones and feels balanced overall. The strongest text pairing is #FFE9B2 on #10284E with a contrast ratio of 12.23:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cherry Berry	rgb(153, 77, 111)	hsl(333, 33%, 45%)
Banana Mania	rgb(255, 233, 178)	hsl(43, 100%, 85%)
Midnight Ocean	rgb(16, 40, 78)	hsl(217, 66%, 18%)
Pristine Oceanic	rgb(0, 205, 177)	hsl(172, 100%, 40%)

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.

Aa12.23:1 Super#FFE9B2 on #10284E
Aa12.23:1 Super#10284E on #FFE9B2
Aa7.22:1 Very good#10284E on #00CDB1
Aa7.22:1 Very good#00CDB1 on #10284E
Aa4.81:1 Good#994D6F on #FFE9B2
Aa4.81:1 Good#FFE9B2 on #994D6F

Color blindness preview

CSS variables

/* Cherry Berry to Pristine Oceanic — https://swatchly.xyz/palette/994d6f-ffe9b2-10284e-00cdb1 */
:root {
  --cherry-berry: #994d6f;
  --banana-mania: #ffe9b2;
  --midnight-ocean: #10284e;
  --pristine-oceanic: #00cdb1;
}

Tailwind CSS v4

/* Cherry Berry to Pristine Oceanic — https://swatchly.xyz/palette/994d6f-ffe9b2-10284e-00cdb1 */
@theme {
  --color-cherry-berry: #994d6f;
  --color-cherry-berry-50: #fff1f6;
  --color-cherry-berry-100: #ffe2ed;
  --color-cherry-berry-200: #ffc3db;
  --color-cherry-berry-300: #f0a7c5;
  --color-cherry-berry-400: #d384a5;
  --color-cherry-berry-500: #b7688a;
  --color-cherry-berry-600: #994d6f;
  --color-cherry-berry-700: #7d3a58;
  --color-cherry-berry-800: #652a45;
  --color-cherry-berry-900: #501e35;
  --color-cherry-berry-950: #341021;
  --color-banana-mania: #ffe9b2;
  --color-banana-mania-50: #fff4d9;
  --color-banana-mania-100: #ffe9b2;
  --color-banana-mania-200: #e6d6ae;
  --color-banana-mania-300: #d1bf92;
  --color-banana-mania-400: #b39f6d;
  --color-banana-mania-500: #988450;
  --color-banana-mania-600: #7d6a37;
  --color-banana-mania-700: #655324;
  --color-banana-mania-800: #504016;
  --color-banana-mania-900: #3e310d;
  --color-banana-mania-950: #271e05;
  --color-midnight-ocean: #10284e;
  --color-midnight-ocean-50: #f0f6ff;
  --color-midnight-ocean-100: #e0ecff;
  --color-midnight-ocean-200: #c2d9fd;
  --color-midnight-ocean-300: #a8c2ec;
  --color-midnight-ocean-400: #84a1ce;
  --color-midnight-ocean-500: #6783b0;
  --color-midnight-ocean-600: #4c6791;
  --color-midnight-ocean-700: #374f73;
  --color-midnight-ocean-800: #273a59;
  --color-midnight-ocean-900: #10284e;
  --color-midnight-ocean-950: #0d1829;
  --color-pristine-oceanic: #00cdb1;
  --color-pristine-oceanic-50: #eefffa;
  --color-pristine-oceanic-100: #d1fff3;
  --color-pristine-oceanic-200: #9af7e2;
  --color-pristine-oceanic-300: #74e6ce;
  --color-pristine-oceanic-400: #00cdb1;
  --color-pristine-oceanic-500: #00aa93;
  --color-pristine-oceanic-600: #008975;
  --color-pristine-oceanic-700: #006c5c;
  --color-pristine-oceanic-800: #005347;
  --color-pristine-oceanic-900: #003f35;
  --color-pristine-oceanic-950: #00261f;
}