Kissed by Mist to Violet Void color palette

FAD6FFKissed by Mist 608C55Homegrown 1D5959Deep Sea Diver E89589Strawberry Memory 1F1524Violet Void

About this palette

Kissed by Mist to Violet Void is a 5-color cool palette: #FAD6FF (Kissed by Mist), #608C55 (Homegrown), #1D5959 (Deep Sea Diver), #E89589 (Strawberry Memory), #1F1524 (Violet Void). It mixes pink, green, turquoise, red, black tones and feels cool overall. The strongest text pairing is #FAD6FF on #1F1524 with a contrast ratio of 13.54:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kissed by Mist	rgb(250, 214, 255)	hsl(293, 100%, 92%)
Homegrown	rgb(96, 140, 85)	hsl(108, 24%, 44%)
Deep Sea Diver	rgb(29, 89, 89)	hsl(180, 51%, 23%)
Strawberry Memory	rgb(232, 149, 137)	hsl(8, 67%, 72%)
Violet Void	rgb(31, 21, 36)	hsl(280, 26%, 11%)

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.

Aa13.54:1 Super#FAD6FF on #1F1524
Aa13.54:1 Super#1F1524 on #FAD6FF
Aa7.63:1 Very good#E89589 on #1F1524
Aa7.63:1 Very good#1F1524 on #E89589
Aa6.14:1 Good#FAD6FF on #1D5959
Aa6.14:1 Good#1D5959 on #FAD6FF
Aa4.52:1 Good#608C55 on #1F1524
Aa4.52:1 Good#1F1524 on #608C55

Color blindness preview

CSS variables

/* Kissed by Mist to Violet Void — https://swatchly.xyz/palette/fad6ff-608c55-1d5959-e89589-1f1524 */
:root {
  --kissed-by-mist: #fad6ff;
  --homegrown: #608c55;
  --deep-sea-diver: #1d5959;
  --strawberry-memory: #e89589;
  --violet-void: #1f1524;
}

Tailwind CSS v4

/* Kissed by Mist to Violet Void — https://swatchly.xyz/palette/fad6ff-608c55-1d5959-e89589-1f1524 */
@theme {
  --color-kissed-by-mist: #fad6ff;
  --color-kissed-by-mist-50: #fce7ff;
  --color-kissed-by-mist-100: #fad6ff;
  --color-kissed-by-mist-200: #e2c7e6;
  --color-kissed-by-mist-300: #cfb0d3;
  --color-kissed-by-mist-400: #b291b6;
  --color-kissed-by-mist-500: #97779c;
  --color-kissed-by-mist-600: #7d5e81;
  --color-kissed-by-mist-700: #664a6a;
  --color-kissed-by-mist-800: #513854;
  --color-kissed-by-mist-900: #3f2a42;
  --color-kissed-by-mist-950: #28192a;
  --color-homegrown: #608c55;
  --color-homegrown-50: #e2fddb;
  --color-homegrown-100: #d4f3cd;
  --color-homegrown-200: #bbdfb2;
  --color-homegrown-300: #a0c996;
  --color-homegrown-400: #7da972;
  --color-homegrown-500: #608c55;
  --color-homegrown-600: #49723e;
  --color-homegrown-700: #365c2c;
  --color-homegrown-800: #28481f;
  --color-homegrown-900: #1d3915;
  --color-homegrown-950: #10240a;
  --color-deep-sea-diver: #1d5959;
  --color-deep-sea-diver-50: #ddfdfc;
  --color-deep-sea-diver-100: #cff4f3;
  --color-deep-sea-diver-200: #b5e0df;
  --color-deep-sea-diver-300: #97c9c9;
  --color-deep-sea-diver-400: #72aaa9;
  --color-deep-sea-diver-500: #538d8d;
  --color-deep-sea-diver-600: #397171;
  --color-deep-sea-diver-700: #1d5959;
  --color-deep-sea-diver-800: #184545;
  --color-deep-sea-diver-900: #0e3636;
  --color-deep-sea-diver-950: #062121;
  --color-strawberry-memory: #e89589;
  --color-strawberry-memory-50: #fff8f7;
  --color-strawberry-memory-100: #ffedeb;
  --color-strawberry-memory-200: #ffd5ce;
  --color-strawberry-memory-300: #fdb8ad;
  --color-strawberry-memory-400: #e89589;
  --color-strawberry-memory-500: #c7786d;
  --color-strawberry-memory-600: #a75b51;
  --color-strawberry-memory-700: #89433b;
  --color-strawberry-memory-800: #6e312a;
  --color-strawberry-memory-900: #55231d;
  --color-strawberry-memory-950: #36120e;
  --color-violet-void: #1f1524;
  --color-violet-void-50: #faf2fe;
  --color-violet-void-100: #f0e7f5;
  --color-violet-void-200: #ddd3e3;
  --color-violet-void-300: #c7bcce;
  --color-violet-void-400: #a99caf;
  --color-violet-void-500: #8c8093;
  --color-violet-void-600: #706476;
  --color-violet-void-700: #584d5e;
  --color-violet-void-800: #433a48;
  --color-violet-void-900: #322a36;
  --color-violet-void-950: #1f1524;
}