Friendly Frost to Medium Roast Color Palette

About this palette

Friendly Frost to Medium Roast is a 4-color cool palette: #C1FAFB (Friendly Frost), #C8AADB (Enchanted Lavender), #8664A0 (Crown Jewels), #34240E (Medium Roast). It mixes white, purple, brown tones and feels cool overall. The strongest text pairing is #C1FAFB on #34240E with a contrast ratio of 13.05:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Friendly Frost	rgb(193, 250, 251)	hsl(181, 88%, 87%)
Enchanted Lavender	rgb(200, 170, 219)	hsl(277, 40%, 76%)
Crown Jewels	rgb(134, 100, 160)	hsl(274, 24%, 51%)
Medium Roast	rgb(52, 36, 14)	hsl(35, 58%, 13%)

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.

Aa13.05:1 Super#C1FAFB on #34240E
Aa13.05:1 Super#34240E on #C1FAFB
Aa7.28:1 Very good#C8AADB on #34240E
Aa7.28:1 Very good#34240E on #C8AADB
Aa4.22:1 Poor#C1FAFB on #8664A0
Aa4.22:1 Poor#8664A0 on #C1FAFB
Aa3.09:1 Poor#8664A0 on #34240E
Aa3.09:1 Poor#34240E on #8664A0

Color blindness preview

CSS variables

/* Friendly Frost to Medium Roast — https://swatchly.xyz/palette/c1fafb-c8aadb-8664a0-34240e */
:root {
  --friendly-frost: #c1fafb;
  --enchanted-lavender: #c8aadb;
  --crown-jewels: #8664a0;
  --medium-roast: #34240e;
}

Tailwind CSS v4

/* Friendly Frost to Medium Roast — https://swatchly.xyz/palette/c1fafb-c8aadb-8664a0-34240e */
@theme {
  --color-friendly-frost: #c1fafb;
  --color-friendly-frost-50: #e0fefe;
  --color-friendly-frost-100: #c1fafb;
  --color-friendly-frost-200: #bae2e3;
  --color-friendly-frost-300: #9ecdcd;
  --color-friendly-frost-400: #79aeaf;
  --color-friendly-frost-500: #5c9293;
  --color-friendly-frost-600: #427678;
  --color-friendly-frost-700: #2d5e60;
  --color-friendly-frost-800: #1e4a4b;
  --color-friendly-frost-900: #14393a;
  --color-friendly-frost-950: #082425;
  --color-enchanted-lavender: #c8aadb;
  --color-enchanted-lavender-50: #f7ebff;
  --color-enchanted-lavender-100: #f0dcfd;
  --color-enchanted-lavender-200: #ddc5ec;
  --color-enchanted-lavender-300: #c8aadb;
  --color-enchanted-lavender-400: #a98dbb;
  --color-enchanted-lavender-500: #9073a1;
  --color-enchanted-lavender-600: #765b86;
  --color-enchanted-lavender-700: #5f476e;
  --color-enchanted-lavender-800: #4c3759;
  --color-enchanted-lavender-900: #3c2a47;
  --color-enchanted-lavender-950: #26192e;
  --color-crown-jewels: #8664a0;
  --color-crown-jewels-50: #f9f2ff;
  --color-crown-jewels-100: #f4e7ff;
  --color-crown-jewels-200: #e9cfff;
  --color-crown-jewels-300: #d6b8ee;
  --color-crown-jewels-400: #b998d4;
  --color-crown-jewels-500: #a07dbb;
  --color-crown-jewels-600: #8664a0;
  --color-crown-jewels-700: #6c4d84;
  --color-crown-jewels-800: #563a6a;
  --color-crown-jewels-900: #422b54;
  --color-crown-jewels-950: #2a1936;
  --color-medium-roast: #34240e;
  --color-medium-roast-50: #fff3e5;
  --color-medium-roast-100: #f6e9d9;
  --color-medium-roast-200: #e5d5c1;
  --color-medium-roast-300: #d0bea8;
  --color-medium-roast-400: #b19e86;
  --color-medium-roast-500: #98846c;
  --color-medium-roast-600: #7e6c54;
  --color-medium-roast-700: #685741;
  --color-medium-roast-800: #554632;
  --color-medium-roast-900: #453827;
  --color-medium-roast-950: #34240e;
}