Selettore e convertitore colore esadecimale (RGB, HSL, HSV, CMYK, OKLCH)

Converti qualsiasi colore in HEX, RGB, HSL, HSV, CMYK e OKLCH, verifica il contrasto, copia campioni armonia ed esporta CSS o JSON, direttamente nel browser.

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

Valore colore

Inserisci hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() o un nome colore CSS. I valori non validi mantengono l'ultima conversione valida.

Nome CSS più vicino: royalblue

Opacità100%

Conversioni

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

Contrasto WCAG

Su sfondo bianco

3.68:1

Supera WCAG AA (solo testo grande)

Su sfondo nero

5.71:1

Supera WCAG AA (testo normale)

Campioni armonia

Tipo armonia

Numero campioni

Striscia tinta/ombra

Passaggi 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",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

Scegli o incolla qualsiasi formato colore, converti in HEX, RGB, HSL, HSV, CMYK e OKLCH, verifica il contrasto WCAG, genera campioni armonia, copia valori ed esporta CSS o JSON. Gratuito, veloce e funziona interamente nel browser.

Come utilizzare questo selettore colore

Digita o incolla qualsiasi formato colore supportato, regola l'opacità o usa il selettore nativo. La pagina converte istantaneamente in HEX, RGB, HSL, HSV, CMYK e OKLCH, mostra il contrasto WCAG su bianco e nero, genera campioni armonia e una striscia tinta/ombra, e mantiene tutto pronto per la copia. Condividi la configurazione tramite URL: lo stato è salvato nella stringa di query.

Riferimento HEX, RGB, HSL, HSV, CMYK e OKLCH

Hex è una codifica RGB compatta. RGB descrive i canali rosso/verde/blu. HSL esprime tonalità, saturazione e luminosità; HSV usa tonalità, saturazione e valore (luminosità). CMYK modella le percentuali di inchiostro da stampa. OKLCH è uno spazio colore CSS percettivamente uniforme. Questo strumento usa calcoli deterministici nel browser, senza caricamenti né API esterne.

Complementare, analogo, triadico, complementare diviso, tetradico e monocromatico

Il complementare ruota la tonalità di 180°. L'analogo avanza la tonalità con angoli fissi attorno alla base. Il triadico usa offset di 120°. Il complementare diviso aggiunge due tonalità vicine al complemento. Il tetradico usa offset rettangolari di 90°. Il monocromatico mantiene la tonalità e varia la luminosità. I controlli di conteggio si applicano alle modalità analogo e monocromatico.

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, alpha, namedColor, modalità armonia, rapporti di contrasto e elenchi campioni per script o token di design.

Verificatore contrasto WCAG

Il rapporto di contrasto è calcolato dalla luminanza relativa secondo WCAG 2.x. AA richiede 4,5:1 per testo normale e 3:1 per testo grande; AAA richiede 7:1. Usa le anteprime quando scegli colori di testo o UI su sfondi chiari o scuri.

Domande frequenti

Quali formati colore posso inserire?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() e tutti i nomi colore CSS standard come cornflowerblue o rebeccapurple.

L'#ABC si espande a sei cifre?

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

Cosa succede se il mio colore non è valido?

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

Come funziona il verificatore di contrasto WCAG?

Calcola il rapporto di contrasto tra il tuo colore e il bianco o nero puro usando la luminanza relativa. I risultati mostrano se il colore supera le soglie AA o AAA per testo normale o grande.

Come vengono calcolati i colori armonia?

Sono deterministici: complementare è uno spostamento tonalità di 180°; analogo usa passi tonalità fissi; triadico offset 120°; complementare diviso tonalità vicine al complemento; tetradico offset rettangolari 90°; monocromatico varia luminosità mantenendo tonalità e saturazione dalla base.

Cosa contiene l'esportazione JSON?

Chiavi stabili: baseHex, alpha, namedColor, harmony, harmonyCount dove applicabile, harmonySwatches, tintShadeStrip, stripCount e rapporti di contrasto, adatte per strumenti o documentazione.

Posso condividere i miei colori?

Sì. L'URL si aggiorna con hex, alpha, modalità armonia, conteggi e dimensione striscia così puoi salvare o condividere una configurazione esatta.