Strumento di Selezione Colore Semplice e Facile da Usare

Introduzione

Lo Strumento di Selezione Colore è un'applicazione intuitiva e facile da usare progettata per aiutare gli utenti a selezionare, visualizzare e convertire colori attraverso più formati di colore. Che tu sia un web designer che crea uno schema di colori, un artista digitale in cerca della tonalità perfetta, o uno sviluppatore che implementa un'interfaccia utente, questo selettore di colori fornisce un modo semplice per lavorare con i colori nei formati RGB, esadecimale, CMYK e HSV. Con il suo spettro di colori interattivo, il cursore di luminosità e le opzioni di input precise, puoi trovare, regolare e copiare rapidamente i valori di colore per i tuoi progetti.

Comprendere i Modelli di Colore

Prima di immergersi in come usare il selettore di colori, è utile comprendere i diversi modelli di colore che supporta:

RGB (Rosso, Verde, Blu)

RGB è un modello di colore additivo in cui la luce rossa, verde e blu vengono combinate in vari modi per riprodurre un'ampia gamma di colori. Nelle applicazioni digitali:

Ogni componente (R, G, B) varia da 0 a 255
RGB(255, 0, 0) rappresenta il rosso puro
RGB(0, 255, 0) rappresenta il verde puro
RGB(0, 0, 255) rappresenta il blu puro
RGB(255, 255, 255) rappresenta il bianco
RGB(0, 0, 0) rappresenta il nero

Il modello RGB è direttamente correlato a come i colori vengono visualizzati sugli schermi, rendendolo la scelta principale per il design digitale.

Esadecimale (Hex)

I codici colore esadecimali sono un modo per rappresentare i colori RGB utilizzando un sistema di numerazione in base 16:

Un colore hex inizia con un simbolo di cancelletto (#) seguito da sei caratteri
La prima coppia rappresenta il rosso, la seconda il verde e la terza il blu
Ogni coppia varia da 00 a FF (0-255 in decimale)
#FF0000 rappresenta il rosso puro
#00FF00 rappresenta il verde puro
#0000FF rappresenta il blu puro
È disponibile una notazione abbreviata per alcuni colori (ad es. #F00 per il rosso)

I codici hex sono ampiamente utilizzati nello sviluppo web (CSS, HTML) e nelle applicazioni di design digitale.

CMYK (Ciano, Magenta, Giallo, Nero)

CMYK è un modello di colore sottrattivo utilizzato principalmente nella stampa a colori:

Ogni componente varia dal 0% al 100%
CMYK(0, 100, 100, 0) rappresenta il rosso puro
CMYK(100, 0, 100, 0) rappresenta il verde puro
CMYK(100, 100, 0, 0) rappresenta il blu puro
CMYK(0, 0, 0, 100) rappresenta il nero
CMYK(0, 0, 0, 0) rappresenta il bianco (colore della carta)

Sebbene sia utilizzato principalmente per la stampa, comprendere i valori CMYK può essere utile quando si progetta contenuti che verranno eventualmente stampati.

HSV (Tonalità, Saturazione, Valore)

L'HSV rappresenta i colori in termini di:

Tonalità: Il tipo di colore (rosso, giallo, verde, ecc.), misurato in gradi (0-360°)
Saturazione: L'intensità o la purezza del colore (0-100%)
Valore: La luminosità del colore (0-100%)

L'HSV è particolarmente utile per la selezione dei colori poiché separa la scelta del colore (tonalità) dalla sua intensità (saturazione) e luminosità (valore), rendendo più intuitivo regolare i colori.

Formule di Conversione dei Colori

Il selettore di colori converte automaticamente tra diversi modelli di colore utilizzando queste formule matematiche:

Conversione da RGB a Hex

Per convertire RGB in esadecimale:

Convertire ciascun componente RGB (0-255) in un numero esadecimale a due cifre
Concatenare i tre valori esadecimali con un prefisso #

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Dove toHex() converte un numero decimale nella sua rappresentazione esadecimale.

Conversione da RGB a CMYK

La conversione da RGB a CMYK comporta questi passaggi:

Normalizzare i valori RGB nell'intervallo 0-1
Calcolare il componente chiave (K)
Calcolare C, M e Y in base a K

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

Conversione da RGB a HSV

Convertire RGB in HSV:

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

Per la Tonalità (H):

1// Conversione da RGB a Hex
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Conversione da Hex a RGB
12function hexToRgb(hex) {
13  // Rimuovi # se presente
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Gestisci sia hex a 3 cifre che a 6 cifre
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// Conversione da RGB a CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizza i valori RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Calcola K (nero)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Gestisci il nero puro
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Calcola C, M, Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// Esempio di utilizzo
57const rgb = { r: 255, g: 0, b: 0 }; // Rosso puro
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Conversione da RGB a Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Conversione da Hex a RGB
6def hex_to_rgb(hex_color):
7    # Rimuovi # se presente
8    hex_color = hex_color.lstrip('#')
9    
10    # Gestisci sia hex a 3 cifre che a 6 cifre
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# Conversione da RGB a CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizza i valori RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Calcola K (nero)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Gestisci il nero puro
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Calcola C, M, Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# Esempio di utilizzo
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Blu cielo
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // Conversione da RGB a Hex
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Conversione da Hex a RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Rimuovi # se presente
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Gestisci sia hex a 3 cifre che a 6 cifre
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // Conversione da RGB a CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizza i valori RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Calcola K (nero)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Gestisci il nero puro
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Calcola C, M, Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // Esempio di utilizzo
60        int r = 75, g = 0, b = 130;  // Viola
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

Riferimenti

Agoston, M. K. (2013). Computer Graphics and Geometric Modeling: Implementation and Algorithms. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Color Appearance Models. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Measuring Colour. John Wiley & Sons.
Poynton, C. (2012). Digital Video and HD: Algorithms and Interfaces. Elsevier.
W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Retrieved from https://www.w3.org/TR/css-color-4/
Web Content Accessibility Guidelines (WCAG) 2.1. (2018). Retrieved from https://www.w3.org/TR/WCAG21/
International Color Consortium. (2004). Specification ICC.1:2004-10 (Profile version 4.2.0.0). Retrieved from http://www.color.org/specification/ICC1v42_2006-05.pdf

Prova il Nostro Selettore di Colori Oggi!

Pronto a trovare il colore perfetto per il tuo progetto? Il nostro selettore di colori facile da usare rende semplice selezionare, regolare e convertire colori tra diversi formati. Che tu stia progettando un sito web, creando arte digitale o pianificando materiali stampati, il nostro strumento fornisce la precisione e la flessibilità di cui hai bisogno.

Inizia a sperimentare con i colori ora e porta i tuoi design al livello successivo!

Whiz Tools

Selettore di Colore Semplice: Seleziona e Copia Valori di Colore RGB, Hex, CMYK

Selettore Colore

RGB (0-255)

CMYK (0-100)