Towalles Towalles

Convertitore colore

Commuta i formati di colore tra le specifiche di progettazione e CSS. Modifica HEX, RGB o HSL; sfocare per sincronizzare altri formati e visualizzare in anteprima lo campione.

Privacy: elaborato localmente, mai caricato.

↓ Incolla nell 'area di input qui sotto per vedere i risultati istantaneamente

在 HEX、RGB、HSL 之间互转，实时预览色块。

HEX
RGB
HSL

Note

格式说明

HEX 如 #D4A853；RGB 如 rgb(212, 168, 83)；HSL 如 hsl(41, 56%, 60%)。编辑任一字段后失焦即可同步其他格式。

Commuta i formati di colore tra le specifiche di progettazione e CSS. Modifica HEX, RGB o HSL; sfocare per sincronizzare altri formati e visualizzare in anteprima lo campione.

Avvio veloce

  1. Inserisci un colore

    ad esempio #D4A853 o rgb (212, 168, 83).

  2. Preview di Swatch

    Lo swatch superiore riflette il colore corrente valido.

Caratteristiche e casi d'uso

Convertire HEX, RGB, HSL, CMYK con anteprima di campione per il design e la creazione di variabili CSS.

Utilizzare per le guide del marchio, la sintonizzazione della modalità scura, la stampa vs colore dello schermo e le scelte della tavolota Tailwind.

Casi di utilizzo frontend

Copiare HEX da Figma a hsl () per le variabili CSS, o convertire DevTools rgb di nuovo in design HEX.

Tipico Workflow

Quando i progettisti forniscono valori HEX, gli sviluppatori spesso devono convertirli in RGB o HSL per CSS. Inserire #4285F4, e si converte automaticamente in RGB (66.133.244) e HSL (217,89%, 61%) con sfocatura. Copiare qualsiasi formato nel tuo editor di codice - più veloce e più accurato rispetto al calcolo manuale.

Quando si modificano i colori CSS, modificare direttamente il valore di luce HSL (ad esempio, cambiare il 61% al 55%). Lo strumento sincronizza istantaneamente HEX / RGB e visualizza la nuova anteprima dei colori. Questo batte ripetutamente la modifica del codice e l'aggiornamento del browser.

Esempi

Marchio oro

Input

#D4A853

Output

hsl(41, 56%, 60%)

FAQ

Il canale alfa?

8-Sono supportati gli ingressi digit HEX e rgba / hsla.

Perché l'output RGB è diverso dal mio strumento di progettazione?

Alcuni strumenti di progettazione mostrano il RGB in percentuali (0 - 100) o con profili di colore. Questo strumento segue gli standard CSS con valori RGB 0 - 255. Quando si verificano discrepanze, verificare incrociatamente usando il valore HEX come riferimento.