Condividi tramite


Selezione colori CSS

La selezione colori CSS consente di inserire i valori di colore nelle proprietà di colore CSS. Include una tavolozza standard dei colori e utilizza nomi di colori, codici hash, valori di colore standard RGB, RGBA, HSL e HSLA e visualizza un elenco dei colori utilizzati più di recente. Per impostazione predefinita, la selezione colori immette valori esadecimali. Per modificare l'impostazione, vedere Formato, CSS, Editor di testo, finestra di dialogo Opzioni.

Scelta di un colore

La selezione colori include una barra dei colori e uno schermo a colori. Si accede sempre prima alla barra dei colori.

Per visualizzare la barra dei colori

  • Digitare qualsiasi proprietà CSS che accetta un valore di colore (ad esempio, colore:, rgb(, rgba(, hsl(, hsla( o#).

  • Per accedere alla barra dei colori con la tastiera, posizionare il cursore su un colore esistente nel foglio di stile e premere CTRL + J o CTRL+ Spazio.

In un foglio di stile vuoto, nella barra dei colori viene visualizzata una tavolozza predefinita. In un foglio di stile con colori esistenti, nella barra dei colori viene visualizzato un elenco di colori utilizzati più di recente.

Per scegliere un colore dalla barra dei colori

  1. Fare clic su uno dei colori nella barra dei colori o premere la freccia in giù per accedere alla barra dei colori, quindi utilizzare Freccia SINISTRA e Freccia DESTRA per selezionare un colore.

    Nel foglio di stile i valori delle proprietà cambiano man mano che si scelgono colori diversi.

  2. Per visualizzare più colori, fare clic sulle frecce sinistra e destra della barra dei colori o utilizzare i tasti di direzione per spostarsi a sinistra e destra nella barra dei colori.

  3. Premere INVIO per assegnare il colore scelto alla proprietà di colore CSS.

Per scegliere un colore personalizzato dallo schermo a colori

  1. Per visualizzare lo schermo a colori, scegliere il segno più (+) all'estremità destra della barra dei colori oppure premere Freccia GIÙ sulla tastiera una o due volte quando la barra dei colori è visibile.

  2. Effettuare una o più delle seguenti operazioni:

    • Utilizzare il mouse per selezionare un colore nello schermo.

    • Modificare il colore spostando il dispositivo di scorrimento a destra verso l'alto o verso il basso.

    • Modificare l'opacità spostando il dispositivo di scorrimento in basso a sinistra o a destra. I valori saranno inseriti nel formato HSLA o di RGBA.

    • Scegliere Seleziona per modificare il puntatore su uno strumento Contagocce. Il colore selezionato verrà visualizzato in anteprima mentre si sposta il puntatore.

    Mentre si modificano i colori con uno di questi metodi, il originale viene visualizzato nella casella Originale, il colore selezionato viene visualizzato nella casella Nuovo e il valore per la proprietà di colore CSS viene visualizzato in anteprima nel foglio di stile.

  3. Premere INVIO per assegnare il colore scelto alla proprietà di colore CSS.

Nota

Il colore scelto viene visualizzato utilizzando le impostazioni di visualizzazione del monitor e può apparire diverso su un altro monitor.

  • Nuovo
    Visualizza il colore selezionato nella finestra di dialogo ma non ancora assegnato alla regola CSS.

  • Originale
    Visualizza il colore assegnato attualmente alla regola CSS.

  • Opacità
    Scorrere il pulsante a destra aumentare l'opacità di colore o a sinistra per diminuirla.

    Nota

    Poiché non esiste alcuna rappresentazione di opacità in formato esadecimale standard, quando si regola l'opacità la selezione colori immetterà valori HSLA o RGBA.

  • Pick
    Imposta il puntatore su uno strumento Contagocce, che consente di selezionare qualsiasi colore sullo schermo e di assegnarlo quindi a una proprietà CSS. Quando si sposta il puntatore sullo schermo, il colore che corrisponde alla posizione del puntatore viene visualizzato in anteprima nella casella Nuovo e il valore corrispondente alle modifiche della proprietà CSS del colore viene visualizzato nel foglio di stile.

Vedere anche

Riferimenti

Formato, CSS, Editor di testo, finestra di dialogo Opzioni