Cola to Bubbles Color Palette

About this palette

Cola to Bubbles is a 4-color muted, gradient palette: #3C301B (Cola), #816A92 (Nymph’s Delight), #76B7BE (Castaway), #E3FDFF (Bubbles). It mixes brown, purple, turquoise, white tones and feels cool overall. The strongest text pairing is #3C301B on #E3FDFF with a contrast ratio of 12.12:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cola	rgb(60, 48, 27)	hsl(38, 38%, 17%)
Nymph’s Delight	rgb(129, 106, 146)	hsl(274, 16%, 49%)
Castaway	rgb(118, 183, 190)	hsl(186, 36%, 60%)
Bubbles	rgb(227, 253, 255)	hsl(184, 100%, 95%)

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.12:1 Super#3C301B on #E3FDFF
Aa12.12:1 Super#E3FDFF on #3C301B
Aa5.70:1 Good#3C301B on #76B7BE
Aa5.70:1 Good#76B7BE on #3C301B
Aa4.48:1 Poor#816A92 on #E3FDFF
Aa4.48:1 Poor#E3FDFF on #816A92

Color blindness preview

CSS variables

/* Cola to Bubbles — https://swatchly.xyz/palette/3c301b-816a92-76b7be-e3fdff */
:root {
  --cola: #3c301b;
  --nymph-s-delight: #816a92;
  --castaway: #76b7be;
  --bubbles: #e3fdff;
}

Tailwind CSS v4

/* Cola to Bubbles — https://swatchly.xyz/palette/3c301b-816a92-76b7be-e3fdff */
@theme {
  --color-cola: #3c301b;
  --color-cola-50: #fcf4e6;
  --color-cola-100: #f3eada;
  --color-cola-200: #e1d6c3;
  --color-cola-300: #ccbfaa;
  --color-cola-400: #ad9f88;
  --color-cola-500: #92846c;
  --color-cola-600: #776953;
  --color-cola-700: #5f533f;
  --color-cola-800: #4a402e;
  --color-cola-900: #3c301b;
  --color-cola-950: #241e13;
  --color-nymph-s-delight: #816a92;
  --color-nymph-s-delight-50: #f9f2ff;
  --color-nymph-s-delight-100: #f4e7ff;
  --color-nymph-s-delight-200: #e5d3f3;
  --color-nymph-s-delight-300: #d1bce1;
  --color-nymph-s-delight-400: #b49dc6;
  --color-nymph-s-delight-500: #9b83ac;
  --color-nymph-s-delight-600: #816a92;
  --color-nymph-s-delight-700: #685277;
  --color-nymph-s-delight-800: #523f5f;
  --color-nymph-s-delight-900: #3f2f4a;
  --color-nymph-s-delight-950: #281c30;
  --color-castaway: #76b7be;
  --color-castaway-50: #e9fdff;
  --color-castaway-100: #d2f8fc;
  --color-castaway-200: #bae7ec;
  --color-castaway-300: #9fd3d9;
  --color-castaway-400: #76b7be;
  --color-castaway-500: #5999a0;
  --color-castaway-600: #3c7d83;
  --color-castaway-700: #26636a;
  --color-castaway-800: #154e53;
  --color-castaway-900: #0a3b40;
  --color-castaway-950: #032428;
  --color-bubbles: #e3fdff;
  --color-bubbles-50: #e3fdff;
  --color-bubbles-100: #e1f0f1;
  --color-bubbles-200: #caddde;
  --color-bubbles-300: #b1c7c8;
  --color-bubbles-400: #90a7a9;
  --color-bubbles-500: #748c8d;
  --color-bubbles-600: #5a7172;
  --color-bubbles-700: #455a5b;
  --color-bubbles-800: #344648;
  --color-bubbles-900: #273637;
  --color-bubbles-950: #172222;
}