Tuscan to Blossom Color Palette

About this palette

Tuscan to Blossom is a 4-color pastel, light palette: #F8D5A9 (Tuscan), #A7D2FF (Baby Blue), #E3E8FF (Freeze Up), #FFE8D6 (Blossom). It mixes orange, blue, white tones and feels balanced overall. The strongest text pairing is #A7D2FF on #FFE8D6 with a contrast ratio of 1.34:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tuscan	rgb(248, 213, 169)	hsl(33, 85%, 82%)
Baby Blue	rgb(167, 210, 255)	hsl(211, 100%, 83%)
Freeze Up	rgb(227, 232, 255)	hsl(229, 100%, 95%)
Blossom	rgb(255, 232, 214)	hsl(26, 100%, 92%)

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.

Color blindness preview

CSS variables

/* Tuscan to Blossom — https://swatchly.xyz/palette/f8d5a9-a7d2ff-e3e8ff-ffe8d6 */
:root {
  --tuscan: #f8d5a9;
  --baby-blue: #a7d2ff;
  --freeze-up: #e3e8ff;
  --blossom: #ffe8d6;
}

Tailwind CSS v4

/* Tuscan to Blossom — https://swatchly.xyz/palette/f8d5a9-a7d2ff-e3e8ff-ffe8d6 */
@theme {
  --color-tuscan: #f8d5a9;
  --color-tuscan-50: #fff6ec;
  --color-tuscan-100: #ffebd3;
  --color-tuscan-200: #f8d5a9;
  --color-tuscan-300: #dcbf9b;
  --color-tuscan-400: #be9e76;
  --color-tuscan-500: #a28258;
  --color-tuscan-600: #85673f;
  --color-tuscan-700: #6c502b;
  --color-tuscan-800: #553d1c;
  --color-tuscan-900: #432e12;
  --color-tuscan-950: #2b1c08;
  --color-baby-blue: #a7d2ff;
  --color-baby-blue-50: #e2f0ff;
  --color-baby-blue-100: #cee6ff;
  --color-baby-blue-200: #a7d2ff;
  --color-baby-blue-300: #97bde4;
  --color-baby-blue-400: #779fc9;
  --color-baby-blue-500: #5d85af;
  --color-baby-blue-600: #466c93;
  --color-baby-blue-700: #33577a;
  --color-baby-blue-800: #254564;
  --color-baby-blue-900: #1a354f;
  --color-baby-blue-950: #0d2033;
  --color-freeze-up: #e3e8ff;
  --color-freeze-up-50: #f0f3ff;
  --color-freeze-up-100: #e3e8ff;
  --color-freeze-up-200: #d1d5e6;
  --color-freeze-up-300: #babfd2;
  --color-freeze-up-400: #9b9fb4;
  --color-freeze-up-500: #808499;
  --color-freeze-up-600: #666a7e;
  --color-freeze-up-700: #515466;
  --color-freeze-up-800: #3e4151;
  --color-freeze-up-900: #2f323f;
  --color-freeze-up-950: #1d1f28;
  --color-blossom: #ffe8d6;
  --color-blossom-50: #fff4ec;
  --color-blossom-100: #ffe8d6;
  --color-blossom-200: #e6d5c8;
  --color-blossom-300: #d1beaf;
  --color-blossom-400: #b29e8e;
  --color-blossom-500: #978272;
  --color-blossom-600: #7b6858;
  --color-blossom-700: #635143;
  --color-blossom-800: #4e3f33;
  --color-blossom-900: #3d3026;
  --color-blossom-950: #261d16;
}