Start generating

Arrowwood to Pacific Navy color palette

B18427Arrowwood2370B4Matt BlueFFD98FGolden EyeFFB733Soft Boiled00285CBlack Sea Night334A8APacific Navy
Open in generator Export PNG, PDF, ASE…

About this palette

Arrowwood to Pacific Navy is a 6-color palette: #B18427 (Arrowwood), #2370B4 (Matt Blue), #FFD98F (Golden Eye), #FFB733 (Soft Boiled), #00285C (Black Sea Night), #334A8A (Pacific Navy). It mixes yellow, blue tones and feels balanced overall. The strongest text pairing is #FFD98F on #00285C with a contrast ratio of 10.68:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Arrowwoodrgb(177, 132, 39)hsl(40, 64%, 42%)
Matt Bluergb(35, 112, 180)hsl(208, 67%, 42%)
Golden Eyergb(255, 217, 143)hsl(40, 100%, 78%)
Soft Boiledrgb(255, 183, 51)hsl(39, 100%, 60%)
Black Sea Nightrgb(0, 40, 92)hsl(214, 100%, 18%)
Pacific Navyrgb(51, 74, 138)hsl(224, 46%, 37%)

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.

  • Aa10.68:1 Very good#FFD98F on #00285C
  • Aa10.68:1 Very good#00285C on #FFD98F
  • Aa8.28:1 Very good#FFB733 on #00285C
  • Aa8.28:1 Very good#00285C on #FFB733
  • Aa6.26:1 Good#FFD98F on #334A8A
  • Aa6.26:1 Good#334A8A on #FFD98F
  • Aa4.85:1 Good#FFB733 on #334A8A
  • Aa4.85:1 Good#334A8A on #FFB733

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Arrowwood to Pacific Navy — https://swatchly.xyz/palette/b18427-2370b4-ffd98f-ffb733-00285c-334a8a */
:root {
  --arrowwood: #b18427;
  --matt-blue: #2370b4;
  --golden-eye: #ffd98f;
  --soft-boiled: #ffb733;
  --black-sea-night: #00285c;
  --pacific-navy: #334a8a;
}

Tailwind CSS v4

/* Arrowwood to Pacific Navy — https://swatchly.xyz/palette/b18427-2370b4-ffd98f-ffb733-00285c-334a8a */
@theme {
  --color-arrowwood: #b18427;
  --color-arrowwood-50: #fff5e4;
  --color-arrowwood-100: #ffebc8;
  --color-arrowwood-200: #f8d69a;
  --color-arrowwood-300: #e6bf79;
  --color-arrowwood-400: #cb9f4e;
  --color-arrowwood-500: #b18427;
  --color-arrowwood-600: #926900;
  --color-arrowwood-700: #745200;
  --color-arrowwood-800: #5b4000;
  --color-arrowwood-900: #463000;
  --color-arrowwood-950: #2c1d00;
  --color-matt-blue: #2370b4;
  --color-matt-blue-50: #eef6ff;
  --color-matt-blue-100: #ddeeff;
  --color-matt-blue-200: #badcff;
  --color-matt-blue-300: #90c7ff;
  --color-matt-blue-400: #61a7ec;
  --color-matt-blue-500: #418bd1;
  --color-matt-blue-600: #2370b4;
  --color-matt-blue-700: #0d5895;
  --color-matt-blue-800: #004579;
  --color-matt-blue-900: #00355f;
  --color-matt-blue-950: #00203e;
  --color-golden-eye: #ffd98f;
  --color-golden-eye-50: #fff9ee;
  --color-golden-eye-100: #ffefd2;
  --color-golden-eye-200: #ffd98f;
  --color-golden-eye-300: #e1c287;
  --color-golden-eye-400: #c3a15c;
  --color-golden-eye-500: #a7833a;
  --color-golden-eye-600: #8a681a;
  --color-golden-eye-700: #6f5100;
  --color-golden-eye-800: #563e00;
  --color-golden-eye-900: #432f00;
  --color-golden-eye-950: #2a1d00;
  --color-soft-boiled: #ffb733;
  --color-soft-boiled-50: #fff7eb;
  --color-soft-boiled-100: #ffecd0;
  --color-soft-boiled-200: #ffd595;
  --color-soft-boiled-300: #ffb733;
  --color-soft-boiled-400: #da9704;
  --color-soft-boiled-500: #b57d00;
  --color-soft-boiled-600: #926400;
  --color-soft-boiled-700: #744f00;
  --color-soft-boiled-800: #5b3c00;
  --color-soft-boiled-900: #462d00;
  --color-soft-boiled-950: #2c1b00;
  --color-black-sea-night: #00285c;
  --color-black-sea-night-50: #eff6ff;
  --color-black-sea-night-100: #dfecff;
  --color-black-sea-night-200: #bfdaff;
  --color-black-sea-night-300: #9dc3fa;
  --color-black-sea-night-400: #78a2dd;
  --color-black-sea-night-500: #5a84c0;
  --color-black-sea-night-600: #4068a0;
  --color-black-sea-night-700: #2c4f81;
  --color-black-sea-night-800: #1d3b65;
  --color-black-sea-night-900: #00285c;
  --color-black-sea-night-950: #081930;
  --color-pacific-navy: #334a8a;
  --color-pacific-navy-50: #f1f5ff;
  --color-pacific-navy-100: #e2ebff;
  --color-pacific-navy-200: #c4d6ff;
  --color-pacific-navy-300: #a3bdfc;
  --color-pacific-navy-400: #809be0;
  --color-pacific-navy-500: #637ec3;
  --color-pacific-navy-600: #4a62a3;
  --color-pacific-navy-700: #334a8a;
  --color-pacific-navy-800: #283a6b;
  --color-pacific-navy-900: #1d2c55;
  --color-pacific-navy-950: #101a38;
}

Similar palettes