Start generating

Salsa Verde to Otterly Brown color palette

C1C742Salsa VerdeC7EBFFVeiling Waterfalls3F3963Storm Is Coming7F5FA7Scampi50A0D1Sub-Zero934100Otterly Brown
Open in generator Export PNG, PDF, ASE…

About this palette

Salsa Verde to Otterly Brown is a 6-color cool palette: #C1C742 (Salsa Verde), #C7EBFF (Veiling Waterfalls), #3F3963 (Storm Is Coming), #7F5FA7 (Scampi), #50A0D1 (Sub-Zero), #934100 (Otterly Brown). It mixes yellow, blue, purple, brown tones and feels cool overall. The strongest text pairing is #C7EBFF on #3F3963 with a contrast ratio of 8.48:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Salsa Verdergb(193, 199, 66)hsl(63, 54%, 52%)
Veiling Waterfallsrgb(199, 235, 255)hsl(201, 100%, 89%)
Storm Is Comingrgb(63, 57, 99)hsl(249, 27%, 31%)
Scampirgb(127, 95, 167)hsl(267, 29%, 51%)
Sub-Zerorgb(80, 160, 209)hsl(203, 58%, 57%)
Otterly Brownrgb(147, 65, 0)hsl(27, 100%, 29%)

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.

  • Aa8.48:1 Very good#C7EBFF on #3F3963
  • Aa8.48:1 Very good#3F3963 on #C7EBFF
  • Aa5.83:1 Good#C1C742 on #3F3963
  • Aa5.83:1 Good#3F3963 on #C1C742
  • Aa5.59:1 Good#C7EBFF on #934100
  • Aa5.59:1 Good#934100 on #C7EBFF
  • Aa4.09:1 Poor#C7EBFF on #7F5FA7
  • Aa4.09:1 Poor#7F5FA7 on #C7EBFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Salsa Verde to Otterly Brown — https://swatchly.xyz/palette/c1c742-c7ebff-3f3963-7f5fa7-50a0d1-934100 */
:root {
  --salsa-verde: #c1c742;
  --veiling-waterfalls: #c7ebff;
  --storm-is-coming: #3f3963;
  --scampi: #7f5fa7;
  --sub-zero: #50a0d1;
  --otterly-brown: #934100;
}

Tailwind CSS v4

/* Salsa Verde to Otterly Brown — https://swatchly.xyz/palette/c1c742-c7ebff-3f3963-7f5fa7-50a0d1-934100 */
@theme {
  --color-salsa-verde: #c1c742;
  --color-salsa-verde-50: #f4fab8;
  --color-salsa-verde-100: #eaf0a5;
  --color-salsa-verde-200: #d7dd82;
  --color-salsa-verde-300: #c1c742;
  --color-salsa-verde-400: #a2a71f;
  --color-salsa-verde-500: #878b00;
  --color-salsa-verde-600: #6d7000;
  --color-salsa-verde-700: #565900;
  --color-salsa-verde-800: #444600;
  --color-salsa-verde-900: #343600;
  --color-salsa-verde-950: #202100;
  --color-veiling-waterfalls: #c7ebff;
  --color-veiling-waterfalls-50: #dff3ff;
  --color-veiling-waterfalls-100: #c7ebff;
  --color-veiling-waterfalls-200: #bcd7e6;
  --color-veiling-waterfalls-300: #a4c2d3;
  --color-veiling-waterfalls-400: #83a4b6;
  --color-veiling-waterfalls-500: #688a9c;
  --color-veiling-waterfalls-600: #507081;
  --color-veiling-waterfalls-700: #3d5a69;
  --color-veiling-waterfalls-800: #2d4654;
  --color-veiling-waterfalls-900: #203642;
  --color-veiling-waterfalls-950: #12222a;
  --color-storm-is-coming: #3f3963;
  --color-storm-is-coming-50: #f4f4ff;
  --color-storm-is-coming-100: #eae8ff;
  --color-storm-is-coming-200: #d6d3f9;
  --color-storm-is-coming-300: #bebbe6;
  --color-storm-is-coming-400: #9f9ac9;
  --color-storm-is-coming-500: #837ead;
  --color-storm-is-coming-600: #696390;
  --color-storm-is-coming-700: #524d75;
  --color-storm-is-coming-800: #3f3963;
  --color-storm-is-coming-900: #302c49;
  --color-storm-is-coming-950: #1d1b2f;
  --color-scampi: #7f5fa7;
  --color-scampi-50: #f7f3ff;
  --color-scampi-100: #f0e7ff;
  --color-scampi-200: #e2cfff;
  --color-scampi-300: #d0b5f7;
  --color-scampi-400: #b394dd;
  --color-scampi-500: #9979c3;
  --color-scampi-600: #7f5fa7;
  --color-scampi-700: #66498a;
  --color-scampi-800: #513670;
  --color-scampi-900: #3f2859;
  --color-scampi-950: #27173a;
  --color-sub-zero: #50a0d1;
  --color-sub-zero-50: #e4f4ff;
  --color-sub-zero-100: #cceaff;
  --color-sub-zero-200: #9ed8ff;
  --color-sub-zero-300: #7bc1ee;
  --color-sub-zero-400: #50a0d1;
  --color-sub-zero-500: #3486b6;
  --color-sub-zero-600: #186d99;
  --color-sub-zero-700: #00577f;
  --color-sub-zero-800: #004465;
  --color-sub-zero-900: #003650;
  --color-sub-zero-950: #002236;
  --color-otterly-brown: #934100;
  --color-otterly-brown-50: #fff2ec;
  --color-otterly-brown-100: #ffe5d8;
  --color-otterly-brown-200: #ffccb2;
  --color-otterly-brown-300: #fdaf85;
  --color-otterly-brown-400: #e28d5e;
  --color-otterly-brown-500: #c8713f;
  --color-otterly-brown-600: #ab5824;
  --color-otterly-brown-700: #934100;
  --color-otterly-brown-800: #743200;
  --color-otterly-brown-900: #5b2500;
  --color-otterly-brown-950: #3b1600;
}

Similar palettes