Brown to Bubbles Color Palette

About this palette

Brown to Bubbles is a 5-color warm, neon palette: #673B00 (Brown), #913564 (Pink Horror), #FF428D (Lilac Lotion), #00D3F9 (Neon Blue), #E6FEFF (Bubbles). It mixes brown, red, pink, blue, white tones and feels warm overall. The strongest text pairing is #673B00 on #E6FEFF with a contrast ratio of 9.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brown	rgb(103, 59, 0)	hsl(34, 100%, 20%)
Pink Horror	rgb(145, 53, 100)	hsl(329, 46%, 39%)
Lilac Lotion	rgb(255, 66, 141)	hsl(336, 100%, 63%)
Neon Blue	rgb(0, 211, 249)	hsl(189, 100%, 49%)
Bubbles	rgb(230, 254, 255)	hsl(182, 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.

Aa9.07:1 Very good#673B00 on #E6FEFF
Aa9.07:1 Very good#E6FEFF on #673B00
Aa6.90:1 Good#913564 on #E6FEFF
Aa6.90:1 Good#E6FEFF on #913564
Aa5.31:1 Good#673B00 on #00D3F9
Aa5.31:1 Good#00D3F9 on #673B00
Aa4.03:1 Poor#913564 on #00D3F9
Aa4.03:1 Poor#00D3F9 on #913564

Color blindness preview

CSS variables

/* Brown to Bubbles — https://swatchly.xyz/palette/673b00-913564-ff428d-00d3f9-e6feff */
:root {
  --brown: #673b00;
  --pink-horror: #913564;
  --lilac-lotion: #ff428d;
  --neon-blue: #00d3f9;
  --bubbles: #e6feff;
}

Tailwind CSS v4

/* Brown to Bubbles — https://swatchly.xyz/palette/673b00-913564-ff428d-00d3f9-e6feff */
@theme {
  --color-brown: #673b00;
  --color-brown-50: #fff3e8;
  --color-brown-100: #ffe6d0;
  --color-brown-200: #f7cfaa;
  --color-brown-300: #e5b88e;
  --color-brown-400: #c99869;
  --color-brown-500: #ae7d4d;
  --color-brown-600: #926433;
  --color-brown-700: #794e20;
  --color-brown-800: #673b00;
  --color-brown-900: #4e2e08;
  --color-brown-950: #331c02;
  --color-pink-horror: #913564;
  --color-pink-horror-50: #fff1f6;
  --color-pink-horror-100: #ffe2ee;
  --color-pink-horror-200: #ffc6de;
  --color-pink-horror-300: #fca5cb;
  --color-pink-horror-400: #e182ae;
  --color-pink-horror-500: #c76694;
  --color-pink-horror-600: #aa4c7a;
  --color-pink-horror-700: #913564;
  --color-pink-horror-800: #74274e;
  --color-pink-horror-900: #5c1a3d;
  --color-pink-horror-950: #3d0d26;
  --color-lilac-lotion: #ff428d;
  --color-lilac-lotion-50: #ffecf0;
  --color-lilac-lotion-100: #ffdbe4;
  --color-lilac-lotion-200: #ffbacc;
  --color-lilac-lotion-300: #ff91b2;
  --color-lilac-lotion-400: #ff428d;
  --color-lilac-lotion-500: #e01974;
  --color-lilac-lotion-600: #b9005d;
  --color-lilac-lotion-700: #95004a;
  --color-lilac-lotion-800: #78003a;
  --color-lilac-lotion-900: #5f002d;
  --color-lilac-lotion-950: #40001c;
  --color-neon-blue: #00d3f9;
  --color-neon-blue-50: #e1f8ff;
  --color-neon-blue-100: #c4f2ff;
  --color-neon-blue-200: #83e5ff;
  --color-neon-blue-300: #00d3f9;
  --color-neon-blue-400: #00b1d1;
  --color-neon-blue-500: #0093af;
  --color-neon-blue-600: #00778d;
  --color-neon-blue-700: #005f71;
  --color-neon-blue-800: #004a59;
  --color-neon-blue-900: #003a46;
  --color-neon-blue-950: #00242d;
  --color-bubbles: #e6feff;
  --color-bubbles-50: #e6feff;
  --color-bubbles-100: #e3f1f2;
  --color-bubbles-200: #cddede;
  --color-bubbles-300: #b3c7c8;
  --color-bubbles-400: #92a7a8;
  --color-bubbles-500: #768c8c;
  --color-bubbles-600: #5c7071;
  --color-bubbles-700: #47595a;
  --color-bubbles-800: #354647;
  --color-bubbles-900: #283636;
  --color-bubbles-950: #172122;
}