Torna all'indice tools

SEO e Analisi Sito

Generatore palette brand

Scala primaria, accenti armonici e variabili CSS da un colore seme.

Obiettivo: Allineare UI e design system a un brand color senza tool esterni.

Palette da colore brand

A partire da un colore seme costruisci una scala primaria (50–900), accenti armonici, neutri leggermente tintati e colori semantici di base. Calcolo interamente nel browser: puoi incollare #RRGGBB o usare i formati supportati dal checker contrasto (rgb, hsl). Esporta variabili CSS pronte per design system e temi.

Scala primaria

Accento, secondario e neutri

Semantica (base)

Anteprima CSS
:root {
  --brand-primary-50: #F6F6F8;
  --brand-primary-100: #E9EAF1;
  --brand-primary-200: #D0D0E7;
  --brand-primary-300: #A4A5E0;
  --brand-primary-400: #6D70E4;
  --brand-primary-500: #6366F1;
  --brand-primary-600: #0C0FAC;
  --brand-primary-700: #0E1081;
  --brand-primary-800: #0D0F59;
  --brand-primary-900: #0A0B33;
  --brand-accent: #F3EE16;
  --brand-secondary: #C114E1;
  --brand-neutral-100: #F4F4F6;
  --brand-neutral-200: #DEDEE3;
  --brand-neutral-300: #B7B7C2;
  --brand-neutral-400: #8B8B9D;
  --brand-neutral-500: #626274;
  --brand-neutral-600: #41414E;
  --brand-neutral-700: #25252C;
  --brand-success: #31B96A;
  --brand-warning: #B98731;
  --brand-danger: #B9313D;
  --brand-info: #3175B9;
}