Selettore e convertitore di colori esadecimali (RGB, HSL, HSV)

Converti esadecimale in RGB, HSL e HSV, copia campioni di armonia ed esporta CSS o JSON, direttamente nel tuo browser.

JavaScript è richiesto per le funzionalità interattive. Abilita JavaScript nel tuo browser per utilizzare questo strumento.

Colore esadecimale

Inserisci #RGB o #RRGGBB (con o senza #). I valori non validi mantengono l'ultima conversione valida.

Conversioni

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Campioni di armonia

Tipo armonia

Conteggio dei campioni

Striscia di tinta/ombra

Passaggi di tinta/ombra

Esporta campioni

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Scegli o incolla un colore esadecimale, convertilo in RGB, HSL e HSV, genera campioni complementari/analogici/triadici/monocromatici, copia valori ed esporta CSS o JSON. Gratuito, veloce e funziona interamente nel tuo browser.

Come utilizzare questo selettore di colori esadecimali

Digita o incolla un valore esadecimale oppure utilizza il selettore nativo. La pagina lo converte istantaneamente in RGB, HSL e HSV, genera campioni di armonia e una striscia di tinta/ombreggiatura e mantiene tutto pronto per la copia. Condividi la tua configurazione con l'URL: lo stato viene archiviato nella stringa di query.

Riferimento esadecimale, RGB, HSL e HSV

Hex è una codifica RGB compatta. RGB descrive i canali rosso/verde/blu. HSL esprime tonalità, saturazione e leggerezza; HSV utilizza tonalità, saturazione e valore (luminosità). Questo strumento utilizza la matematica deterministica nel tuo browser: nessun caricamento e nessuna API esterna.

Complementare, analogo, triadico e monocromatico

Il complementare ruota la tonalità di 180°. Passi analoghi si colorano di un angolo fisso attorno alla base. Triadic utilizza offset di 120°. Il monocromatico mantiene la tonalità e varia la luminosità. I controlli di conteggio si applicano alle modalità analogiche e monocromatiche.

Variabili CSS ed esportazione JSON

L'esportazione produce proprietà personalizzate :root con nomi stabili (ad esempio --color-base, --color-analogous-1) e JSON con baseHex, modalità armonia ed elenchi di campioni per script o token di progettazione.

Domande frequenti

L'#ABC si espande fino a sei cifre?

Sì. L'esadecimale di tre cifre viene espanso per coppia di cifre, quindi #ABC diventa #AABBCC.

Cosa succede se il mio esadecimale non è valido?

Viene visualizzato un errore in linea. L'ultimo colore valido rimane nelle righe di conversione, nel selettore e nelle esportazioni finché non inserisci nuovamente un valore esadecimale valido.

Come vengono calcolati i colori dell'armonia?

Sono deterministici: complementare è uno spostamento di tonalità di 180° in HSL; usi analoghi passaggi di tonalità fissi; triadico utilizza offset di 120°; il monocromatico varia la luminosità mantenendo tonalità e saturazione dalla base.

Cosa c'è nell'esportazione JSON?

Chiavi stabili: baseHex, armonia, armoniaCount dove applicabile, armoniaSwatches (stringhe esadecimali), tintShadeStrip e stripCount: adatte per strumenti o documentazione.

Posso condividere i miei colori?

Sì. L'URL si aggiorna con esadecimale, modalità armonia, conteggi e dimensione della striscia in modo da poter aggiungere ai segnalibri o condividere una configurazione esatta.