Caponata to Sunken Ship color palette

832500Caponata 267DC9Soothing Sapphire FF6D22Shocking Orange 53F1F4Poseidon Jr.002421Sunken Ship

About this palette

Caponata to Sunken Ship is a 5-color cool palette: #832500 (Caponata), #267DC9 (Soothing Sapphire), #FF6D22 (Shocking Orange), #53F1F4 (Poseidon Jr.), #002421 (Sunken Ship). It mixes red, blue, orange, turquoise tones and feels cool overall. The strongest text pairing is #53F1F4 on #002421 with a contrast ratio of 11.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caponata	rgb(131, 37, 0)	hsl(17, 100%, 26%)
Soothing Sapphire	rgb(38, 125, 201)	hsl(208, 68%, 47%)
Shocking Orange	rgb(255, 109, 34)	hsl(20, 100%, 57%)
Poseidon Jr.	rgb(83, 241, 244)	hsl(181, 88%, 64%)
Sunken Ship	rgb(0, 36, 33)	hsl(175, 100%, 7%)

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.

Aa11.97:1 Very good#53F1F4 on #002421
Aa11.97:1 Very good#002421 on #53F1F4
Aa6.84:1 Good#832500 on #53F1F4
Aa6.84:1 Good#53F1F4 on #832500
Aa5.86:1 Good#FF6D22 on #002421
Aa5.86:1 Good#002421 on #FF6D22
Aa3.81:1 Poor#267DC9 on #002421
Aa3.81:1 Poor#002421 on #267DC9

Color blindness preview

CSS variables

/* Caponata to Sunken Ship — https://swatchly.xyz/palette/832500-267dc9-ff6d22-53f1f4-002421 */
:root {
  --caponata: #832500;
  --soothing-sapphire: #267dc9;
  --shocking-orange: #ff6d22;
  --poseidon-jr: #53f1f4;
  --sunken-ship: #002421;
}

Tailwind CSS v4

/* Caponata to Sunken Ship — https://swatchly.xyz/palette/832500-267dc9-ff6d22-53f1f4-002421 */
@theme {
  --color-caponata: #832500;
  --color-caponata-50: #fff2ee;
  --color-caponata-100: #ffe5dd;
  --color-caponata-200: #ffc9b9;
  --color-caponata-300: #ffaa90;
  --color-caponata-400: #e88668;
  --color-caponata-500: #ce6a4b;
  --color-caponata-600: #b15032;
  --color-caponata-700: #963c20;
  --color-caponata-800: #832500;
  --color-caponata-900: #641f06;
  --color-caponata-950: #431001;
  --color-soothing-sapphire: #267dc9;
  --color-soothing-sapphire-50: #eaf4ff;
  --color-soothing-sapphire-100: #d4e9ff;
  --color-soothing-sapphire-200: #add5ff;
  --color-soothing-sapphire-300: #7cbdff;
  --color-soothing-sapphire-400: #4a9be8;
  --color-soothing-sapphire-500: #267dc9;
  --color-soothing-sapphire-600: #0464ab;
  --color-soothing-sapphire-700: #004f8a;
  --color-soothing-sapphire-800: #003e6f;
  --color-soothing-sapphire-900: #003058;
  --color-soothing-sapphire-950: #001e3b;
  --color-shocking-orange: #ff6d22;
  --color-shocking-orange-50: #fff1ec;
  --color-shocking-orange-100: #ffe4d9;
  --color-shocking-orange-200: #ffc9b3;
  --color-shocking-orange-300: #ffa782;
  --color-shocking-orange-400: #ff6d22;
  --color-shocking-orange-500: #da5500;
  --color-shocking-orange-600: #b14300;
  --color-shocking-orange-700: #8e3400;
  --color-shocking-orange-800: #702800;
  --color-shocking-orange-900: #581d00;
  --color-shocking-orange-950: #3a1000;
  --color-poseidon-jr: #53f1f4;
  --color-poseidon-jr-50: #d3ffff;
  --color-poseidon-jr-100: #a9fcfd;
  --color-poseidon-jr-200: #53f1f4;
  --color-poseidon-jr-300: #58d6d9;
  --color-poseidon-jr-400: #00b8bb;
  --color-poseidon-jr-500: #00999c;
  --color-poseidon-jr-600: #007b7d;
  --color-poseidon-jr-700: #006264;
  --color-poseidon-jr-800: #004d4e;
  --color-poseidon-jr-900: #003b3c;
  --color-poseidon-jr-950: #002526;
  --color-sunken-ship: #002421;
  --color-sunken-ship-50: #e5faf7;
  --color-sunken-ship-100: #d9f1ee;
  --color-sunken-ship-200: #c2dedb;
  --color-sunken-ship-300: #a8c9c4;
  --color-sunken-ship-400: #86aaa5;
  --color-sunken-ship-500: #6a8e8a;
  --color-sunken-ship-600: #50736f;
  --color-sunken-ship-700: #3c5c58;
  --color-sunken-ship-800: #2c4744;
  --color-sunken-ship-900: #1f3734;
  --color-sunken-ship-950: #002421;
}