Color Properties

Opacidade

O grau em que uma cor ou elemento bloqueia o conteúdo atrás dele, onde 100% é totalmente opaco e 0% é totalmente transparente.

Opacity is the inverse of transparency. In CSS, opacity can be set using the opacity property (which affects the entire element and its children) or using alpha-channel color values like rgba() and hsla(). Opacity is essential for creating layered visual effects, overlay patterns, glass-morphism designs, and subtle background tints. When compositing semi-transparent colors, the visible result depends on both the foreground color and whatever is behind it, following the alpha compositing formula defined by Porter and Duff.

Experimente

Conversor de cores

Converta entre os formatos de cor HEX, RGB, HSL, HSV, CMYK e OKLCH instantaneamente.

Artigos relacionados

CSS color-mix(): Misture Cores Nativamente no Navegador

Aprenda CSS color-mix() para misturar cores nativamente no navegador. Domine a sintaxe, espaços de cores, casos de uso práticos e crie paletas dinâmicas sem JavaScript.

Criando um Seletor de Cores como Web Component do Zero

Crie um seletor de cores acessível como Web Component. Implemente renderização em canvas, sliders de matiz, canais alfa e eventos customizados com Shadow DOM.

Esmeralda vs Jade vs Verde Floresta: Guia de Comparação de Verdes

Compare esmeralda (#50C878), jade (#00A86B) e verde floresta (#228B22). Conheça as diferenças visuais e os códigos hex entre essas populares tonalidades de verde.

Função CSS light-dark(): Alternância Nativa de Tema

Use CSS light-dark() para alternância nativa de tema. Substitua toggles JavaScript e media queries por uma única função CSS para cores em modo claro e escuro.

Separação de Cores Explicada: Preparando Arquivos para Impressão

Entenda a separação de cores CMYK, placas de cores especiais, trapping e marcas de registro. Prepare arquivos prontos para impressão com separações de cores corretas.

Animação de Cores em CSS: Transições e Keyframes

Domine a animacao de cores em CSS com transicoes, animacoes de keyframe, rotacao de matiz HSL, interpolacao OKLCH para suavidade perceptual e boas praticas de performance.