Seafarer to Prosciutto color palette

154964Seafarer 10627BBlue-Collar 936657Leather AD7E60Café au Lait 40BCE2Caribbean Blue DEB69CProsciutto

Open in generator Export PNG, PDF, ASE…

About this palette

Seafarer to Prosciutto is a 6-color vintage palette: #154964 (Seafarer), #10627B (Blue-Collar), #936657 (Leather), #AD7E60 (Café au Lait), #40BCE2 (Caribbean Blue), #DEB69C (Prosciutto). It mixes blue, red, orange tones and feels balanced overall. The strongest text pairing is #154964 on #DEB69C with a contrast ratio of 5.20:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafarer	rgb(21, 73, 100)	hsl(201, 65%, 24%)
Blue-Collar	rgb(16, 98, 123)	hsl(194, 77%, 27%)
Leather	rgb(147, 102, 87)	hsl(15, 26%, 46%)
Café au Lait	rgb(173, 126, 96)	hsl(23, 32%, 53%)
Caribbean Blue	rgb(64, 188, 226)	hsl(194, 74%, 57%)
Prosciutto	rgb(222, 182, 156)	hsl(24, 50%, 74%)

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.

Aa5.20:1 Good#154964 on #DEB69C
Aa5.20:1 Good#DEB69C on #154964
Aa4.38:1 Poor#154964 on #40BCE2
Aa4.38:1 Poor#40BCE2 on #154964
Aa3.69:1 Poor#10627B on #DEB69C
Aa3.69:1 Poor#DEB69C on #10627B
Aa3.11:1 Poor#10627B on #40BCE2
Aa3.11:1 Poor#40BCE2 on #10627B

Color blindness preview

CSS variables

/* Seafarer to Prosciutto — https://swatchly.xyz/palette/154964-10627b-936657-ad7e60-40bce2-deb69c */
:root {
  --seafarer: #154964;
  --blue-collar: #10627b;
  --leather: #936657;
  --caf-au-lait: #ad7e60;
  --caribbean-blue: #40bce2;
  --prosciutto: #deb69c;
}

Tailwind CSS v4

/* Seafarer to Prosciutto — https://swatchly.xyz/palette/154964-10627b-936657-ad7e60-40bce2-deb69c */
@theme {
  --color-seafarer: #154964;
  --color-seafarer-50: #ebf7ff;
  --color-seafarer-100: #d7efff;
  --color-seafarer-200: #b7def6;
  --color-seafarer-300: #9cc8e3;
  --color-seafarer-400: #79a9c7;
  --color-seafarer-500: #5c8eac;
  --color-seafarer-600: #427390;
  --color-seafarer-700: #2f5c76;
  --color-seafarer-800: #154964;
  --color-seafarer-900: #15384b;
  --color-seafarer-950: #092331;
  --color-blue-collar: #10627b;
  --color-blue-collar-50: #e8f8ff;
  --color-blue-collar-100: #d0f1ff;
  --color-blue-collar-200: #aee1f6;
  --color-blue-collar-300: #91cde4;
  --color-blue-collar-400: #6aaec8;
  --color-blue-collar-500: #4b93ae;
  --color-blue-collar-600: #307992;
  --color-blue-collar-700: #10627b;
  --color-blue-collar-800: #084d61;
  --color-blue-collar-900: #003b4d;
  --color-blue-collar-950: #002531;
  --color-leather: #936657;
  --color-leather-50: #fff2ee;
  --color-leather-100: #ffe6de;
  --color-leather-200: #f6d1c4;
  --color-leather-300: #e4baac;
  --color-leather-400: #c89a8b;
  --color-leather-500: #ae7f70;
  --color-leather-600: #936657;
  --color-leather-700: #784f42;
  --color-leather-800: #603c30;
  --color-leather-900: #4b2d23;
  --color-leather-950: #301b13;
  --color-caf-au-lait: #ad7e60;
  --color-caf-au-lait-50: #fff3ec;
  --color-caf-au-lait-100: #ffe7d9;
  --color-caf-au-lait-200: #f7d1ba;
  --color-caf-au-lait-300: #e4ba9f;
  --color-caf-au-lait-400: #c8997c;
  --color-caf-au-lait-500: #ad7e60;
  --color-caf-au-lait-600: #906346;
  --color-caf-au-lait-700: #754d32;
  --color-caf-au-lait-800: #5e3a23;
  --color-caf-au-lait-900: #492c18;
  --color-caf-au-lait-950: #2f1a0b;
  --color-caribbean-blue: #40bce2;
  --color-caribbean-blue-50: #f0fbff;
  --color-caribbean-blue-100: #ddf6ff;
  --color-caribbean-blue-200: #aee9ff;
  --color-caribbean-blue-300: #7ed8f8;
  --color-caribbean-blue-400: #40bce2;
  --color-caribbean-blue-500: #0d9ec2;
  --color-caribbean-blue-600: #007f9d;
  --color-caribbean-blue-700: #00647d;
  --color-caribbean-blue-800: #004d61;
  --color-caribbean-blue-900: #003b4b;
  --color-caribbean-blue-950: #00242f;
  --color-prosciutto: #deb69c;
  --color-prosciutto-50: #fff1e9;
  --color-prosciutto-100: #ffe4d4;
  --color-prosciutto-200: #eecfbb;
  --color-prosciutto-300: #deb69c;
  --color-prosciutto-400: #bd977f;
  --color-prosciutto-500: #a17c64;
  --color-prosciutto-600: #85624b;
  --color-prosciutto-700: #6c4d38;
  --color-prosciutto-800: #573b28;
  --color-prosciutto-900: #442d1d;
  --color-prosciutto-950: #2c1b0f;
}