Start generating

Salsa Verde to Old Study color palette

CCC667Salsa VerdeFF774APrecious Persimmon898B00Captain Kirk0055B5Blasphemous Blue003671Atlantic Navy3B1709Old Study
Open in generator Export PNG, PDF, ASE…

About this palette

Salsa Verde to Old Study is a 6-color warm palette: #CCC667 (Salsa Verde), #FF774A (Precious Persimmon), #898B00 (Captain Kirk), #0055B5 (Blasphemous Blue), #003671 (Atlantic Navy), #3B1709 (Old Study). It mixes yellow, red, blue, brown tones and feels warm overall. The strongest text pairing is #CCC667 on #3B1709 with a contrast ratio of 9.02:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Salsa Verdergb(204, 198, 103)hsl(56, 50%, 60%)
Precious Persimmonrgb(255, 119, 74)hsl(15, 100%, 65%)
Captain Kirkrgb(137, 139, 0)hsl(61, 100%, 27%)
Blasphemous Bluergb(0, 85, 181)hsl(212, 100%, 35%)
Atlantic Navyrgb(0, 54, 113)hsl(211, 100%, 22%)
Old Studyrgb(59, 23, 9)hsl(17, 74%, 13%)

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.02:1 Very good#CCC667 on #3B1709
  • Aa9.02:1 Very good#3B1709 on #CCC667
  • Aa6.70:1 Good#CCC667 on #003671
  • Aa6.70:1 Good#003671 on #CCC667
  • Aa6.09:1 Good#FF774A on #3B1709
  • Aa6.09:1 Good#3B1709 on #FF774A
  • Aa4.52:1 Good#FF774A on #003671
  • Aa4.52:1 Good#003671 on #FF774A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Salsa Verde to Old Study — https://swatchly.xyz/palette/ccc667-ff774a-898b00-0055b5-003671-3b1709 */
:root {
  --salsa-verde: #ccc667;
  --precious-persimmon: #ff774a;
  --captain-kirk: #898b00;
  --blasphemous-blue: #0055b5;
  --atlantic-navy: #003671;
  --old-study: #3b1709;
}

Tailwind CSS v4

/* Salsa Verde to Old Study — https://swatchly.xyz/palette/ccc667-ff774a-898b00-0055b5-003671-3b1709 */
@theme {
  --color-salsa-verde: #ccc667;
  --color-salsa-verde-50: #fbf9c7;
  --color-salsa-verde-100: #f2efb7;
  --color-salsa-verde-200: #dfdc98;
  --color-salsa-verde-300: #ccc667;
  --color-salsa-verde-400: #aca64b;
  --color-salsa-verde-500: #918a26;
  --color-salsa-verde-600: #766f00;
  --color-salsa-verde-700: #5d5800;
  --color-salsa-verde-800: #494400;
  --color-salsa-verde-900: #383400;
  --color-salsa-verde-950: #232000;
  --color-precious-persimmon: #ff774a;
  --color-precious-persimmon-50: #fff4f0;
  --color-precious-persimmon-100: #ffe8e0;
  --color-precious-persimmon-200: #ffcdbd;
  --color-precious-persimmon-300: #ffad93;
  --color-precious-persimmon-400: #ff774a;
  --color-precious-persimmon-500: #de592b;
  --color-precious-persimmon-600: #bd3c00;
  --color-precious-persimmon-700: #972e00;
  --color-precious-persimmon-800: #772200;
  --color-precious-persimmon-900: #5d1900;
  --color-precious-persimmon-950: #3c0d00;
  --color-captain-kirk: #898b00;
  --color-captain-kirk-50: #f7fac1;
  --color-captain-kirk-100: #edf1af;
  --color-captain-kirk-200: #d9dd8e;
  --color-captain-kirk-300: #c3c76b;
  --color-captain-kirk-400: #a4a73a;
  --color-captain-kirk-500: #898b00;
  --color-captain-kirk-600: #6e7000;
  --color-captain-kirk-700: #575900;
  --color-captain-kirk-800: #444500;
  --color-captain-kirk-900: #343500;
  --color-captain-kirk-950: #202100;
  --color-blasphemous-blue: #0055b5;
  --color-blasphemous-blue-50: #eff6ff;
  --color-blasphemous-blue-100: #dfecff;
  --color-blasphemous-blue-200: #c1daff;
  --color-blasphemous-blue-300: #9dc5ff;
  --color-blasphemous-blue-400: #65a5ff;
  --color-blasphemous-blue-500: #4088ec;
  --color-blasphemous-blue-600: #246dce;
  --color-blasphemous-blue-700: #0055b5;
  --color-blasphemous-blue-800: #004290;
  --color-blasphemous-blue-900: #003271;
  --color-blasphemous-blue-950: #001f4b;
  --color-atlantic-navy: #003671;
  --color-atlantic-navy-50: #eff6ff;
  --color-atlantic-navy-100: #dfedff;
  --color-atlantic-navy-200: #bedaff;
  --color-atlantic-navy-300: #97c4ff;
  --color-atlantic-navy-400: #74a5e6;
  --color-atlantic-navy-500: #578acc;
  --color-atlantic-navy-600: #3f70af;
  --color-atlantic-navy-700: #2c5994;
  --color-atlantic-navy-800: #1e477a;
  --color-atlantic-navy-900: #003671;
  --color-atlantic-navy-950: #082344;
  --color-old-study: #3b1709;
  --color-old-study-50: #fff2ed;
  --color-old-study-100: #ffe5db;
  --color-old-study-200: #f3cec1;
  --color-old-study-300: #e0b6a7;
  --color-old-study-400: #c39685;
  --color-old-study-500: #a87b6a;
  --color-old-study-600: #8c6252;
  --color-old-study-700: #734d3e;
  --color-old-study-800: #5e3c2f;
  --color-old-study-900: #4b2e23;
  --color-old-study-950: #3b1709;
}

Similar palettes