Warm Spring to Salty Ice color palette

4387B7Warm Spring C2A9903AM Latte 1F56743AM in Shibuya 473224Dark Rum C6E3F8Salty Ice

About this palette

Warm Spring to Salty Ice is a 5-color cool, vintage palette: #4387B7 (Warm Spring), #C2A990 (3AM Latte), #1F5674 (3AM in Shibuya), #473224 (Dark Rum), #C6E3F8 (Salty Ice). It mixes blue, orange, brown tones and feels cool overall. The strongest text pairing is #473224 on #C6E3F8 with a contrast ratio of 9.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Warm Spring	rgb(67, 135, 183)	hsl(205, 46%, 49%)
3AM Latte	rgb(194, 169, 144)	hsl(30, 29%, 66%)
3AM in Shibuya	rgb(31, 86, 116)	hsl(201, 58%, 29%)
Dark Rum	rgb(71, 50, 36)	hsl(24, 33%, 21%)
Salty Ice	rgb(198, 227, 248)	hsl(205, 78%, 87%)

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.

Aa9.00:1 Very good#473224 on #C6E3F8
Aa9.00:1 Very good#C6E3F8 on #473224
Aa5.96:1 Good#1F5674 on #C6E3F8
Aa5.96:1 Good#C6E3F8 on #1F5674
Aa5.36:1 Good#C2A990 on #473224
Aa5.36:1 Good#473224 on #C2A990
Aa3.55:1 Poor#C2A990 on #1F5674
Aa3.55:1 Poor#1F5674 on #C2A990

Color blindness preview

CSS variables

/* Warm Spring to Salty Ice — https://swatchly.xyz/palette/4387b7-c2a990-1f5674-473224-c6e3f8 */
:root {
  --warm-spring: #4387b7;
  --c-3am-latte: #c2a990;
  --c-3am-in-shibuya: #1f5674;
  --dark-rum: #473224;
  --salty-ice: #c6e3f8;
}

Tailwind CSS v4

/* Warm Spring to Salty Ice — https://swatchly.xyz/palette/4387b7-c2a990-1f5674-473224-c6e3f8 */
@theme {
  --color-warm-spring: #4387b7;
  --color-warm-spring-50: #eaf6ff;
  --color-warm-spring-100: #d5edff;
  --color-warm-spring-200: #acdbff;
  --color-warm-spring-300: #89c4f1;
  --color-warm-spring-400: #62a4d4;
  --color-warm-spring-500: #4387b7;
  --color-warm-spring-600: #2a6d9a;
  --color-warm-spring-700: #16577f;
  --color-warm-spring-800: #074467;
  --color-warm-spring-900: #013553;
  --color-warm-spring-950: #002137;
  --color-c-3am-latte: #c2a990;
  --color-c-3am-latte-50: #fff8f2;
  --color-c-3am-latte-100: #feefe0;
  --color-c-3am-latte-200: #efddcb;
  --color-c-3am-latte-300: #dcc8b3;
  --color-c-3am-latte-400: #c2a990;
  --color-c-3am-latte-500: #a38b73;
  --color-c-3am-latte-600: #866f57;
  --color-c-3am-latte-700: #6b5641;
  --color-c-3am-latte-800: #54422f;
  --color-c-3am-latte-900: #403121;
  --color-c-3am-latte-950: #281d12;
  --color-c-3am-in-shibuya: #1f5674;
  --color-c-3am-in-shibuya-50: #ebf7ff;
  --color-c-3am-in-shibuya-100: #d7efff;
  --color-c-3am-in-shibuya-200: #b4ddf7;
  --color-c-3am-in-shibuya-300: #97c6e4;
  --color-c-3am-in-shibuya-400: #72a6c6;
  --color-c-3am-in-shibuya-500: #548aaa;
  --color-c-3am-in-shibuya-600: #3a6e8c;
  --color-c-3am-in-shibuya-700: #1f5674;
  --color-c-3am-in-shibuya-800: #19435a;
  --color-c-3am-in-shibuya-900: #0f3447;
  --color-c-3am-in-shibuya-950: #06202e;
  --color-dark-rum: #473224;
  --color-dark-rum-50: #fff2ea;
  --color-dark-rum-100: #f9e7dd;
  --color-dark-rum-200: #e7d3c6;
  --color-dark-rum-300: #d3bcad;
  --color-dark-rum-400: #b59d8d;
  --color-dark-rum-500: #9b8272;
  --color-dark-rum-600: #80695a;
  --color-dark-rum-700: #695345;
  --color-dark-rum-800: #554235;
  --color-dark-rum-900: #473224;
  --color-dark-rum-950: #2c2018;
  --color-salty-ice: #c6e3f8;
  --color-salty-ice-50: #f5fbff;
  --color-salty-ice-100: #e4f4ff;
  --color-salty-ice-200: #c6e3f8;
  --color-salty-ice-300: #b3cadb;
  --color-salty-ice-400: #90aabd;
  --color-salty-ice-500: #738da1;
  --color-salty-ice-600: #587284;
  --color-salty-ice-700: #425a6a;
  --color-salty-ice-800: #314553;
  --color-salty-ice-900: #243541;
  --color-salty-ice-950: #14212a;
}