Bakery Brown to Starless Night color palette

A69077Bakery Brown 7B6B77Sakura Night B0CFBCIsle of Dreams E6F0FDCotton Boll 3E4A53Starless Night

About this palette

Bakery Brown to Starless Night is a 5-color muted palette: #A69077 (Bakery Brown), #7B6B77 (Sakura Night), #B0CFBC (Isle of Dreams), #E6F0FD (Cotton Boll), #3E4A53 (Starless Night). It mixes orange, gray, green, white tones and feels balanced overall. The strongest text pairing is #E6F0FD on #3E4A53 with a contrast ratio of 7.90:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bakery Brown	rgb(166, 144, 119)	hsl(32, 21%, 56%)
Sakura Night	rgb(123, 107, 119)	hsl(315, 7%, 45%)
Isle of Dreams	rgb(176, 207, 188)	hsl(143, 24%, 75%)
Cotton Boll	rgb(230, 240, 253)	hsl(214, 85%, 95%)
Starless Night	rgb(62, 74, 83)	hsl(206, 14%, 28%)

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.

Aa7.90:1 Very good#E6F0FD on #3E4A53
Aa7.90:1 Very good#3E4A53 on #E6F0FD
Aa5.41:1 Good#B0CFBC on #3E4A53
Aa5.41:1 Good#3E4A53 on #B0CFBC
Aa4.33:1 Poor#7B6B77 on #E6F0FD
Aa4.33:1 Poor#E6F0FD on #7B6B77

Color blindness preview

CSS variables

/* Bakery Brown to Starless Night — https://swatchly.xyz/palette/a69077-7b6b77-b0cfbc-e6f0fd-3e4a53 */
:root {
  --bakery-brown: #a69077;
  --sakura-night: #7b6b77;
  --isle-of-dreams: #b0cfbc;
  --cotton-boll: #e6f0fd;
  --starless-night: #3e4a53;
}

Tailwind CSS v4

/* Bakery Brown to Starless Night — https://swatchly.xyz/palette/a69077-7b6b77-b0cfbc-e6f0fd-3e4a53 */
@theme {
  --color-bakery-brown: #a69077;
  --color-bakery-brown-50: #fceede;
  --color-bakery-brown-100: #f1e1cf;
  --color-bakery-brown-200: #ddcbb6;
  --color-bakery-brown-300: #c6b29a;
  --color-bakery-brown-400: #a69077;
  --color-bakery-brown-500: #8d775f;
  --color-bakery-brown-600: #736049;
  --color-bakery-brown-700: #5e4c37;
  --color-bakery-brown-800: #4b3b29;
  --color-bakery-brown-900: #3c2e1f;
  --color-bakery-brown-950: #271d12;
  --color-sakura-night: #7b6b77;
  --color-sakura-night-50: #fcf2f9;
  --color-sakura-night-100: #f3e8f1;
  --color-sakura-night-200: #e2d5df;
  --color-sakura-night-300: #cdbeca;
  --color-sakura-night-400: #b09fab;
  --color-sakura-night-500: #958591;
  --color-sakura-night-600: #7b6b77;
  --color-sakura-night-700: #62545f;
  --color-sakura-night-800: #4d414a;
  --color-sakura-night-900: #3c3139;
  --color-sakura-night-950: #251e24;
  --color-isle-of-dreams: #b0cfbc;
  --color-isle-of-dreams-50: #ecfdf2;
  --color-isle-of-dreams-100: #e2f4e9;
  --color-isle-of-dreams-200: #cce2d5;
  --color-isle-of-dreams-300: #b0cfbc;
  --color-isle-of-dreams-400: #91ae9c;
  --color-isle-of-dreams-500: #749280;
  --color-isle-of-dreams-600: #5a7665;
  --color-isle-of-dreams-700: #445e4f;
  --color-isle-of-dreams-800: #33493c;
  --color-isle-of-dreams-900: #25382d;
  --color-isle-of-dreams-950: #15231b;
  --color-cotton-boll: #e6f0fd;
  --color-cotton-boll-50: #f4f9ff;
  --color-cotton-boll-100: #e6f0fd;
  --color-cotton-boll-200: #d4dbe5;
  --color-cotton-boll-300: #bcc4cf;
  --color-cotton-boll-400: #9ba4b0;
  --color-cotton-boll-500: #7f8894;
  --color-cotton-boll-600: #656d78;
  --color-cotton-boll-700: #4e5660;
  --color-cotton-boll-800: #3c434c;
  --color-cotton-boll-900: #2e333b;
  --color-cotton-boll-950: #1c2025;
  --color-starless-night: #3e4a53;
  --color-starless-night-50: #eef6fd;
  --color-starless-night-100: #e4edf3;
  --color-starless-night-200: #cfd9e1;
  --color-starless-night-300: #b8c4cd;
  --color-starless-night-400: #99a6b0;
  --color-starless-night-500: #7e8b96;
  --color-starless-night-600: #65727c;
  --color-starless-night-700: #505c65;
  --color-starless-night-800: #3e4a53;
  --color-starless-night-900: #30393f;
  --color-starless-night-950: #1d2429;
}