Court-Bouillon to Calm Waters color palette

CECEA1Court-Bouillon C3CDEDFrost Fairy A8E4FFFrozen Landscape FFD4DDCreamy Strawberry DFF6FFCalm Waters

Open in generator Export PNG, PDF, ASE…

About this palette

Court-Bouillon to Calm Waters is a 5-color pastel, light palette: #CECEA1 (Court-Bouillon), #C3CDED (Frost Fairy), #A8E4FF (Frozen Landscape), #FFD4DD (Creamy Strawberry), #DFF6FF (Calm Waters). It mixes yellow, blue, pink, white tones and feels balanced overall. The strongest text pairing is #CECEA1 on #DFF6FF with a contrast ratio of 1.45:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Court-Bouillon	rgb(206, 206, 161)	hsl(60, 31%, 72%)
Frost Fairy	rgb(195, 205, 237)	hsl(226, 54%, 85%)
Frozen Landscape	rgb(168, 228, 255)	hsl(199, 100%, 83%)
Creamy Strawberry	rgb(255, 212, 221)	hsl(347, 100%, 92%)
Calm Waters	rgb(223, 246, 255)	hsl(197, 100%, 94%)

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

/* Court-Bouillon to Calm Waters — https://swatchly.xyz/palette/cecea1-c3cded-a8e4ff-ffd4dd-dff6ff */
:root {
  --court-bouillon: #cecea1;
  --frost-fairy: #c3cded;
  --frozen-landscape: #a8e4ff;
  --creamy-strawberry: #ffd4dd;
  --calm-waters: #dff6ff;
}

Tailwind CSS v4

/* Court-Bouillon to Calm Waters — https://swatchly.xyz/palette/cecea1-c3cded-a8e4ff-ffd4dd-dff6ff */
@theme {
  --color-court-bouillon: #cecea1;
  --color-court-bouillon-50: #fcfce5;
  --color-court-bouillon-100: #f4f4da;
  --color-court-bouillon-200: #e2e2c3;
  --color-court-bouillon-300: #cecea1;
  --color-court-bouillon-400: #acac83;
  --color-court-bouillon-500: #908f65;
  --color-court-bouillon-600: #73734a;
  --color-court-bouillon-700: #5b5a35;
  --color-court-bouillon-800: #464625;
  --color-court-bouillon-900: #353419;
  --color-court-bouillon-950: #21200c;
  --color-frost-fairy: #c3cded;
  --color-frost-fairy-50: #e9eeff;
  --color-frost-fairy-100: #dce3f8;
  --color-frost-fairy-200: #c3cded;
  --color-frost-fairy-300: #b0b8d4;
  --color-frost-fairy-400: #919ab8;
  --color-frost-fairy-500: #78819e;
  --color-frost-fairy-600: #606884;
  --color-frost-fairy-700: #4b536c;
  --color-frost-fairy-800: #3b4157;
  --color-frost-fairy-900: #2c3244;
  --color-frost-fairy-950: #1b1f2c;
  --color-frozen-landscape: #a8e4ff;
  --color-frozen-landscape-50: #edf9ff;
  --color-frozen-landscape-100: #d7f2ff;
  --color-frozen-landscape-200: #a8e4ff;
  --color-frozen-landscape-300: #9acbe2;
  --color-frozen-landscape-400: #74acc5;
  --color-frozen-landscape-500: #5690a9;
  --color-frozen-landscape-600: #3c758c;
  --color-frozen-landscape-700: #285d72;
  --color-frozen-landscape-800: #19485b;
  --color-frozen-landscape-900: #0e3848;
  --color-frozen-landscape-950: #05232e;
  --color-creamy-strawberry: #ffd4dd;
  --color-creamy-strawberry-50: #fffafb;
  --color-creamy-strawberry-100: #ffeef2;
  --color-creamy-strawberry-200: #ffd4dd;
  --color-creamy-strawberry-300: #e1bec5;
  --color-creamy-strawberry-400: #c29ca4;
  --color-creamy-strawberry-500: #a57e87;
  --color-creamy-strawberry-600: #88636b;
  --color-creamy-strawberry-700: #6d4c54;
  --color-creamy-strawberry-800: #563940;
  --color-creamy-strawberry-900: #432b31;
  --color-creamy-strawberry-950: #2b1a1e;
  --color-calm-waters: #dff6ff;
  --color-calm-waters-50: #dff6ff;
  --color-calm-waters-100: #ddebf1;
  --color-calm-waters-200: #c8d8df;
  --color-calm-waters-300: #b0c3ca;
  --color-calm-waters-400: #90a4ac;
  --color-calm-waters-500: #758a92;
  --color-calm-waters-600: #5c7077;
  --color-calm-waters-700: #475960;
  --color-calm-waters-800: #35454b;
  --color-calm-waters-900: #28353a;
  --color-calm-waters-950: #172125;
}