Black Box to Soft Blush Color Palette

About this palette

Black Box to Soft Blush is a 5-color muted palette: #162B2D (Black Box), #79768F (Flying Carpet), #494734 (Olive Leaf), #AD8B8C (Punched Pink), #DEC2C0 (Soft Blush). It mixes gray, purple, red tones and feels balanced overall. The strongest text pairing is #162B2D on #DEC2C0 with a contrast ratio of 8.88:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(22, 43, 45)	hsl(185, 34%, 13%)
Flying Carpet	rgb(121, 118, 143)	hsl(247, 10%, 51%)
Olive Leaf	rgb(73, 71, 52)	hsl(54, 17%, 25%)
Punched Pink	rgb(173, 139, 140)	hsl(358, 17%, 61%)
Soft Blush	rgb(222, 194, 192)	hsl(4, 31%, 81%)

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.88:1 Very good#162B2D on #DEC2C0
Aa8.88:1 Very good#DEC2C0 on #162B2D
Aa5.63:1 Good#494734 on #DEC2C0
Aa5.63:1 Good#DEC2C0 on #494734
Aa4.83:1 Good#162B2D on #AD8B8C
Aa4.83:1 Good#AD8B8C on #162B2D
Aa3.39:1 Poor#162B2D on #79768F
Aa3.39:1 Poor#79768F on #162B2D

Color blindness preview

CSS variables

/* Black Box to Soft Blush — https://swatchly.xyz/palette/162b2d-79768f-494734-ad8b8c-dec2c0 */
:root {
  --black-box: #162b2d;
  --flying-carpet: #79768f;
  --olive-leaf: #494734;
  --punched-pink: #ad8b8c;
  --soft-blush: #dec2c0;
}

Tailwind CSS v4

/* Black Box to Soft Blush — https://swatchly.xyz/palette/162b2d-79768f-494734-ad8b8c-dec2c0 */
@theme {
  --color-black-box: #162b2d;
  --color-black-box-50: #eaf8fa;
  --color-black-box-100: #dfeff0;
  --color-black-box-200: #c9dcdd;
  --color-black-box-300: #b0c6c8;
  --color-black-box-400: #8fa7a9;
  --color-black-box-500: #758d8f;
  --color-black-box-600: #5d7476;
  --color-black-box-700: #495e60;
  --color-black-box-800: #394c4e;
  --color-black-box-900: #2d3d3f;
  --color-black-box-950: #162b2d;
  --color-flying-carpet: #79768f;
  --color-flying-carpet-50: #f2f1ff;
  --color-flying-carpet-100: #e6e4f6;
  --color-flying-carpet-200: #d0cee3;
  --color-flying-carpet-300: #b7b5cd;
  --color-flying-carpet-400: #9693ad;
  --color-flying-carpet-500: #79768f;
  --color-flying-carpet-600: #615e76;
  --color-flying-carpet-700: #4d4a5f;
  --color-flying-carpet-800: #3c3a4c;
  --color-flying-carpet-900: #2f2d3c;
  --color-flying-carpet-950: #1d1c27;
  --color-olive-leaf: #494734;
  --color-olive-leaf-50: #f7f6e9;
  --color-olive-leaf-100: #edecde;
  --color-olive-leaf-200: #dad8c8;
  --color-olive-leaf-300: #c4c3b0;
  --color-olive-leaf-400: #a6a48f;
  --color-olive-leaf-500: #8b8974;
  --color-olive-leaf-600: #72705b;
  --color-olive-leaf-700: #5b5947;
  --color-olive-leaf-800: #494734;
  --color-olive-leaf-900: #383629;
  --color-olive-leaf-950: #232218;
  --color-punched-pink: #ad8b8c;
  --color-punched-pink-50: #ffebeb;
  --color-punched-pink-100: #f6ddde;
  --color-punched-pink-200: #e3c6c7;
  --color-punched-pink-300: #cdadae;
  --color-punched-pink-400: #ad8b8c;
  --color-punched-pink-500: #937273;
  --color-punched-pink-600: #795b5c;
  --color-punched-pink-700: #634748;
  --color-punched-pink-800: #4f3838;
  --color-punched-pink-900: #3f2b2c;
  --color-punched-pink-950: #2a1b1b;
  --color-soft-blush: #dec2c0;
  --color-soft-blush-50: #fff8f7;
  --color-soft-blush-100: #feedeb;
  --color-soft-blush-200: #eed9d8;
  --color-soft-blush-300: #dec2c0;
  --color-soft-blush-400: #bba2a0;
  --color-soft-blush-500: #9e8483;
  --color-soft-blush-600: #816967;
  --color-soft-blush-700: #685150;
  --color-soft-blush-800: #513e3d;
  --color-soft-blush-900: #3e2e2d;
  --color-soft-blush-950: #271c1b;
}