Seletor de Cores - Converter Códigos de Cores RGB, Hex, CMYK e HSV

O Que Você Pode Fazer Com Este Selecionador de Cores

Precisa da tonalidade perfeita para o seu projeto? Este selecionador de cores permite selecionar, visualizar e converter cores entre os formatos RGB, Hex, CMYK e HSV instantaneamente. Seja para codificar um site, criar um logotipo ou preparar arquivos para impressão, você encontrará os valores de cor exatos que precisa - sem tentativa e erro, sem alternar entre ferramentas.

Clique em qualquer lugar do espectro de cores para escolher uma tonalidade, ajuste o brilho com um controle deslizante ou insira valores precisos diretamente. Cada formato é atualizado em tempo real, e você pode copiar qualquer código de cor com um único clique.

Entendendo Modelos de Cor

Diferentes projetos precisam de diferentes formatos de cor. Aqui está o que cada um faz e quando usá-lo:

RGB (Vermelho, Verde, Azul)

RGB funciona misturando luz vermelha, verde e azul—da mesma forma que sua tela exibe cores agora. Cada componente varia de 0 a 255:

• RGB(255, 0, 0) = vermelho puro
• RGB(0, 255, 0) = verde puro
• RGB(0, 0, 255) = azul puro
• RGB(255, 255, 255) = branco
• RGB(0, 0, 0) = preto

Quando usar RGB: Qualquer trabalho digital—sites, aplicativos móveis, edição de vídeo ou gráficos baseados em tela. É a linguagem nativa de exibições, por isso ferramentas como CSS suportam funções rgb() e rgba() diretamente. De acordo com a especificação do Módulo de Cores CSS da W3C, RGB é o modelo de cor fundamental para padrões web.

Hexadecimal (Hex)

Códigos Hex são apenas valores RGB escritos na base-16 em vez da base-10. Um código de cor hex parece como #FF5733, onde:

• O símbolo # marca como um código hex
• Dois primeiros caracteres = vermelho (00-FF)
• Dois do meio = verde (00-FF)
• Dois últimos = azul (00-FF)
• #FF0000 = vermelho, #00FF00 = verde, #0000FF = azul

Às vezes você verá abreviação de 3 caracteres como #F00 em vez de #FF0000—isso funciona quando cada canal de cor repete o mesmo dígito.

Quando usar Hex: Desenvolvimento web é o caso de uso principal. CSS sempre suportou notação hex, e a maioria dos desenvolvedores acha mais rápido digitar do que rgb(). Um erro comum: esquecer o símbolo # vai quebrar seus estilos silenciosamente, já que os navegadores não reconhecerão como uma cor válida.

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

CMYK é o modelo de cor usado por impressoras. Diferente do RGB (que adiciona luz), CMYK subtrai—misturando tintas em papel branco para criar cores:

• Cada componente varia de 0% a 100%
• CMYK(0, 100, 100, 0) = vermelho
• CMYK(100, 0, 100, 0) = verde
• CMYK(0, 0, 0, 100) = tinta preta pura
• CMYK(0, 0, 0, 0) = sem tinta (papel branco aparece)

Quando usar CMYK: Projetando para impressão—cartões de visita, folhetos, revistas, embalagens. Aqui está a realidade: muitas cores RGB vibrantes simplesmente não podem ser reproduzidas com tintas CMYK. Aquele azul elétrico brilhante que você vê na tela? Parecerá mais opaco quando impresso. Designers profissionais sempre visualizam conversões CMYK antes de enviar arquivos para impressão para evitar surpresas.

HSV (Matiz, Saturação, Valor)

HSV divide a cor em três componentes intuitivos:

• Matiz: Qual família de cores (0-360°)—0° é vermelho, 120° é verde, 240° é azul
• Saturação: Quão vívido ou cinza (0-100%)—0% é escala de cinza, 100% é totalmente saturado
• Valor: Quão claro ou escuro (0-100%)—0% é preto, 100% é brilho total

Por que HSV importa: Corresponde a como os humanos naturalmente pensam sobre cor. Quer um azul mais escuro? Diminua o valor. Quer um azul menos intenso? Diminua a saturação. Isso torna HSV ideal para seletores de cor interativos como este, onde você seleciona um matiz no espectro e ajusta o brilho com um controle deslizante.

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 Hexadecimal

Para converter RGB para hexadecimal:

1. Converter cada componente RGB (0-255) para um número hexadecimal de dois dígitos
2. Concatenar 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 estas etapas:

1. Normalizar valores RGB para o intervalo 0-1
2. Calcular o componente de chave preta (K)
3. Calcular 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// Exemplo de uso
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# Exemplo de uso
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 ConversorDeCores {
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        // Exemplo de uso
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 e Leituras Adicionais

• Módulo de Cores CSS do W3C Nível 4 - Especificação oficial de cores web
• Diretrizes de Contraste WCAG 2.1 - Padrões de acessibilidade para contraste de cores
• Verificador de Contraste WebAIM - Testar razões de contraste de cores
• Padrões de Perfil de Cor ICC - Especificação técnica para conversões de cores
• Documentação Web MDN: Valores de Cores CSS - Guia abrangente de formatos de cores web