Baker’s Dream to Cotton Ball color palette

CB9277Baker’s Dream 006D9DHydra 484700Alligator Gladiator C6BFEEDigital Lavender F0FAFFCotton Ball

About this palette

Baker’s Dream to Cotton Ball is a 5-color vintage palette: #CB9277 (Baker’s Dream), #006D9D (Hydra), #484700 (Alligator Gladiator), #C6BFEE (Digital Lavender), #F0FAFF (Cotton Ball). It mixes orange, blue, brown, purple, white tones and feels balanced overall. The strongest text pairing is #484700 on #F0FAFF with a contrast ratio of 9.11:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baker’s Dream	rgb(203, 146, 119)	hsl(19, 45%, 63%)
Hydra	rgb(0, 109, 157)	hsl(198, 100%, 31%)
Alligator Gladiator	rgb(72, 71, 0)	hsl(59, 100%, 14%)
Digital Lavender	rgb(198, 191, 238)	hsl(249, 58%, 84%)
Cotton Ball	rgb(240, 250, 255)	hsl(200, 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.

Aa9.11:1 Very good#484700 on #F0FAFF
Aa9.11:1 Very good#F0FAFF on #484700
Aa5.55:1 Good#484700 on #C6BFEE
Aa5.55:1 Good#C6BFEE on #484700
Aa5.40:1 Good#006D9D on #F0FAFF
Aa5.40:1 Good#F0FAFF on #006D9D
Aa3.64:1 Poor#CB9277 on #484700
Aa3.64:1 Poor#484700 on #CB9277

Color blindness preview

CSS variables

/* Baker’s Dream to Cotton Ball — https://swatchly.xyz/palette/cb9277-006d9d-484700-c6bfee-f0faff */
:root {
  --baker-s-dream: #cb9277;
  --hydra: #006d9d;
  --alligator-gladiator: #484700;
  --digital-lavender: #c6bfee;
  --cotton-ball: #f0faff;
}

Tailwind CSS v4

/* Baker’s Dream to Cotton Ball — https://swatchly.xyz/palette/cb9277-006d9d-484700-c6bfee-f0faff */
@theme {
  --color-baker-s-dream: #cb9277;
  --color-baker-s-dream-50: #fff2ec;
  --color-baker-s-dream-100: #ffe5d9;
  --color-baker-s-dream-200: #f9ccb7;
  --color-baker-s-dream-300: #e6b49c;
  --color-baker-s-dream-400: #cb9277;
  --color-baker-s-dream-500: #ae775d;
  --color-baker-s-dream-600: #915d44;
  --color-baker-s-dream-700: #764831;
  --color-baker-s-dream-800: #5f3622;
  --color-baker-s-dream-900: #4b2917;
  --color-baker-s-dream-950: #31180b;
  --color-hydra: #006d9d;
  --color-hydra-50: #ecf7ff;
  --color-hydra-100: #d5eeff;
  --color-hydra-200: #a9ddff;
  --color-hydra-300: #7fc7f5;
  --color-hydra-400: #54a6d8;
  --color-hydra-500: #3089bb;
  --color-hydra-600: #006d9d;
  --color-hydra-700: #00567e;
  --color-hydra-800: #004363;
  --color-hydra-900: #00344e;
  --color-hydra-950: #002033;
  --color-alligator-gladiator: #484700;
  --color-alligator-gladiator-50: #f7f8d5;
  --color-alligator-gladiator-100: #edefc7;
  --color-alligator-gladiator-200: #dadbac;
  --color-alligator-gladiator-300: #c4c690;
  --color-alligator-gladiator-400: #a6a76b;
  --color-alligator-gladiator-500: #8b8b4e;
  --color-alligator-gladiator-600: #717134;
  --color-alligator-gladiator-700: #5a5a21;
  --color-alligator-gladiator-800: #484700;
  --color-alligator-gladiator-900: #373609;
  --color-alligator-gladiator-950: #222203;
  --color-digital-lavender: #c6bfee;
  --color-digital-lavender-50: #f8f7ff;
  --color-digital-lavender-100: #eeecff;
  --color-digital-lavender-200: #dcd7f9;
  --color-digital-lavender-300: #c6bfee;
  --color-digital-lavender-400: #a69fca;
  --color-digital-lavender-500: #8a83ae;
  --color-digital-lavender-600: #6e6791;
  --color-digital-lavender-700: #575176;
  --color-digital-lavender-800: #433e5e;
  --color-digital-lavender-900: #332e4a;
  --color-digital-lavender-950: #1f1c30;
  --color-cotton-ball: #f0faff;
  --color-cotton-ball-50: #f0faff;
  --color-cotton-ball-100: #e9eff2;
  --color-cotton-ball-200: #d4dbde;
  --color-cotton-ball-300: #bcc4c8;
  --color-cotton-ball-400: #9ba4a8;
  --color-cotton-ball-500: #7f888d;
  --color-cotton-ball-600: #656d72;
  --color-cotton-ball-700: #4f575a;
  --color-cotton-ball-800: #3d4447;
  --color-cotton-ball-900: #2e3437;
  --color-cotton-ball-950: #1c2022;
}