Start generating

Pristine Oceanic to Mochaccino color palette

00CEB3Pristine Oceanic53242BLonestarB86C75Watermelon Gelato763B00Hazelnut Chocolate8DC1F5Sail to the Sea905300Mochaccino
Open in generator Export PNG, PDF, ASE…

About this palette

Pristine Oceanic to Mochaccino is a 6-color warm palette: #00CEB3 (Pristine Oceanic), #53242B (Lonestar), #B86C75 (Watermelon Gelato), #763B00 (Hazelnut Chocolate), #8DC1F5 (Sail to the Sea), #905300 (Mochaccino). It mixes turquoise, brown, red, blue tones and feels warm overall. The strongest text pairing is #53242B on #8DC1F5 with a contrast ratio of 6.69:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pristine Oceanicrgb(0, 206, 179)hsl(172, 100%, 40%)
Lonestarrgb(83, 36, 43)hsl(351, 39%, 23%)
Watermelon Gelatorgb(184, 108, 117)hsl(353, 35%, 57%)
Hazelnut Chocolatergb(118, 59, 0)hsl(30, 100%, 23%)
Sail to the Seargb(141, 193, 245)hsl(210, 84%, 76%)
Mochaccinorgb(144, 83, 0)hsl(35, 100%, 28%)

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.

  • Aa6.69:1 Good#53242B on #8DC1F5
  • Aa6.69:1 Good#8DC1F5 on #53242B
  • Aa6.33:1 Good#00CEB3 on #53242B
  • Aa6.33:1 Good#53242B on #00CEB3
  • Aa4.62:1 Good#763B00 on #8DC1F5
  • Aa4.62:1 Good#8DC1F5 on #763B00
  • Aa4.37:1 Poor#00CEB3 on #763B00
  • Aa4.37:1 Poor#763B00 on #00CEB3

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pristine Oceanic to Mochaccino — https://swatchly.xyz/palette/00ceb3-53242b-b86c75-763b00-8dc1f5-905300 */
:root {
  --pristine-oceanic: #00ceb3;
  --lonestar: #53242b;
  --watermelon-gelato: #b86c75;
  --hazelnut-chocolate: #763b00;
  --sail-to-the-sea: #8dc1f5;
  --mochaccino: #905300;
}

Tailwind CSS v4

/* Pristine Oceanic to Mochaccino — https://swatchly.xyz/palette/00ceb3-53242b-b86c75-763b00-8dc1f5-905300 */
@theme {
  --color-pristine-oceanic: #00ceb3;
  --color-pristine-oceanic-50: #b4ffee;
  --color-pristine-oceanic-100: #96f6e2;
  --color-pristine-oceanic-200: #6ce3cc;
  --color-pristine-oceanic-300: #00ceb3;
  --color-pristine-oceanic-400: #00ad96;
  --color-pristine-oceanic-500: #00917e;
  --color-pristine-oceanic-600: #007666;
  --color-pristine-oceanic-700: #005f51;
  --color-pristine-oceanic-800: #004c41;
  --color-pristine-oceanic-900: #003c33;
  --color-pristine-oceanic-950: #002620;
  --color-lonestar: #53242b;
  --color-lonestar-50: #fff1f2;
  --color-lonestar-100: #ffe3e5;
  --color-lonestar-200: #f8cace;
  --color-lonestar-300: #e5b2b6;
  --color-lonestar-400: #c89196;
  --color-lonestar-500: #ad767b;
  --color-lonestar-600: #915c62;
  --color-lonestar-700: #77474d;
  --color-lonestar-800: #60363b;
  --color-lonestar-900: #53242b;
  --color-lonestar-950: #32181b;
  --color-watermelon-gelato: #b86c75;
  --color-watermelon-gelato-50: #fff1f2;
  --color-watermelon-gelato-100: #ffe3e5;
  --color-watermelon-gelato-200: #ffc6cb;
  --color-watermelon-gelato-300: #f1abb1;
  --color-watermelon-gelato-400: #d48891;
  --color-watermelon-gelato-500: #b86c75;
  --color-watermelon-gelato-600: #9a525c;
  --color-watermelon-gelato-700: #7f3e47;
  --color-watermelon-gelato-800: #662e36;
  --color-watermelon-gelato-900: #512128;
  --color-watermelon-gelato-950: #351218;
  --color-hazelnut-chocolate: #763b00;
  --color-hazelnut-chocolate-50: #fff2ea;
  --color-hazelnut-chocolate-100: #ffe6d5;
  --color-hazelnut-chocolate-200: #fec9a5;
  --color-hazelnut-chocolate-300: #ebaf86;
  --color-hazelnut-chocolate-400: #cc8c5e;
  --color-hazelnut-chocolate-500: #af6f3f;
  --color-hazelnut-chocolate-600: #8f5425;
  --color-hazelnut-chocolate-700: #763b00;
  --color-hazelnut-chocolate-800: #5b2e05;
  --color-hazelnut-chocolate-900: #482201;
  --color-hazelnut-chocolate-950: #2e1300;
  --color-sail-to-the-sea: #8dc1f5;
  --color-sail-to-the-sea-50: #e9f4ff;
  --color-sail-to-the-sea-100: #d6eaff;
  --color-sail-to-the-sea-200: #b1d8ff;
  --color-sail-to-the-sea-300: #8dc1f5;
  --color-sail-to-the-sea-400: #71a2d3;
  --color-sail-to-the-sea-500: #5587b8;
  --color-sail-to-the-sea-600: #3d6d9b;
  --color-sail-to-the-sea-700: #2a5781;
  --color-sail-to-the-sea-800: #1d4469;
  --color-sail-to-the-sea-900: #133554;
  --color-sail-to-the-sea-950: #082137;
  --color-mochaccino: #905300;
  --color-mochaccino-50: #fff3e8;
  --color-mochaccino-100: #ffe4cd;
  --color-mochaccino-200: #fdc999;
  --color-mochaccino-300: #eaaf78;
  --color-mochaccino-400: #cc8c4e;
  --color-mochaccino-500: #ae6f2c;
  --color-mochaccino-600: #905300;
  --color-mochaccino-700: #734100;
  --color-mochaccino-800: #5b3200;
  --color-mochaccino-900: #472600;
  --color-mochaccino-950: #2e1700;
}

Similar palettes