Black Stallion to Digital Lavender color palette

0F1D18Black Stallion 5F3B19Chocolate Fantasies 007B69Emperor Jade C59D83Beauty and the Beach CBC0E7Digital Lavender

Open in generator Export PNG, PDF, ASE…

About this palette

Black Stallion to Digital Lavender is a 5-color vintage palette: #0F1D18 (Black Stallion), #5F3B19 (Chocolate Fantasies), #007B69 (Emperor Jade), #C59D83 (Beauty and the Beach), #CBC0E7 (Digital Lavender). It mixes black, brown, turquoise, orange, purple tones and feels balanced overall. The strongest text pairing is #0F1D18 on #CBC0E7 with a contrast ratio of 10.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(15, 29, 24)	hsl(159, 32%, 9%)
Chocolate Fantasies	rgb(95, 59, 25)	hsl(29, 58%, 24%)
Emperor Jade	rgb(0, 123, 105)	hsl(171, 100%, 24%)
Beauty and the Beach	rgb(197, 157, 131)	hsl(24, 36%, 64%)
Digital Lavender	rgb(203, 192, 231)	hsl(257, 45%, 83%)

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.

Aa10.12:1 Very good#0F1D18 on #CBC0E7
Aa10.12:1 Very good#CBC0E7 on #0F1D18
Aa7.05:1 Very good#0F1D18 on #C59D83
Aa7.05:1 Very good#C59D83 on #0F1D18
Aa5.75:1 Good#5F3B19 on #CBC0E7
Aa5.75:1 Good#CBC0E7 on #5F3B19
Aa4.01:1 Poor#5F3B19 on #C59D83
Aa4.01:1 Poor#C59D83 on #5F3B19

Color blindness preview

CSS variables

/* Black Stallion to Digital Lavender — https://swatchly.xyz/palette/0f1d18-5f3b19-007b69-c59d83-cbc0e7 */
:root {
  --black-stallion: #0f1d18;
  --chocolate-fantasies: #5f3b19;
  --emperor-jade: #007b69;
  --beauty-and-the-beach: #c59d83;
  --digital-lavender: #cbc0e7;
}

Tailwind CSS v4

/* Black Stallion to Digital Lavender — https://swatchly.xyz/palette/0f1d18-5f3b19-007b69-c59d83-cbc0e7 */
@theme {
  --color-black-stallion: #0f1d18;
  --color-black-stallion-50: #eef8f4;
  --color-black-stallion-100: #e3eeea;
  --color-black-stallion-200: #cedbd6;
  --color-black-stallion-300: #b6c5bf;
  --color-black-stallion-400: #95a69f;
  --color-black-stallion-500: #798983;
  --color-black-stallion-600: #5e6e67;
  --color-black-stallion-700: #475650;
  --color-black-stallion-800: #35413d;
  --color-black-stallion-900: #26302d;
  --color-black-stallion-950: #0f1d18;
  --color-chocolate-fantasies: #5f3b19;
  --color-chocolate-fantasies-50: #fff3e9;
  --color-chocolate-fantasies-100: #ffe6d2;
  --color-chocolate-fantasies-200: #f1d1b5;
  --color-chocolate-fantasies-300: #deb99b;
  --color-chocolate-fantasies-400: #c19977;
  --color-chocolate-fantasies-500: #a67e5b;
  --color-chocolate-fantasies-600: #8a6443;
  --color-chocolate-fantasies-700: #714e30;
  --color-chocolate-fantasies-800: #5f3b19;
  --color-chocolate-fantasies-900: #482e16;
  --color-chocolate-fantasies-950: #2e1c0b;
  --color-emperor-jade: #007b69;
  --color-emperor-jade-50: #d8fff5;
  --color-emperor-jade-100: #c1f9ea;
  --color-emperor-jade-200: #a3e7d6;
  --color-emperor-jade-300: #82d1bf;
  --color-emperor-jade-400: #57b39f;
  --color-emperor-jade-500: #339784;
  --color-emperor-jade-600: #007b69;
  --color-emperor-jade-700: #006253;
  --color-emperor-jade-800: #004d41;
  --color-emperor-jade-900: #003b32;
  --color-emperor-jade-950: #00251e;
  --color-beauty-and-the-beach: #c59d83;
  --color-beauty-and-the-beach-50: #fff5ee;
  --color-beauty-and-the-beach-100: #ffe9db;
  --color-beauty-and-the-beach-200: #f3d4c1;
  --color-beauty-and-the-beach-300: #e0bda7;
  --color-beauty-and-the-beach-400: #c59d83;
  --color-beauty-and-the-beach-500: #a78168;
  --color-beauty-and-the-beach-600: #8a664e;
  --color-beauty-and-the-beach-700: #704f39;
  --color-beauty-and-the-beach-800: #593c29;
  --color-beauty-and-the-beach-900: #452d1d;
  --color-beauty-and-the-beach-950: #2c1b0f;
  --color-digital-lavender: #cbc0e7;
  --color-digital-lavender-50: #f9f7ff;
  --color-digital-lavender-100: #f1ecff;
  --color-digital-lavender-200: #dfd8f4;
  --color-digital-lavender-300: #cbc0e7;
  --color-digital-lavender-400: #aaa0c4;
  --color-digital-lavender-500: #8e83a8;
  --color-digital-lavender-600: #72688b;
  --color-digital-lavender-700: #5a5170;
  --color-digital-lavender-800: #463e59;
  --color-digital-lavender-900: #352e45;
  --color-digital-lavender-950: #211c2c;
}