Cream Puff to Space Cadet Color Palette

About this palette

Cream Puff to Space Cadet is a 5-color cool, earthy palette: #FFBB94 (Cream Puff), #8C9B54 (Totally Broccoli), #4665BF (God of Rain), #6E3300 (Cold Press Coffee), #162A59 (Space Cadet). It mixes orange, green, blue, brown tones and feels cool overall. The strongest text pairing is #FFBB94 on #162A59 with a contrast ratio of 8.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cream Puff	rgb(255, 187, 148)	hsl(22, 100%, 79%)
Totally Broccoli	rgb(140, 155, 84)	hsl(73, 30%, 47%)
God of Rain	rgb(70, 101, 191)	hsl(225, 49%, 51%)
Cold Press Coffee	rgb(110, 51, 0)	hsl(28, 100%, 22%)
Space Cadet	rgb(22, 42, 89)	hsl(222, 60%, 22%)

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.

Aa8.47:1 Very good#FFBB94 on #162A59
Aa8.47:1 Very good#162A59 on #FFBB94
Aa5.99:1 Good#FFBB94 on #6E3300
Aa5.99:1 Good#6E3300 on #FFBB94
Aa4.59:1 Good#8C9B54 on #162A59
Aa4.59:1 Good#162A59 on #8C9B54
Aa3.30:1 Poor#FFBB94 on #4665BF
Aa3.30:1 Poor#4665BF on #FFBB94

Color blindness preview

CSS variables

/* Cream Puff to Space Cadet — https://swatchly.xyz/palette/ffbb94-8c9b54-4665bf-6e3300-162a59 */
:root {
  --cream-puff: #ffbb94;
  --totally-broccoli: #8c9b54;
  --god-of-rain: #4665bf;
  --cold-press-coffee: #6e3300;
  --space-cadet: #162a59;
}

Tailwind CSS v4

/* Cream Puff to Space Cadet — https://swatchly.xyz/palette/ffbb94-8c9b54-4665bf-6e3300-162a59 */
@theme {
  --color-cream-puff: #ffbb94;
  --color-cream-puff-50: #ffe8dc;
  --color-cream-puff-100: #ffd9c4;
  --color-cream-puff-200: #ffbb94;
  --color-cream-puff-300: #e4a987;
  --color-cream-puff-400: #c98a65;
  --color-cream-puff-500: #ae704b;
  --color-cream-puff-600: #925834;
  --color-cream-puff-700: #794423;
  --color-cream-puff-800: #633416;
  --color-cream-puff-900: #4e270d;
  --color-cream-puff-950: #331605;
  --color-totally-broccoli: #8c9b54;
  --color-totally-broccoli-50: #f3fdd6;
  --color-totally-broccoli-100: #ebf6cb;
  --color-totally-broccoli-200: #d9e5b2;
  --color-totally-broccoli-300: #c4d297;
  --color-totally-broccoli-400: #a6b572;
  --color-totally-broccoli-500: #8c9b54;
  --color-totally-broccoli-600: #707e37;
  --color-totally-broccoli-700: #576420;
  --color-totally-broccoli-800: #434e0f;
  --color-totally-broccoli-900: #323b05;
  --color-totally-broccoli-950: #1e2401;
  --color-god-of-rain: #4665bf;
  --color-god-of-rain-50: #f1f5ff;
  --color-god-of-rain-100: #e3ebff;
  --color-god-of-rain-200: #c6d7ff;
  --color-god-of-rain-300: #a6c0ff;
  --color-god-of-rain-400: #7a9df8;
  --color-god-of-rain-500: #5f81dd;
  --color-god-of-rain-600: #4665bf;
  --color-god-of-rain-700: #344e9f;
  --color-god-of-rain-800: #253c82;
  --color-god-of-rain-900: #1a2d69;
  --color-god-of-rain-950: #0e1b46;
  --color-cold-press-coffee: #6e3300;
  --color-cold-press-coffee-50: #fff2eb;
  --color-cold-press-coffee-100: #ffe5d6;
  --color-cold-press-coffee-200: #ffcbac;
  --color-cold-press-coffee-300: #eeb38e;
  --color-cold-press-coffee-400: #d39269;
  --color-cold-press-coffee-500: #b8764c;
  --color-cold-press-coffee-600: #9b5d33;
  --color-cold-press-coffee-700: #804820;
  --color-cold-press-coffee-800: #6e3300;
  --color-cold-press-coffee-900: #532808;
  --color-cold-press-coffee-950: #371802;
  --color-space-cadet: #162a59;
  --color-space-cadet-50: #f0f5ff;
  --color-space-cadet-100: #e2ebff;
  --color-space-cadet-200: #c4d8ff;
  --color-space-cadet-300: #a9c1f3;
  --color-space-cadet-400: #86a0d6;
  --color-space-cadet-500: #6983ba;
  --color-space-cadet-600: #4f679b;
  --color-space-cadet-700: #3b507e;
  --color-space-cadet-800: #2a3c63;
  --color-space-cadet-900: #162a59;
  --color-space-cadet-950: #101a31;
}