1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
---
title: Alpha (canal alfa)
slug: Glossario/Alpha
tags:
- Alfa
- Canal Alfa
- Desenhando
- Glossário
- Translucidez
- Translucido
- Transparente
- Transparência
- WebGL
- WebXR
- canal
- cor
- graficos
- pixel
translation_of: Glossary/Alpha
---
<p>Cores são representadas no formato digital como uma coleção de números, cada qual sinalizando o nível de força ou intensidade de dado componente da cor. Cada um desses componententes é chamado de <strong>canal</strong>. Num típico arquivo de imagem, o canais de cores descritos devem ser vermelho, verde e azul, que serão usados para definir a cor final. Para representar uma cor que através dela um plano de fundo possa ser visto, um quarto canal é adicionado a ela: o canal alfa. O canal alfa define o nível de opacidade da cor.</p>
<p>Por exemplo, a cor <code>#8921F2</code> (também descrita como <code>rgb(137, 33, 242)</code> ou<code> hsl(270, 89%, 54)</code>) é um belo tom de roxo. Abaixo você pode ver um pequeno retângulo no canto superior esquerdo e outro com a mesma cor, mas tendo um canal alfa defino em 0.5 (50% de opacidade). Os dois retângulos estão desenhados sobre o paragrafo de texto.</p>
<p style="text-align: center;"><img alt="Image showing the effect of an alpha channel on a color." src="https://mdn.mozillademos.org/files/17019/alpha-channel-example.png" style="height: 219px; width: 420px;"></p>
<p>Como você pode notar, a cor sem o canal alfa bloqueia completamente o texto ao fundo, enquanto o retângulo com canal alfa definido permite visibilidade através do plano de fundo com cor roxa.</p>
<h2 id="Saiba_mais">Saiba mais</h2>
<h3 id="Conhecimento_geral">Conhecimento geral</h3>
<ul>
<li>{{interwiki("wikipedia", "Alpha compositing")}} na Wikipedia</li>
<li>{{interwiki("wikipedia", "RGBA color model")}} na Wikipedia</li>
<li>{{interwiki("wikipedia", "Channel (digital image)")}} na Wikipedia</li>
</ul>
<h3 id="Referência_técnica">Referência técnica</h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Color">CSS color</a></li>
</ul>
|
