Rueda cromática

Llévatela

:root {
  --primario: #3a52ed;
  --primario-50: #f2f0fe;
  --primario-100: #e6e1fd;
  --primario-200: #ccc4fb;
  --primario-300: #a9a1f8;
  --primario-400: #7b78f3;
  --primario-500: #3a52ed;
  --primario-600: #3645c3;
  --primario-700: #30389b;
  --primario-800: #292c74;
  --primario-900: #222254;
  --primario-950: #1a1836;

  --secundario: #4f3aed;
  --secundario-50: #f4eefe;
  --secundario-100: #e8defe;
  --secundario-200: #d1befc;
  --secundario-300: #b196f8;
  --secundario-400: #8768f3;
  --secundario-500: #4f3aed;
  --secundario-600: #4532c3;
  --secundario-700: #3b2a9b;
  --secundario-800: #312274;
  --secundario-900: #271b54;
  --secundario-950: #1c1436;

  --acento: #7c3aed;
  --acento-50: #f6effe;
  --acento-100: #eedffd;
  --acento-200: #dbc0fb;
  --acento-300: #c399f8;
  --acento-400: #a26bf3;
  --acento-500: #7c3aed;
  --acento-600: #6832c3;
  --acento-700: #552b9b;
  --acento-800: #422374;
  --acento-900: #321c54;
  --acento-950: #231536;

  --cuarto: #a93aed;
  --cuarto-50: #faf0fe;
  --cuarto-100: #f4e1fd;
  --cuarto-200: #e8c3fb;
  --cuarto-300: #d89ef8;
  --cuarto-400: #c26ff3;
  --cuarto-500: #a93aed;
  --cuarto-600: #8c33c3;
  --cuarto-700: #712c9b;
  --cuarto-800: #562574;
  --cuarto-900: #401e54;
  --cuarto-950: #2b1636;

  --quinto: #d53aed;
  --quinto-50: #fdf1fe;
  --quinto-100: #fbe3fd;
  --quinto-200: #f7c7fb;
  --quinto-300: #efa2f7;
  --quinto-400: #e374f2;
  --quinto-500: #d53aed;
  --quinto-600: #b034c3;
  --quinto-700: #8c2e9b;
  --quinto-800: #6a2774;
  --quinto-900: #4e2054;
  --quinto-950: #331836;
}