Conversione dei colori

Conversioni – Dettagli – Armonie – Immagini – Anteprima – Simulazione di daltonismo – CSS – Aiuto

Conversioni

Qui vedi il tuo colore convertito in 15 diversi formati come RGB, CMYK, HSV, HSL, CIELab, Android, Decimal e YUV.

🤖 Converti più colori in una volta o 📢 Ottieni conversioni e armonie tramite l’API REST.

• 📕 HOWCOLORS.WORK
• Distribuzione
• Luminosità & Gradienti di saturazione
• Analoghe
• Triade
• Complementare
• Split Complementary
• Square
• Rettangolo
• Sweetspot
• Sfondo bianco
• Controllo del contrasto del colore
• Sfondo nero
• Controllo del contrasto del colore
• Sfondo RGB 73, 108, 60
• Dicromia
• Tricromia
• Monocromia
• Testo
• Border
• Background
• 📕 HOWCOLORS.WORK
• Conversione
• Dettagli
• Armonie
• Immagini SVG
• Anteprima
• Simulazione del Daltonismo
• Esempi CSS
• Color Bucket
• Color Contrast Checker

📕 HOWCOLORS.WORK

Una guida alla notazione dei colori CSS.

o compralo su Leanpub!

Dettagli

Il colore RGB 73, 108, 60 è un colore scuro, e la versione websafe è hex 336633. Un complemento di questo colore sarebbe 95, 60, 108, e la versione in scala di grigi è 92, 92, 92.
Una versione più leggera del 20% del colore originale è 123, 160, 108, e 26, 60, 16 è il colore più scuro del 20%. Se si satura il colore del 10%, si ottiene 65, 108, 49, e se si desatura del 10%, è 81, 108, 71.

Distribuzione

Luminosità & Gradienti di saturazione

Questi gradienti mostrano come il colore RGB 73, 108, 60 cambia cambiando la luminosità del 10%. La prima figura mostra uno spostamento di +10% per ogni colore e la seconda figura -10%.

Simile ai gradienti di luminosità ma i seguenti gradienti di saturazione mostrano un cambiamento del colore RGB 73, 108, 60 cambiando invece la saturazione del 10%.

Armonie

Immagini SVG

Una selezione di immagini SVG usando la versione hex #496C3C del colore corrente.

Anteprime

Sfondo RGB 73, 108, 60

Simulazione del daltonismo

Il deficit di visione dei colori è un argomento molto complesso, e non potrei descrivere le diverse cause meglio di come fa Wikipedia, quindi se vuoi saperne di più, dovresti controllare il loro articolo sul daltonismo.

Dicromia

Tricromia

Monocromia

Esempi CSS

Testo

La proprietà CSS per cambiare il colore del testo in RGB 73, 108, 60 si chiama “color”. La proprietà color può essere impostata su classi, id o direttamente sull’elemento HTML.

Questo esempio mostra come appare il testo nel colore rgb(73, 108, 60).

📋 Copy Code

Se vuoi aggiungere un’ombra di testo in quel colore usa la proprietà text-shadow, puoi generare un’ombra di testo direttamente con il nostro 🔧 CSS Text Shadow Generator.

Ecco come appare un testo nero con un’ombra colorata di 4 pixel rgb(73, 108, 60).

📋 Copy Code

Border

La proprietà CSS per cambiare il bordo di un elemento in RGB 73, 108, 60 si chiama “border”. La proprietà border può essere impostata su classi, id o direttamente sull’elemento HTML.

Questo esempio mostra il colore come border, può essere applicato tramite la proprietà CSS “border” o “border-color”.

📋 Copy Code

Se solo il colore del bordo deve essere cambiato usa la proprietà border-color.

📋 Copy Code

Se vuoi aggiungere un’ombra in quel colore usa:

Qui vedi come appare un box con un’ombra colorata di 4 pixel rgb(73, 108, 60).

📋 Copy Code

Background

La proprietà CSS per cambiare il colore di sfondo di un elemento in RGB 73, 108, 60 è chiamata “background”. La proprietà background può essere impostata su classi, id o direttamente sull’elemento HTML.

📋 Copy Code

Se solo il colore di sfondo deve essere cambiato può essere usato:

📋 Copy Code

Questo esempio mostra il colore come sfondo, è applicato tramite la proprietà CSS “background”.

Per ottimizzare e comprimere il codice CSS, puoi usare il nostro compressore e ottimizzatore CSS online basato su csstidy. Se vuoi creare un gradiente lineare o radiale come sfondo o bordo, controlla il nostro 🌈 CSS Gradient Generator.

