Saltwater Denim to Cherry Blossom Color Palette

About this palette

Saltwater Denim to Cherry Blossom is a 5-color warm, vintage palette: #005C7E (Saltwater Denim), #7B7B00 (Olive), #072229 (Sunken Ship), #CBAA00 (Hot Sand), #F3C0D3 (Cherry Blossom). It mixes blue, yellow, gray, pink tones and feels warm overall. The strongest text pairing is #072229 on #F3C0D3 with a contrast ratio of 10.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Saltwater Denim	rgb(0, 92, 126)	hsl(196, 100%, 25%)
Olive	rgb(123, 123, 0)	hsl(60, 100%, 24%)
Sunken Ship	rgb(7, 34, 41)	hsl(192, 71%, 9%)
Hot Sand	rgb(203, 170, 0)	hsl(50, 100%, 40%)
Cherry Blossom	rgb(243, 192, 211)	hsl(338, 68%, 85%)

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.47:1 Very good#072229 on #F3C0D3
Aa10.47:1 Very good#F3C0D3 on #072229
Aa7.32:1 Very good#072229 on #CBAA00
Aa7.32:1 Very good#CBAA00 on #072229
Aa4.69:1 Good#005C7E on #F3C0D3
Aa4.69:1 Good#F3C0D3 on #005C7E
Aa3.68:1 Poor#7B7B00 on #072229
Aa3.68:1 Poor#072229 on #7B7B00

Color blindness preview

CSS variables

/* Saltwater Denim to Cherry Blossom — https://swatchly.xyz/palette/005c7e-7b7b00-072229-cbaa00-f3c0d3 */
:root {
  --saltwater-denim: #005c7e;
  --olive: #7b7b00;
  --sunken-ship: #072229;
  --hot-sand: #cbaa00;
  --cherry-blossom: #f3c0d3;
}

Tailwind CSS v4

/* Saltwater Denim to Cherry Blossom — https://swatchly.xyz/palette/005c7e-7b7b00-072229-cbaa00-f3c0d3 */
@theme {
  --color-saltwater-denim: #005c7e;
  --color-saltwater-denim-50: #eaf7ff;
  --color-saltwater-denim-100: #d5f0ff;
  --color-saltwater-denim-200: #abe0fd;
  --color-saltwater-denim-300: #8ccaeb;
  --color-saltwater-denim-400: #65abcf;
  --color-saltwater-denim-500: #458fb3;
  --color-saltwater-denim-600: #297396;
  --color-saltwater-denim-700: #005c7e;
  --color-saltwater-denim-800: #024863;
  --color-saltwater-denim-900: #00374e;
  --color-saltwater-denim-950: #002232;
  --color-olive: #7b7b00;
  --color-olive-50: #f7fac6;
  --color-olive-100: #f0f2b8;
  --color-olive-200: #dee19c;
  --color-olive-300: #cacc7d;
  --color-olive-400: #adaf52;
  --color-olive-500: #94952f;
  --color-olive-600: #7b7b00;
  --color-olive-700: #626100;
  --color-olive-800: #4c4c00;
  --color-olive-900: #3a3a00;
  --color-olive-950: #242400;
  --color-sunken-ship: #072229;
  --color-sunken-ship-50: #e8f9fe;
  --color-sunken-ship-100: #dceff5;
  --color-sunken-ship-200: #c6dce3;
  --color-sunken-ship-300: #adc6ce;
  --color-sunken-ship-400: #8ba7af;
  --color-sunken-ship-500: #6f8b94;
  --color-sunken-ship-600: #557079;
  --color-sunken-ship-700: #405961;
  --color-sunken-ship-800: #30454c;
  --color-sunken-ship-900: #23353a;
  --color-sunken-ship-950: #072229;
  --color-hot-sand: #cbaa00;
  --color-hot-sand-50: #fff9e3;
  --color-hot-sand-100: #fff1be;
  --color-hot-sand-200: #f5df8b;
  --color-hot-sand-300: #e4c965;
  --color-hot-sand-400: #cbaa00;
  --color-hot-sand-500: #a98d00;
  --color-hot-sand-600: #887100;
  --color-hot-sand-700: #6b5900;
  --color-hot-sand-800: #534400;
  --color-hot-sand-900: #3f3300;
  --color-hot-sand-950: #271f00;
  --color-cherry-blossom: #f3c0d3;
  --color-cherry-blossom-50: #ffeaf1;
  --color-cherry-blossom-100: #fddae7;
  --color-cherry-blossom-200: #f3c0d3;
  --color-cherry-blossom-300: #d9adbd;
  --color-cherry-blossom-400: #bc8e9f;
  --color-cherry-blossom-500: #a27385;
  --color-cherry-blossom-600: #865b6c;
  --color-cherry-blossom-700: #6e4756;
  --color-cherry-blossom-800: #593644;
  --color-cherry-blossom-900: #462934;
  --color-cherry-blossom-950: #2d1820;
}