Satin Deep Black to Buckeye Color Palette

About this palette

Satin Deep Black to Buckeye is a 5-color muted, earthy, vintage palette: #131E22 (Satin Deep Black), #88AF88 (Verde), #EAD2C1 (Sand Dune), #85638A (Sunshone Plum), #66493D (Buckeye). It mixes gray, green, orange, pink, brown tones and feels balanced overall. The strongest text pairing is #131E22 on #EAD2C1 with a contrast ratio of 11.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Satin Deep Black	rgb(19, 30, 34)	hsl(196, 28%, 10%)
Verde	rgb(136, 175, 136)	hsl(120, 20%, 61%)
Sand Dune	rgb(234, 210, 193)	hsl(25, 49%, 84%)
Sunshone Plum	rgb(133, 99, 138)	hsl(292, 16%, 46%)
Buckeye	rgb(102, 73, 61)	hsl(18, 25%, 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.

Aa11.72:1 Very good#131E22 on #EAD2C1
Aa11.72:1 Very good#EAD2C1 on #131E22
Aa6.90:1 Good#131E22 on #88AF88
Aa6.90:1 Good#88AF88 on #131E22
Aa5.60:1 Good#EAD2C1 on #66493D
Aa5.60:1 Good#66493D on #EAD2C1
Aa3.49:1 Poor#EAD2C1 on #85638A
Aa3.49:1 Poor#85638A on #EAD2C1

Color blindness preview

CSS variables

/* Satin Deep Black to Buckeye — https://swatchly.xyz/palette/131e22-88af88-ead2c1-85638a-66493d */
:root {
  --satin-deep-black: #131e22;
  --verde: #88af88;
  --sand-dune: #ead2c1;
  --sunshone-plum: #85638a;
  --buckeye: #66493d;
}

Tailwind CSS v4

/* Satin Deep Black to Buckeye — https://swatchly.xyz/palette/131e22-88af88-ead2c1-85638a-66493d */
@theme {
  --color-satin-deep-black: #131e22;
  --color-satin-deep-black-50: #eff7fa;
  --color-satin-deep-black-100: #e4edf0;
  --color-satin-deep-black-200: #cfdade;
  --color-satin-deep-black-300: #b7c3c8;
  --color-satin-deep-black-400: #97a4a9;
  --color-satin-deep-black-500: #7b888d;
  --color-satin-deep-black-600: #606d72;
  --color-satin-deep-black-700: #4a565a;
  --color-satin-deep-black-800: #384246;
  --color-satin-deep-black-900: #293235;
  --color-satin-deep-black-950: #131e22;
  --color-verde: #88af88;
  --color-verde-50: #e7fde6;
  --color-verde-100: #dbf4db;
  --color-verde-200: #c4e2c4;
  --color-verde-300: #abcdab;
  --color-verde-400: #88af88;
  --color-verde-500: #6d936d;
  --color-verde-600: #537754;
  --color-verde-700: #3e603f;
  --color-verde-800: #2e4b2f;
  --color-verde-900: #213a22;
  --color-verde-950: #132413;
  --color-sand-dune: #ead2c1;
  --color-sand-dune-50: #fff2e9;
  --color-sand-dune-100: #f7e8dd;
  --color-sand-dune-200: #ead2c1;
  --color-sand-dune-300: #d0bcae;
  --color-sand-dune-400: #b29d8d;
  --color-sand-dune-500: #978172;
  --color-sand-dune-600: #7c6758;
  --color-sand-dune-700: #645144;
  --color-sand-dune-800: #4f3f33;
  --color-sand-dune-900: #3d3026;
  --color-sand-dune-950: #271d16;
  --color-sunshone-plum: #85638a;
  --color-sunshone-plum-50: #fdf0ff;
  --color-sunshone-plum-100: #fbe3fe;
  --color-sunshone-plum-200: #eacfee;
  --color-sunshone-plum-300: #d7b7db;
  --color-sunshone-plum-400: #ba97bf;
  --color-sunshone-plum-500: #a07ca5;
  --color-sunshone-plum-600: #85638a;
  --color-sunshone-plum-700: #6b4d70;
  --color-sunshone-plum-800: #553a59;
  --color-sunshone-plum-900: #422b46;
  --color-sunshone-plum-950: #2a1a2d;
  --color-buckeye: #66493d;
  --color-buckeye-50: #fff2ed;
  --color-buckeye-100: #fce6dd;
  --color-buckeye-200: #ebd0c5;
  --color-buckeye-300: #d6b8ac;
  --color-buckeye-400: #b7978a;
  --color-buckeye-500: #9b7b6e;
  --color-buckeye-600: #7e6054;
  --color-buckeye-700: #66493d;
  --color-buckeye-800: #4f392f;
  --color-buckeye-900: #3e2b23;
  --color-buckeye-950: #271a14;
}