Breeze to Cloud Break Color Palette

About this palette

Breeze to Cloud Break is a 5-color pastel, light palette: #B9C4E9 (Breeze), #DAD399 (Woven), #FFCEC0 (Piggy Bank), #AAE5FF (Frozen Landscape), #F0F2FF (Cloud Break). It mixes blue, yellow, pink, white tones and feels balanced overall. The strongest text pairing is #B9C4E9 on #F0F2FF with a contrast ratio of 1.55:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Breeze	rgb(185, 196, 233)	hsl(226, 52%, 82%)
Woven	rgb(218, 211, 153)	hsl(54, 47%, 73%)
Piggy Bank	rgb(255, 206, 192)	hsl(13, 100%, 88%)
Frozen Landscape	rgb(170, 229, 255)	hsl(198, 100%, 83%)
Cloud Break	rgb(240, 242, 255)	hsl(232, 100%, 97%)

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

/* Breeze to Cloud Break — https://swatchly.xyz/palette/b9c4e9-dad399-ffcec0-aae5ff-f0f2ff */
:root {
  --breeze: #b9c4e9;
  --woven: #dad399;
  --piggy-bank: #ffcec0;
  --frozen-landscape: #aae5ff;
  --cloud-break: #f0f2ff;
}

Tailwind CSS v4

/* Breeze to Cloud Break — https://swatchly.xyz/palette/b9c4e9-dad399-ffcec0-aae5ff-f0f2ff */
@theme {
  --color-breeze: #b9c4e9;
  --color-breeze-50: #f5f7ff;
  --color-breeze-100: #e8eeff;
  --color-breeze-200: #d2daf6;
  --color-breeze-300: #b9c4e9;
  --color-breeze-400: #9aa4c6;
  --color-breeze-500: #7d87aa;
  --color-breeze-600: #636c8d;
  --color-breeze-700: #4d5573;
  --color-breeze-800: #3a425b;
  --color-breeze-900: #2c3247;
  --color-breeze-950: #1a1e2e;
  --color-woven: #dad399;
  --color-woven-50: #f6f2d0;
  --color-woven-100: #ebe7c1;
  --color-woven-200: #dad399;
  --color-woven-300: #c3bd8c;
  --color-woven-400: #a69f69;
  --color-woven-500: #8c854e;
  --color-woven-600: #726b36;
  --color-woven-700: #5c5624;
  --color-woven-800: #494317;
  --color-woven-900: #39340d;
  --color-woven-950: #232005;
  --color-piggy-bank: #ffcec0;
  --color-piggy-bank-50: #fff5f2;
  --color-piggy-bank-100: #ffe8e2;
  --color-piggy-bank-200: #ffcec0;
  --color-piggy-bank-300: #e2b9ae;
  --color-piggy-bank-400: #c4988b;
  --color-piggy-bank-500: #a87c6f;
  --color-piggy-bank-600: #8b6155;
  --color-piggy-bank-700: #714b40;
  --color-piggy-bank-800: #5a3930;
  --color-piggy-bank-900: #462b23;
  --color-piggy-bank-950: #2d1914;
  --color-frozen-landscape: #aae5ff;
  --color-frozen-landscape-50: #eefaff;
  --color-frozen-landscape-100: #d9f3ff;
  --color-frozen-landscape-200: #aae5ff;
  --color-frozen-landscape-300: #9ccce1;
  --color-frozen-landscape-400: #76adc4;
  --color-frozen-landscape-500: #5891a8;
  --color-frozen-landscape-600: #3d758c;
  --color-frozen-landscape-700: #295d72;
  --color-frozen-landscape-800: #1a485a;
  --color-frozen-landscape-900: #0f3847;
  --color-frozen-landscape-950: #06232e;
  --color-cloud-break: #f0f2ff;
  --color-cloud-break-50: #f0f2ff;
  --color-cloud-break-100: #e7e9f1;
  --color-cloud-break-200: #d4d5df;
  --color-cloud-break-300: #bdbfca;
  --color-cloud-break-400: #9ea0ac;
  --color-cloud-break-500: #838591;
  --color-cloud-break-600: #696b76;
  --color-cloud-break-700: #53555e;
  --color-cloud-break-800: #40424a;
  --color-cloud-break-900: #31323a;
  --color-cloud-break-950: #1e1f24;
}