Sea Serpent to Blushing Cinnamon Color Palette

About this palette

Sea Serpent to Blushing Cinnamon is a 5-color cool palette: #3AD2DC (Sea Serpent), #004045 (Rich Black), #D17500 (Polished Bronze), #3856DA (Warm Blue), #FFBE9E (Blushing Cinnamon). It mixes turquoise, orange, blue tones and feels cool overall. The strongest text pairing is #004045 on #FFBE9E with a contrast ratio of 7.21:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Serpent	rgb(58, 210, 220)	hsl(184, 70%, 55%)
Rich Black	rgb(0, 64, 69)	hsl(184, 100%, 14%)
Polished Bronze	rgb(209, 117, 0)	hsl(34, 100%, 41%)
Warm Blue	rgb(56, 86, 218)	hsl(229, 69%, 54%)
Blushing Cinnamon	rgb(255, 190, 158)	hsl(20, 100%, 81%)

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.

Aa7.21:1 Very good#004045 on #FFBE9E
Aa7.21:1 Very good#FFBE9E on #004045
Aa6.28:1 Good#3AD2DC on #004045
Aa6.28:1 Good#004045 on #3AD2DC
Aa3.73:1 Poor#3856DA on #FFBE9E
Aa3.73:1 Poor#FFBE9E on #3856DA
Aa3.44:1 Poor#004045 on #D17500
Aa3.44:1 Poor#D17500 on #004045

Color blindness preview

CSS variables

/* Sea Serpent to Blushing Cinnamon — https://swatchly.xyz/palette/3ad2dc-004045-d17500-3856da-ffbe9e */
:root {
  --sea-serpent: #3ad2dc;
  --rich-black: #004045;
  --polished-bronze: #d17500;
  --warm-blue: #3856da;
  --blushing-cinnamon: #ffbe9e;
}

Tailwind CSS v4

/* Sea Serpent to Blushing Cinnamon — https://swatchly.xyz/palette/3ad2dc-004045-d17500-3856da-ffbe9e */
@theme {
  --color-sea-serpent: #3ad2dc;
  --color-sea-serpent-50: #cffcff;
  --color-sea-serpent-100: #a7f8fd;
  --color-sea-serpent-200: #82e5ec;
  --color-sea-serpent-300: #3ad2dc;
  --color-sea-serpent-400: #00b2bc;
  --color-sea-serpent-500: #00949d;
  --color-sea-serpent-600: #00787f;
  --color-sea-serpent-700: #006065;
  --color-sea-serpent-800: #004b50;
  --color-sea-serpent-900: #003b3f;
  --color-sea-serpent-950: #002527;
  --color-rich-black: #004045;
  --color-rich-black-50: #defcff;
  --color-rich-black-100: #d1f3f6;
  --color-rich-black-200: #b8e0e4;
  --color-rich-black-300: #9ccbcf;
  --color-rich-black-400: #79adb2;
  --color-rich-black-500: #5d9398;
  --color-rich-black-600: #43787d;
  --color-rich-black-700: #306266;
  --color-rich-black-800: #214e53;
  --color-rich-black-900: #004045;
  --color-rich-black-950: #0a282b;
  --color-polished-bronze: #d17500;
  --color-polished-bronze-50: #fff5ed;
  --color-polished-bronze-100: #ffeada;
  --color-polished-bronze-200: #ffd3b0;
  --color-polished-bronze-300: #ffb578;
  --color-polished-bronze-400: #ea923f;
  --color-polished-bronze-500: #d17500;
  --color-polished-bronze-600: #a95d00;
  --color-polished-bronze-700: #874900;
  --color-polished-bronze-800: #6a3800;
  --color-polished-bronze-900: #522a00;
  --color-polished-bronze-950: #341800;
  --color-warm-blue: #3856da;
  --color-warm-blue-50: #f1f5ff;
  --color-warm-blue-100: #e2eaff;
  --color-warm-blue-200: #c5d5ff;
  --color-warm-blue-300: #a3bcff;
  --color-warm-blue-400: #7598ff;
  --color-warm-blue-500: #5074fa;
  --color-warm-blue-600: #3856da;
  --color-warm-blue-700: #2941b6;
  --color-warm-blue-800: #1d2f96;
  --color-warm-blue-900: #14227a;
  --color-warm-blue-950: #0a1352;
  --color-blushing-cinnamon: #ffbe9e;
  --color-blushing-cinnamon-50: #ffeae1;
  --color-blushing-cinnamon-100: #ffdbca;
  --color-blushing-cinnamon-200: #ffbe9e;
  --color-blushing-cinnamon-300: #e4ab90;
  --color-blushing-cinnamon-400: #c88c6e;
  --color-blushing-cinnamon-500: #ad7254;
  --color-blushing-cinnamon-600: #91593d;
  --color-blushing-cinnamon-700: #78452b;
  --color-blushing-cinnamon-800: #61351e;
  --color-blushing-cinnamon-900: #4d2713;
  --color-blushing-cinnamon-950: #321709;
}