White Sand to Diver’s Eden Color Palette

About this palette

White Sand to Diver’s Eden is a 5-color muted palette: #F5EDD9 (White Sand), #AC9C87 (Majestic Elk), #3F343F (Professor Plum), #D2C5D7 (Mecha Kitty), #37797E (Diver’s Eden). It mixes white, orange, gray, turquoise tones and feels balanced overall. The strongest text pairing is #F5EDD9 on #3F343F with a contrast ratio of 10.14:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
White Sand	rgb(245, 237, 217)	hsl(43, 58%, 91%)
Majestic Elk	rgb(172, 156, 135)	hsl(34, 18%, 60%)
Professor Plum	rgb(63, 52, 63)	hsl(300, 10%, 23%)
Mecha Kitty	rgb(210, 197, 215)	hsl(283, 18%, 81%)
Diver’s Eden	rgb(55, 121, 126)	hsl(184, 39%, 35%)

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.14:1 Very good#F5EDD9 on #3F343F
Aa10.14:1 Very good#3F343F on #F5EDD9
Aa7.16:1 Very good#3F343F on #D2C5D7
Aa7.16:1 Very good#D2C5D7 on #3F343F
Aa4.43:1 Poor#AC9C87 on #3F343F
Aa4.43:1 Poor#3F343F on #AC9C87
Aa4.29:1 Poor#F5EDD9 on #37797E
Aa4.29:1 Poor#37797E on #F5EDD9

Color blindness preview

CSS variables

/* White Sand to Diver’s Eden — https://swatchly.xyz/palette/f5edd9-ac9c87-3f343f-d2c5d7-37797e */
:root {
  --white-sand: #f5edd9;
  --majestic-elk: #ac9c87;
  --professor-plum: #3f343f;
  --mecha-kitty: #d2c5d7;
  --diver-s-eden: #37797e;
}

Tailwind CSS v4

/* White Sand to Diver’s Eden — https://swatchly.xyz/palette/f5edd9-ac9c87-3f343f-d2c5d7-37797e */
@theme {
  --color-white-sand: #f5edd9;
  --color-white-sand-50: #fbf7ec;
  --color-white-sand-100: #f5edd9;
  --color-white-sand-200: #dfd9cb;
  --color-white-sand-300: #c8c2b2;
  --color-white-sand-400: #a9a290;
  --color-white-sand-500: #8e8674;
  --color-white-sand-600: #736c5a;
  --color-white-sand-700: #5b5545;
  --color-white-sand-800: #474234;
  --color-white-sand-900: #373227;
  --color-white-sand-950: #221f17;
  --color-majestic-elk: #ac9c87;
  --color-majestic-elk-50: #fcf3e6;
  --color-majestic-elk-100: #f3e8da;
  --color-majestic-elk-200: #e0d3c3;
  --color-majestic-elk-300: #cabca9;
  --color-majestic-elk-400: #ac9c87;
  --color-majestic-elk-500: #91816d;
  --color-majestic-elk-600: #766854;
  --color-majestic-elk-700: #5f5240;
  --color-majestic-elk-800: #4b3f30;
  --color-majestic-elk-900: #3a3124;
  --color-majestic-elk-950: #251e15;
  --color-professor-plum: #3f343f;
  --color-professor-plum-50: #faf2fa;
  --color-professor-plum-100: #f1e8f1;
  --color-professor-plum-200: #ded4de;
  --color-professor-plum-300: #c8bdc8;
  --color-professor-plum-400: #ab9eaa;
  --color-professor-plum-500: #908390;
  --color-professor-plum-600: #766a76;
  --color-professor-plum-700: #605560;
  --color-professor-plum-800: #4d434d;
  --color-professor-plum-900: #3f343f;
  --color-professor-plum-950: #272127;
  --color-mecha-kitty: #d2c5d7;
  --color-mecha-kitty-50: #fdf8ff;
  --color-mecha-kitty-100: #f6eff9;
  --color-mecha-kitty-200: #e5dce8;
  --color-mecha-kitty-300: #d2c5d7;
  --color-mecha-kitty-400: #b0a4b5;
  --color-mecha-kitty-500: #938798;
  --color-mecha-kitty-600: #776b7b;
  --color-mecha-kitty-700: #5e5462;
  --color-mecha-kitty-800: #49404c;
  --color-mecha-kitty-900: #37303a;
  --color-mecha-kitty-950: #221d24;
  --color-diver-s-eden: #37797e;
  --color-diver-s-eden-50: #dcfdff;
  --color-diver-s-eden-100: #ccf4f7;
  --color-diver-s-eden-200: #b3e2e6;
  --color-diver-s-eden-300: #96cdd2;
  --color-diver-s-eden-400: #71afb4;
  --color-diver-s-eden-500: #539499;
  --color-diver-s-eden-600: #37797e;
  --color-diver-s-eden-700: #236165;
  --color-diver-s-eden-800: #144c50;
  --color-diver-s-eden-900: #093b3e;
  --color-diver-s-eden-950: #032527;
}