Ferramenta de Seleção de Cores Simples e Amigável

Introdução

A Ferramenta de Seleção de Cores é um aplicativo intuitivo e fácil de usar, projetado para ajudar os usuários a selecionar, visualizar e converter cores em vários formatos de cor. Se você é um designer de web criando um esquema de cores, um artista digital em busca da tonalidade perfeita, ou um desenvolvedor implementando uma interface de usuário, este seletor de cores fornece uma maneira simples de trabalhar com cores nos formatos RGB, Hexadecimal, CMYK e HSV. Com seu espectro de cores interativo, controle de brilho e opções de entrada precisas, você pode rapidamente encontrar, ajustar e copiar valores de cores para seus projetos.

Entendendo os Modelos de Cores

Antes de mergulhar em como usar o seletor de cores, é útil entender os diferentes modelos de cores que ele suporta:

RGB (Vermelho, Verde, Azul)

RGB é um modelo de cor aditivo onde a luz vermelha, verde e azul são combinadas de várias maneiras para reproduzir uma ampla gama de cores. Em aplicações digitais:

• Cada componente (R, G, B) varia de 0 a 255
• RGB(255, 0, 0) representa vermelho puro
• RGB(0, 255, 0) representa verde puro
• RGB(0, 0, 255) representa azul puro
• RGB(255, 255, 255) representa branco
• RGB(0, 0, 0) representa preto

O modelo RGB está diretamente relacionado à forma como as cores são exibidas nas telas, tornando-se a escolha principal para design digital.

Hexadecimal (Hex)

Os códigos de cores hexadecimais são uma maneira de representar cores RGB usando um sistema de numeração de base 16:

• Uma cor hex começa com um sinal de número (#) seguido por seis caracteres
• O primeiro par representa vermelho, o segundo verde e o terceiro azul
• Cada par varia de 00 a FF (0-255 em decimal)
• #FF0000 representa vermelho puro
• #00FF00 representa verde puro
• #0000FF representa azul puro
• Notação abreviada está disponível para certas cores (por exemplo, #F00 para vermelho)

Os códigos hex são amplamente utilizados no desenvolvimento web (CSS, HTML) e em aplicações de design digital.

CMYK (Ciano, Magenta, Amarelo, Chave/Preto)

CMYK é um modelo de cor subtrativo usado principalmente na impressão colorida:

• Cada componente varia de 0% a 100%
• CMYK(0, 100, 100, 0) representa vermelho puro
• CMYK(100, 0, 100, 0) representa verde puro
• CMYK(100, 100, 0, 0) representa azul puro
• CMYK(0, 0, 0, 100) representa preto
• CMYK(0, 0, 0, 0) representa branco (cor do papel)

Embora seja usado principalmente para impressão, entender os valores CMYK pode ser útil ao projetar conteúdo que será eventualmente impresso.

HSV (Matiz, Saturação, Valor)

HSV representa cores em termos de:

• Matiz: O tipo de cor (vermelho, amarelo, verde, etc.), medido em graus (0-360°)
• Saturação: A intensidade ou pureza da cor (0-100%)
• Valor: O brilho da cor (0-100%)

HSV é particularmente útil para seleção de cores, pois separa a escolha da cor (matiz) de sua intensidade (saturação) e brilho (valor), tornando mais intuitivo ajustar cores.

Fórmulas de Conversão de Cores

O seletor de cores converte automaticamente entre diferentes modelos de cores usando estas fórmulas matemáticas:

Conversão de RGB para Hex

Para converter RGB para hexadecimal:

1. Converta cada componente RGB (0-255) para um número hexadecimal de dois dígitos
2. Concatene os três valores hexadecimais com um prefixo #

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

Onde toHex() converte um número decimal para sua representação hexadecimal.

Conversão de RGB para CMYK

A conversão de RGB para CMYK envolve os seguintes passos:

1. Normalize os valores RGB para a faixa de 0-1
2. Calcule o componente chave (K)
3. Calcule C, M e Y com base em 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\%$

Conversão de RGB para HSV

Convertendo RGB para 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}$

Para Matiz (H):

undefined

1// Conversão de RGB para 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// Conversão de Hex para RGB
12function hexToRgb(hex) {
13  // Remover # se presente
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Lidar com hex de 3 e 6 dígitos
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// Conversão de RGB para CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizar valores RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Calcular K (preto)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Lidar com preto puro
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Calcular 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// Uso de exemplo
57const rgb = { r: 255, g: 0, b: 0 }; // Vermelho puro
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Conversão de RGB para Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Conversão de Hex para RGB
6def hex_to_rgb(hex_color):
7    # Remover # se presente
8    hex_color = hex_color.lstrip('#')
9    
10    # Lidar com hex de 3 e 6 dígitos
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# Conversão de RGB para CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizar valores RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Calcular K (preto)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Lidar com preto puro
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Calcular 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# Uso de exemplo
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Azul céu
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    // Conversão de RGB para 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    // Conversão de Hex para RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Remover # se presente
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Lidar com hex de 3 e 6 dígitos
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    // Conversão de RGB para CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizar valores RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Calcular K (preto)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Lidar com preto puro
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Calcular 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        // Uso de exemplo
60        int r = 75, g = 0, b = 130;  // Roxo
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

Referências

1. Agoston, M. K. (2013). Computer Graphics and Geometric Modeling: Implementation and Algorithms. Springer Science & Business Media.

2. Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Color Appearance Models. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Measuring Colour. John Wiley & Sons.

5. Poynton, C. (2012). Digital Video and HD: Algorithms and Interfaces. Elsevier.

6. W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Retrieved from https://www.w3.org/TR/css-color-4/

7. Web Content Accessibility Guidelines (WCAG) 2.1. (2018). Retrieved from https://www.w3.org/TR/WCAG21/

8. 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

Experimente Nossa Ferramenta de Seleção de Cores Hoje!

Pronto para encontrar a cor perfeita para seu projeto? Nossa ferramenta de seleção de cores amigável torna fácil selecionar, ajustar e converter cores entre diferentes formatos. Se você está projetando um site, criando arte digital ou planejando materiais impressos, nossa ferramenta fornece a precisão e flexibilidade que você precisa.

Comece a experimentar com cores agora e leve seus designs para o próximo nível!