Mais informação sobre cores
Saiba mais sobre a cor—da luz e da perceção ao RGB, CMYK, HSL, hex, à roda de cores, gradientes e contraste que pode experimentar no PictorX.
Luz, olhos e dois tipos de mistura
A cor não é um revestimento sobre um objeto. É luz, mais um cérebro que transforma comprimentos de onda em vermelho, amarelo ou azul-esverdeado. Os ecrãs somam luz (mistura aditiva): vermelho, verde e azul caminham para o branco. Impressão e tinta subtraem luz (mistura subtrativa): as tintas filtram e a mistura caminha para o preto. Um néon no monitor raramente coincide com o mesmo trabalho em papel.
RGB: como os ecrãs contam a cor
Um pixel no telemóvel ou portátil são três luzes minúsculas. Cada canal costuma guardar-se de 0 a 255 (oito bits). (0, 0, 0) é preto, (255, 255, 255) branco, (255, 0, 0) vermelho cheio. O hex é o mesmo terno para a web: #FF0000 é esse vermelho, #000000 o preto. Continua a falar-se em RGB porque é o que o ecrã emite de facto.
CMYK: porque a impressão parece diferente
As impressoras deitam ciano, magenta, amarelo e preto (K). Não emitem luz, absorvem-na, por isso o gamute RGB de um ecrã é maior do que o da maioria das máquinas CMYK. Um azul elétrico saturado no monitor muitas vezes fica baço no papel. Converta para CMYK antes de prometer uma cor de impressão e faça prova no suporte real. O PictorX pode mostrar números CMYK de uma cor escolhida para ver o fosso; não substitui um perfil de impressão.
HSL e HSV: os botões do designer
O matiz é a posição no arco-íris (0–360°). A saturação é o puro contra o cinzento. A luminosidade (HSL) é a proximidade do branco ou do preto; o valor (HSV) é a proximidade do preto mantendo o matiz vivo até ao fim. Gosta-se de HSL e HSV porque «um pouco mais escuro, o mesmo laranja» é um slider, não um palpite entre três números RGB.
Hex e cores CSS com nome
O hex (#RRGGBB, por vezes #RGB ou #RRGGBBAA) é a abreviatura web do RGB. O CSS também traz cores com nome—coral, steelblue, rebeccapurple—ligadas a hex fixos. Os nomes servem para rascunhos; o hex (ou uma função CSS moderna) é o que envia quando a marca tem de bater certo.
A roda de cores e as relações
Uma roda de cores dispõe os matizes em círculo. Relações clássicas: as complementares ficam opostas (azul e laranja) e contrastam forte; as análogas são vizinhas e parecem parentes; as triádicas distam três passos iguais e ficam vivas; a split-complementar pega um matiz mais os dois ao lado do oposto, contraste com menos choque; a monocromática é um matiz em muitas luminosidades. O gerador de paletas do PictorX guarda hoje complementar, análogo e monocromático. A roda continua a explicar o resto do conjunto clássico mesmo quando uma ferramenta não oferece cada harmonia.
Gradientes: caminhos entre cores
Um gradiente é uma mistura ao longo de um caminho. O linear viaja numa direção; o radial cresce a partir de um centro. As paragens fixam cores exatas. Mais paragens são mais controlo, não automaticamente mais gosto. Em CSS, linear-gradient e radial-gradient são a mesma ideia. O editor de gradientes do PictorX deixa arrastar paragens e copiar CSS, HEX, RGB, HSL, HSV ou CMYK.
Contraste, acessibilidade, quente e frio
O contraste é a distância de duas cores em luminosidade (e matiz). O WCAG pede contraste suficiente para o texto se ler: cerca de 4,5:1 para texto normal e 3:1 para texto grande no nível AA. É um piso, não um estilo. Os matizes quentes (vermelhos, laranjas, amarelos) sentem-se mais perto; os frios (azuis, verdes, violetas) recuam. Use o contraste para tipo e UI; o quente e o frio para o humor.
Ferramentas de cor no PictorX
A roda de cores serve para escolher um matiz e ler harmonias. O editor de gradientes, para misturas e CSS. O gerador de paletas constrói, bloqueia e baralha conjuntos—e pode puxar cores de uma foto. A transferência de cor veste uma imagem com a paleta de outra, no browser. Os efeitos de cor empurram uma foto para tintas e outros looks. Nada disto substitui uma máquina ou um espetrofotómetro; é uma forma rápida de ver como a cor se comporta numa imagem.
Perguntas frequentes
Qual é a diferença entre RGB e CMYK?
RGB é luz aditiva nos ecrãs (geralmente 0–255 por canal). CMYK é tinta subtrativa no papel. Cobrem gamas diferentes, por isso uma cor de ecrã muitas vezes não imprime exatamente.
O que significa complementar numa roda de cores?
As complementares ficam opostas. Juntas contrastam forte. O gerador de paletas do PictorX pode construir um conjunto complementar a partir de uma cor inicial.
Porque é que os designers usam HSL em vez de RGB?
Matiz, saturação e luminosidade coincidem com a forma como falamos de cor. Pode escurecer um laranja em HSL sem o misturar castanho por acidente, como um ajuste RGB ingénuo poderia fazer.
Quanto contraste exige o WCAG?
Para AA, cerca de 4,5:1 para texto normal e 3:1 para texto grande. Verifique o tipo no fundo real, não só numa amostra.
Ferramentas relacionadas
Roda de cores
Escolha uma cor em uma roda interativa, gere paletas complementares, análogas, triádicas e outras e copie HEX, RGB, HSL, HSV ou CMYK. Nada é carregado.
Editor de degradê
Crie degradês CSS lineares e radiais no navegador. Arraste paradas de cor, defina o ângulo e copie CSS, HEX, RGB, HSL, HSV ou CMYK. Nada é enviado.
Gerador de paleta de cores
Crie, trave e misture paletas no navegador. Copie HEX, variáveis CSS ou JSON, exporte PNG ou SVG e extraia cores de uma foto. Nada é enviado.
Transferência de cor
Recolora uma foto com as cores de uma segunda imagem. Prévia ao vivo no navegador, controle de intensidade e brilho opcional. Nada é enviado.
Filtros sonho elétrico
Dê às fotografias um glow-up cinematográfico a partir de Efeitos → Cor. Use o PictorX grátis no navegador, sem instalar software.
Pronto para experimentar?
Abra o PictorX em seu navegador – sem instalação, sem necessidade de cartão de crédito para iniciar.
Experimentar a roda de cores