Cloud Number Nine to Bonne Nuit Color Palette

About this palette

Cloud Number Nine to Bonne Nuit is a 5-color cool, vintage palette: #FFCBC3 (Cloud Number Nine), #9FCBA2 (Limestoned), #B87672 (Nipple), #32874F (Monster Monstera), #3F4764 (Bonne Nuit). It mixes pink, green, red, blue tones and feels cool overall. The strongest text pairing is #FFCBC3 on #3F4764 with a contrast ratio of 6.35:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloud Number Nine	rgb(255, 203, 195)	hsl(8, 100%, 88%)
Limestoned	rgb(159, 203, 162)	hsl(124, 30%, 71%)
Nipple	rgb(184, 118, 114)	hsl(3, 33%, 58%)
Monster Monstera	rgb(50, 135, 79)	hsl(140, 46%, 36%)
Bonne Nuit	rgb(63, 71, 100)	hsl(227, 23%, 32%)

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.

Aa6.35:1 Good#FFCBC3 on #3F4764
Aa6.35:1 Good#3F4764 on #FFCBC3
Aa5.02:1 Good#9FCBA2 on #3F4764
Aa5.02:1 Good#3F4764 on #9FCBA2
Aa3.09:1 Poor#FFCBC3 on #32874F
Aa3.09:1 Poor#32874F on #FFCBC3

Color blindness preview

CSS variables

/* Cloud Number Nine to Bonne Nuit — https://swatchly.xyz/palette/ffcbc3-9fcba2-b87672-32874f-3f4764 */
:root {
  --cloud-number-nine: #ffcbc3;
  --limestoned: #9fcba2;
  --nipple: #b87672;
  --monster-monstera: #32874f;
  --bonne-nuit: #3f4764;
}

Tailwind CSS v4

/* Cloud Number Nine to Bonne Nuit — https://swatchly.xyz/palette/ffcbc3-9fcba2-b87672-32874f-3f4764 */
@theme {
  --color-cloud-number-nine: #ffcbc3;
  --color-cloud-number-nine-50: #fff3f1;
  --color-cloud-number-nine-100: #ffe6e2;
  --color-cloud-number-nine-200: #ffcbc3;
  --color-cloud-number-nine-300: #e2b7b0;
  --color-cloud-number-nine-400: #c4958e;
  --color-cloud-number-nine-500: #a97972;
  --color-cloud-number-nine-600: #8c5f59;
  --color-cloud-number-nine-700: #724a44;
  --color-cloud-number-nine-800: #5b3833;
  --color-cloud-number-nine-900: #472a26;
  --color-cloud-number-nine-950: #2e1916;
  --color-limestoned: #9fcba2;
  --color-limestoned-50: #e2fce4;
  --color-limestoned-100: #d6f2d7;
  --color-limestoned-200: #bedfc0;
  --color-limestoned-300: #9fcba2;
  --color-limestoned-400: #82ab85;
  --color-limestoned-500: #67906a;
  --color-limestoned-600: #4e7651;
  --color-limestoned-700: #3a5f3e;
  --color-limestoned-800: #2b4b2e;
  --color-limestoned-900: #1f3a22;
  --color-limestoned-950: #112513;
  --color-nipple: #b87672;
  --color-nipple-50: #fff3f2;
  --color-nipple-100: #ffe6e4;
  --color-nipple-200: #ffcbc7;
  --color-nipple-300: #efb3ae;
  --color-nipple-400: #d3928d;
  --color-nipple-500: #b87672;
  --color-nipple-600: #9a5b58;
  --color-nipple-700: #7e4543;
  --color-nipple-800: #653432;
  --color-nipple-900: #502624;
  --color-nipple-950: #331614;
  --color-monster-monstera: #32874f;
  --color-monster-monstera-50: #dfffe6;
  --color-monster-monstera-100: #cafbd5;
  --color-monster-monstera-200: #b0ebbe;
  --color-monster-monstera-300: #94d8a5;
  --color-monster-monstera-400: #6ebb83;
  --color-monster-monstera-500: #4fa168;
  --color-monster-monstera-600: #32874f;
  --color-monster-monstera-700: #1a6d3a;
  --color-monster-monstera-800: #055629;
  --color-monster-monstera-900: #00431d;
  --color-monster-monstera-950: #002a10;
  --color-bonne-nuit: #3f4764;
  --color-bonne-nuit-50: #f2f5ff;
  --color-bonne-nuit-100: #e4ebff;
  --color-bonne-nuit-200: #cfd7f1;
  --color-bonne-nuit-300: #b8c1df;
  --color-bonne-nuit-400: #99a3c3;
  --color-bonne-nuit-500: #7f88a9;
  --color-bonne-nuit-600: #666f8e;
  --color-bonne-nuit-700: #515976;
  --color-bonne-nuit-800: #3f4764;
  --color-bonne-nuit-900: #31374c;
  --color-bonne-nuit-950: #1e2232;
}