Royal Milk Tea to Queer Blue Color Palette

About this palette

Royal Milk Tea to Queer Blue is a 4-color vintage palette: #F4CDAB (Royal Milk Tea), #3B8987 (Turkish Jade), #653638 (Hot Chocolate), #7FABE1 (Queer Blue). It mixes orange, turquoise, brown, blue tones and feels balanced overall. The strongest text pairing is #F4CDAB on #653638 with a contrast ratio of 6.63:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Milk Tea	rgb(244, 205, 171)	hsl(28, 77%, 81%)
Turkish Jade	rgb(59, 137, 135)	hsl(178, 40%, 38%)
Hot Chocolate	rgb(101, 54, 56)	hsl(357, 30%, 30%)
Queer Blue	rgb(127, 171, 225)	hsl(213, 62%, 69%)

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.63:1 Good#F4CDAB on #653638
Aa6.63:1 Good#653638 on #F4CDAB
Aa4.12:1 Poor#653638 on #7FABE1
Aa4.12:1 Poor#7FABE1 on #653638

Color blindness preview

CSS variables

/* Royal Milk Tea to Queer Blue — https://swatchly.xyz/palette/f4cdab-3b8987-653638-7fabe1 */
:root {
  --royal-milk-tea: #f4cdab;
  --turkish-jade: #3b8987;
  --hot-chocolate: #653638;
  --queer-blue: #7fabe1;
}

Tailwind CSS v4

/* Royal Milk Tea to Queer Blue — https://swatchly.xyz/palette/f4cdab-3b8987-653638-7fabe1 */
@theme {
  --color-royal-milk-tea: #f4cdab;
  --color-royal-milk-tea-50: #fff1e5;
  --color-royal-milk-tea-100: #fde4cf;
  --color-royal-milk-tea-200: #f4cdab;
  --color-royal-milk-tea-300: #d9b89c;
  --color-royal-milk-tea-400: #bc9879;
  --color-royal-milk-tea-500: #a17d5d;
  --color-royal-milk-tea-600: #856345;
  --color-royal-milk-tea-700: #6c4e32;
  --color-royal-milk-tea-800: #563c23;
  --color-royal-milk-tea-900: #442d18;
  --color-royal-milk-tea-950: #2b1b0c;
  --color-turkish-jade: #3b8987;
  --color-turkish-jade-50: #d3fdfb;
  --color-turkish-jade-100: #c2f2f0;
  --color-turkish-jade-200: #a4dedc;
  --color-turkish-jade-300: #84c7c4;
  --color-turkish-jade-400: #5ca6a4;
  --color-turkish-jade-500: #3b8987;
  --color-turkish-jade-600: #22706e;
  --color-turkish-jade-700: #0d5a58;
  --color-turkish-jade-800: #004746;
  --color-turkish-jade-900: #003837;
  --color-turkish-jade-950: #002423;
  --color-hot-chocolate: #653638;
  --color-hot-chocolate-50: #fff1f1;
  --color-hot-chocolate-100: #ffe4e4;
  --color-hot-chocolate-200: #f7cbcb;
  --color-hot-chocolate-300: #e4b3b4;
  --color-hot-chocolate-400: #c89394;
  --color-hot-chocolate-500: #ad7879;
  --color-hot-chocolate-600: #915e60;
  --color-hot-chocolate-700: #774a4b;
  --color-hot-chocolate-800: #653638;
  --color-hot-chocolate-900: #4d2a2c;
  --color-hot-chocolate-950: #32191a;
  --color-queer-blue: #7fabe1;
  --color-queer-blue-50: #f2f8ff;
  --color-queer-blue-100: #e4f0ff;
  --color-queer-blue-200: #c4dfff;
  --color-queer-blue-300: #a4caf8;
  --color-queer-blue-400: #7fabe1;
  --color-queer-blue-500: #638ec2;
  --color-queer-blue-600: #4972a4;
  --color-queer-blue-700: #345a87;
  --color-queer-blue-800: #24456d;
  --color-queer-blue-900: #183556;
  --color-queer-blue-950: #0c2038;
}