Start generating

Soba to Shipyard color palette

D4B6A7Soba393823GraphiteDFEAFAFreeze Up9C8178Hemp546E85Shipyard
Open in generator Export PNG, PDF, ASE…

About this palette

Soba to Shipyard is a 5-color muted palette: #D4B6A7 (Soba), #393823 (Graphite), #DFEAFA (Freeze Up), #9C8178 (Hemp), #546E85 (Shipyard). It mixes orange, gray, white, red, blue tones and feels warm overall. The strongest text pairing is #393823 on #DFEAFA with a contrast ratio of 9.80:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sobargb(212, 182, 167)hsl(20, 34%, 74%)
Graphitergb(57, 56, 35)hsl(57, 24%, 18%)
Freeze Uprgb(223, 234, 250)hsl(216, 73%, 93%)
Hemprgb(156, 129, 120)hsl(15, 15%, 54%)
Shipyardrgb(84, 110, 133)hsl(208, 23%, 43%)

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.80:1 Very good#393823 on #DFEAFA
  • Aa9.80:1 Very good#DFEAFA on #393823
  • Aa6.26:1 Good#D4B6A7 on #393823
  • Aa6.26:1 Good#393823 on #D4B6A7
  • Aa4.38:1 Poor#DFEAFA on #546E85
  • Aa4.38:1 Poor#546E85 on #DFEAFA
  • Aa3.30:1 Poor#393823 on #9C8178
  • Aa3.30:1 Poor#9C8178 on #393823

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Soba to Shipyard — https://swatchly.xyz/palette/d4b6a7-393823-dfeafa-9c8178-546e85 */
:root {
  --soba: #d4b6a7;
  --graphite: #393823;
  --freeze-up: #dfeafa;
  --hemp: #9c8178;
  --shipyard: #546e85;
}

Tailwind CSS v4

/* Soba to Shipyard — https://swatchly.xyz/palette/d4b6a7-393823-dfeafa-9c8178-546e85 */
@theme {
  --color-soba: #d4b6a7;
  --color-soba-50: #fff0e8;
  --color-soba-100: #f8e4da;
  --color-soba-200: #e6cfc3;
  --color-soba-300: #d4b6a7;
  --color-soba-400: #b4988a;
  --color-soba-500: #997d6f;
  --color-soba-600: #7e6456;
  --color-soba-700: #664e42;
  --color-soba-800: #513d32;
  --color-soba-900: #402e25;
  --color-soba-950: #291c16;
  --color-graphite: #393823;
  --color-graphite-50: #f6f6e8;
  --color-graphite-100: #edecdc;
  --color-graphite-200: #d9d9c6;
  --color-graphite-300: #c3c2ad;
  --color-graphite-400: #a5a48d;
  --color-graphite-500: #8a8972;
  --color-graphite-600: #707059;
  --color-graphite-700: #5a5945;
  --color-graphite-800: #484735;
  --color-graphite-900: #393823;
  --color-graphite-950: #242317;
  --color-freeze-up: #dfeafa;
  --color-freeze-up-50: #eef4fd;
  --color-freeze-up-100: #dfeafa;
  --color-freeze-up-200: #ced6e2;
  --color-freeze-up-300: #b7c0ce;
  --color-freeze-up-400: #97a1b0;
  --color-freeze-up-500: #7c8695;
  --color-freeze-up-600: #636c7a;
  --color-freeze-up-700: #4d5662;
  --color-freeze-up-800: #3c434e;
  --color-freeze-up-900: #2d333c;
  --color-freeze-up-950: #1b2026;
  --color-hemp: #9c8178;
  --color-hemp-50: #fff2ee;
  --color-hemp-100: #fae7e1;
  --color-hemp-200: #e9d3cc;
  --color-hemp-300: #d5bcb4;
  --color-hemp-400: #b79c93;
  --color-hemp-500: #9c8178;
  --color-hemp-600: #80675e;
  --color-hemp-700: #675049;
  --color-hemp-800: #523e37;
  --color-hemp-900: #402f29;
  --color-hemp-950: #281c18;
  --color-shipyard: #546e85;
  --color-shipyard-50: #edf6ff;
  --color-shipyard-100: #dceefe;
  --color-shipyard-200: #c5daee;
  --color-shipyard-300: #abc4da;
  --color-shipyard-400: #8aa4bc;
  --color-shipyard-500: #6e89a1;
  --color-shipyard-600: #546e85;
  --color-shipyard-700: #40576c;
  --color-shipyard-800: #304456;
  --color-shipyard-900: #233443;
  --color-shipyard-950: #14202b;
}

Similar palettes