📕 HOWCOLORS.WORK

Una guida alla notazione dei colori CSS.

o compralo su Leanpub!

Come usare Conversione dei colori

Conversione

Per convertire, incolla una stringa in uno di questi formati di colore, per esempio, “496C3C”, nel campo di input e clicca su converti. Il risultato sarà nella sezione Conversioni, e le sezioni seguenti ti forniranno ulteriori dettagli sul colore.

Alcuni formati di colore usano la stessa notazione, e la conversione indovinerà la composizione della query di ricerca. Per esempio, se provi a convertire la stringa “104°, 44%, 42%” potrebbe essere un colore HSV o HSL, la conversione assumerà HSL in questo caso.

Poiché questo potrebbe portare a conversioni sbagliate, puoi definire quale formato stai passando avvolgendo la stringa di colore tra parentesi con il formato davanti. La stringa di ricerca “HSV(104°, 44%, 42%)” vi darà il colore HSV corretto poiché non c’è bisogno di indovinare il formato. Altri esempi sarebbero “CIELAB(41.95, -22.52, 22.92)”, “CIELCH(42, 32.133, 134.485)”, “YXY(12.4678, 0.3233, 0.4517)” e “CMYK(0.32, 0.00, 0.44, 0.58)”.

Dettagli

Nella sezione dei dettagli, si ottiene prima un riassunto del colore e, se disponibile, una descrizione come “rosso scuro smorzato”. Puoi vedere la distribuzione del colore in diversi formati. Per esempio, nel formato RGB, puoi conoscere la quantità di rosso, verde e blu nel tuo colore.

Infine, ottieni gradienti di luminosità e saturazione del tuo colore in passi del 10%. Quindi se hai bisogno di una versione più luminosa o più scura, puoi sceglierla da qui.

Armonie

Le armonie fondamentalmente ti mostrano i colori che vanno bene con il colore che stai visualizzando. Se ti piace una delle armonie, puoi creare direttamente un 🌈 Gradiente CSS o 🔧 Ombra di testo CSS da essa o visualizzare l’armonia come un 🖌️ Color Bucket.

Immagini SVG

Questa breve sezione ti mostra una selezione di file SVG che utilizzano il colore corrente. Puoi scaricare questi file e usarli nei tuoi progetti, per esempio, come immagine di sfondo.

Anteprima

Vuoi vedere come appare il tuo colore su uno sfondo bianco o nero? Allora dovresti controllare la sezione “Anteprime” della pagina dei colori.

Vedi anche il contrasto del tuo colore su questi sfondi e ottieni un link al Color Contrast Checker con il tuo colore preselezionato.

Simulazione del Daltonismo

Quando selezioni un colore per il tuo progetto, potresti voler tenere a mente come questo colore viene percepito da chiunque abbia un deficit di visione dei colori. Perciò ho aggiunto questa sezione che ti mostra le anteprime del tuo colore per diverse deficienze nella visione dei colori.

Esempi CSS

Se sei nuovo nello sviluppo web, potresti voler vedere come applicare il tuo colore come colore di primo piano, sfondo o bordo. La sezione “Esempi CSS” ti dà esattamente questo, un aiuto su come usare il colore corrente nei CSS.

Se stai visualizzando un colore in un formato non disponibile nei CSS, allora vedrai il colore convertito in un formato compatibile.

Color Bucket

Hai deciso i colori per il tuo prossimo progetto e vuoi scaricarli come palette o condividerli con gli amici per discutere la tua decisione? Allora dovresti dare un’occhiata al secchio dei colori. Ti permette di memorizzare fino a 10 colori, crea automaticamente tavolozze di colori per ognuno di questi colori in base alla luminosità e ti dà una matrice WCAG.

Puoi scaricare ognuna delle tavolozze di colori o i colori selezionati come tavolozza GIMP, Adobe® ASE, o Tailwind CSS. Inoltre, puoi visualizzare tutto come 🌈 Gradiente CSS, 🔧 Ombra di testo CSS, o 📷 Immagine della tavolozza dei colori.

Per aggiungere un colore al tuo secchio dei colori, ho messo un link “❤️ Aggiungi questo colore al secchio” nella sezione dell’intestazione di ogni pagina di questo sito.

Color Contrast Checker

Quando decidi i colori per un progetto, è essenziale tenere a mente il contrasto dei colori. My Color Contrast Checker ti permette di controllare i colori che hai selezionato secondo le linee guida per l’accessibilità dei contenuti web (WCAG) 2.0.

.