Paradisiacal Getaway to Ocean’s Embrace Color Palette

About this palette

Paradisiacal Getaway to Ocean’s Embrace is a 4-color vintage palette: #82E4ED (Paradisiacal Getaway), #BA7E88 (Old Rose), #692F03 (Cold Press Coffee), #336E75 (Ocean’s Embrace). It mixes turquoise, red, brown tones and feels balanced overall. The strongest text pairing is #82E4ED on #692F03 with a contrast ratio of 7.10:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Paradisiacal Getaway	rgb(130, 228, 237)	hsl(185, 75%, 72%)
Old Rose	rgb(186, 126, 136)	hsl(350, 30%, 61%)
Cold Press Coffee	rgb(105, 47, 3)	hsl(26, 94%, 21%)
Ocean’s Embrace	rgb(51, 110, 117)	hsl(186, 39%, 33%)

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.

Aa7.10:1 Very good#82E4ED on #692F03
Aa7.10:1 Very good#692F03 on #82E4ED
Aa3.93:1 Poor#82E4ED on #336E75
Aa3.93:1 Poor#336E75 on #82E4ED
Aa3.20:1 Poor#BA7E88 on #692F03
Aa3.20:1 Poor#692F03 on #BA7E88

Color blindness preview

CSS variables

/* Paradisiacal Getaway to Ocean’s Embrace — https://swatchly.xyz/palette/82e4ed-ba7e88-692f03-336e75 */
:root {
  --paradisiacal-getaway: #82e4ed;
  --old-rose: #ba7e88;
  --cold-press-coffee: #692f03;
  --ocean-s-embrace: #336e75;
}

Tailwind CSS v4

/* Paradisiacal Getaway to Ocean’s Embrace — https://swatchly.xyz/palette/82e4ed-ba7e88-692f03-336e75 */
@theme {
  --color-paradisiacal-getaway: #82e4ed;
  --color-paradisiacal-getaway-50: #cefbff;
  --color-paradisiacal-getaway-100: #b7f3f8;
  --color-paradisiacal-getaway-200: #82e4ed;
  --color-paradisiacal-getaway-300: #79ccd4;
  --color-paradisiacal-getaway-400: #4faeb7;
  --color-paradisiacal-getaway-500: #29949c;
  --color-paradisiacal-getaway-600: #007981;
  --color-paradisiacal-getaway-700: #006067;
  --color-paradisiacal-getaway-800: #004c52;
  --color-paradisiacal-getaway-900: #003b3f;
  --color-paradisiacal-getaway-950: #002528;
  --color-old-rose: #ba7e88;
  --color-old-rose-50: #fff4f5;
  --color-old-rose-100: #ffe9ec;
  --color-old-rose-200: #fed0d6;
  --color-old-rose-300: #eeb9c1;
  --color-old-rose-400: #d399a2;
  --color-old-rose-500: #ba7e88;
  --color-old-rose-600: #9b626c;
  --color-old-rose-700: #7f4b54;
  --color-old-rose-800: #653840;
  --color-old-rose-900: #4f2930;
  --color-old-rose-950: #32171c;
  --color-cold-press-coffee: #692f03;
  --color-cold-press-coffee-50: #fff2eb;
  --color-cold-press-coffee-100: #ffe5d7;
  --color-cold-press-coffee-200: #ffcbae;
  --color-cold-press-coffee-300: #edb291;
  --color-cold-press-coffee-400: #d1906c;
  --color-cold-press-coffee-500: #b5744e;
  --color-cold-press-coffee-600: #975a35;
  --color-cold-press-coffee-700: #7c4422;
  --color-cold-press-coffee-800: #692f03;
  --color-cold-press-coffee-900: #4f260b;
  --color-cold-press-coffee-950: #331604;
  --color-ocean-s-embrace: #336e75;
  --color-ocean-s-embrace-50: #dffbff;
  --color-ocean-s-embrace-100: #cdf2f6;
  --color-ocean-s-embrace-200: #b1dee4;
  --color-ocean-s-embrace-300: #94c7cd;
  --color-ocean-s-embrace-400: #6ea7ae;
  --color-ocean-s-embrace-500: #508a91;
  --color-ocean-s-embrace-600: #336e75;
  --color-ocean-s-embrace-700: #23585e;
  --color-ocean-s-embrace-800: #16454a;
  --color-ocean-s-embrace-900: #0d363a;
  --color-ocean-s-embrace-950: #052225;
}