Cores e fundos

docs.scrimba.com

Você quer que um botão tenha um tom específico de azul. Encontra a cor em um arquivo de design, cola #1b2130 em sua folha de estilos e funciona, mas não tem ideia do que esses caracteres significam ou como você ajustaria um pouco o tom para ficar mais claro. Cor em CSS parece um monte de códigos criptografados até que você aprende os poucos sistemas que estão por trás deles. Uma vez que você consegue ler uma cor e pintá-la em um fundo, a maior parte do caráter visual de uma página está em suas mãos.

Nomeando uma cor

CSS permite que você escreva a mesma cor de algumas maneiras diferentes. A mais simples é uma palavra-chave: um nome em inglês simples que o navegador já conhece.

.tag {
  color: rebeccapurple;      /* uma cor nomeada, sem códigos necessários */
}

Existem cerca de 140 desses nomes, o que é prático para trabalhos rápidos, mas muito poucos para designs reais. As outras maneiras permitem que você descreva qualquer cor. Um código hex é um # seguido por seis caracteres, e rgb() mistura vermelho, verde e azul por quantidade. Todos apontam para cores exatas; palavras-chave são o atalho para as comuns.

.tag {
  color: #1b2130;            /* o mesmo azul-marinho escuro, escrito como um código hex */
}

Existem quatro maneiras de escrever uma cor em CSS, e elas descrevem as mesmas cores através de sistemas diferentes. Uma palavra-chave como rebeccapurple é um nome fixo. Um código hex como #1b2130 compacta vermelho, verde e azul em seis caracteres. A função rgb() define esses mesmos três canais como números de 0 a 255. E hsl() descreve uma cor por matiz, saturação e luminosidade em vez disso.

.badge {
  color: #1b2130;                 /* hex: dois caracteres cada para vermelho, verde, azul */
  color: rgb(27, 33, 48);         /* a mesma cor como quantidades de vermelho, verde, azul */
  color: hsl(219, 28%, 15%);      /* a mesma cor como matiz, saturação, luminosidade */
}

Todas essas três linhas pintam um azul-marinho escuro idêntico. Use hsl() quando estiver escolhendo cores manualmente. Lê como uma descrição que uma pessoa pode raciocinar, onde hex e rgb são números que você principalmente copia e cola.

CSS aceita uma cor como uma palavra-chave, um código hex, rgb() ou hsl(), e as três primeiras todas endereçam o mesmo espaço sRGB (o espaço de cor padrão que telas vêm usando há décadas) através de diferentes notações. Um código hex é base-16: #1b2130 é vermelho 1b, verde 21, azul 30, cada par um valor de 00 a ff (0 a 255 em decimal). rgb() escreve esses mesmos três canais em decimal simples. Nenhum é construído para um humano raciocinar, porque mover uma cor "um pouco mais clara" significa ajustar três números de uma vez sem uma direção clara.

.badge {
  color: #1b2130;               /* base-16: 1b vermelho, 21 verde, 30 azul */
  color: rgb(27 33 48);         /* mesmos canais, decimal, sintaxe moderna separada por espaço */
  color: hsl(219 28% 15%);      /* matiz 219deg, 28% saturação, 15% luminosidade */
}

Prefira hsl(): seus três eixos cada um mapeiam uma coisa que você pode ajustar isoladamente. Matiz é uma posição de 0 a 360 na roda de cores, saturação é o quão vívida a cor é, e luminosidade é o quão brilhante. Quer um estado hover um tom mais escuro? Reduza a luminosidade alguns por cento e deixe os outros dois. Esse único eixo legível é por que hsl() se compõe bem com as propriedades customizadas que você usa para construir uma paleta, onde você pode manter uma matiz e variar apenas luminosidade entre um conjunto de tons.

JunoNomeando uma cor A mesma cor pode ser escrita como uma palavra-chave como rebeccapurple, um código hex como #1b2130, ou com rgb(). Palavras-chave são rápidas, mas existem apenas cerca de 140 delas, então a maioria do trabalho real usa os códigos. Não tente ler um código hex a olho ainda; copiar valores exatos é completamente normal nesta fase.

JunoNomeando uma cor Palavra-chave, hex, rgb() e hsl() todas nomeiam as mesmas cores através de sistemas diferentes. Quando você está escolhendo cores você mesmo, use hsl(), porque matiz, saturação e luminosidade são coisas que você pode realmente raciocinar. Hex e rgb() são para valores que você copia de um design em vez de sintonizar manualmente.

JunoNomeando uma cor Palavra-chave, hex e rgb() todos endereçam sRGB através de diferentes notações; hsl() reformula a mesma cor em três eixos que você pode mover um de cada vez. Essa é toda a razão para preferir: um hover mais escuro é um número, a luminosidade, em vez de três coordenados. Compensa no momento em que você constrói uma paleta a partir de propriedades customizadas e varia luminosidade em uma escala.

Transparência

Às vezes você quer uma cor que você pode ver parcialmente através, então o que quer que se sente atrás dela mostre um pouco. Isto é transparência, e você a adiciona com um quarto valor chamado alpha: 0 é completamente transparente, 1 é completamente sólido.

.overlay {
  background-color: rgb(27 33 48 / 0.5);   /* o azul-marinho, mas meio transparente */
}

O / 0.5 no final significa "metade da opacidade". Existe também uma propriedade chamada opacity que desvanece um elemento inteiro, texto e tudo, de uma vez:

.faded {
  opacity: 0.5;              /* desvanece o elemento inteiro, não uma cor */
}

A diferença importa: alpha afeta apenas essa cor, enquanto opacity desvanece tudo sobre o elemento.

Você torna uma cor transparente adicionando um valor alpha, onde 0 é invisível e 1 é sólido. Tanto rgb() quanto hsl() o aceitam após uma barra, e um código hex pode carregá-lo como dois caracteres extras no final.

.overlay {
  background-color: rgb(27 33 48 / 0.5);    /* azul-marinho semi-transparente */
  background-color: hsl(219 28% 15% / 0.5); /* mesma coisa via hsl */
  background-color: #1b213080;              /* novamente o mesmo: 80 é aproximadamente 50% alpha */
}

Há uma distinção importante entre alpha e a propriedade opacity. Alpha torna uma cor parcialmente transparente e nada mais. opacity desvanece o elemento inteiro, incluindo seu texto, sua borda e qualquer filho, como uma unidade única. Desvaneça uma cor com alpha; desvaneça um elemento inteiro com opacity. Se seu texto ficar fraco quando você só quis suavizar um fundo, você alcançou opacity onde queria alpha.

Alpha é um quarto canal em uma cor, de 0 (totalmente transparente) a 1 (totalmente opaco), e pertence àquele valor de cor único. rgb() e hsl() modernos o aceitam após uma barra, e hex o aceita como um quarto byte, então #1b213080 é o azul-marinho em 80/ff, aproximadamente 50%. Como alpha vive na cor, você pode tornar um fundo translúcido enquanto texto, bordas e tudo mais permanece completamente sólido.

.overlay {
  background-color: hsl(219 28% 15% / 0.5);  /* apenas este preenchimento é translúcido */
  color: white;                              /* texto permanece totalmente opaco */
}

opacity é uma ferramenta diferente que parece similar. Define a transparência do elemento como um todo, e o faz compondo o elemento e todos os seus descendentes na página como um grupo. Duas consequências seguem que alpha não tem. Primeiro, opacity abaixo de 1 estabelece um novo contexto de empilhamento (uma camada autocontida para como elementos sobrepostos são ordenados), que pode mudar o que fica em cima do quê. Segundo, você não pode recuperar um filho sólido dentro de um pai desbotado, porque o desvanecimento se aplica ao grupo terminado. Quando você só quer um preenchimento ou uma borda para ser transparente, use alpha naquela cor e deixe opacity sozinha.

JunoTransparência Adicione um quarto valor a uma cor para torná-la transparente: 0 é invisível, 1 é sólido, e algo como / 0.5 é meio. Esse alpha apenas toca essa cor. A propriedade opacity separada desvanece o elemento inteiro, texto incluído, então escolha alpha quando você só quer um fundo mais suave.

JunoTransparência Alpha é transparência em uma única cor, escrita após uma barra em rgb() ou hsl(), ou como dois caracteres hex extras. A propriedade opacity é a versão brusca: desvanece o elemento inteiro e seus filhos de uma vez. Quando seu texto inesperadamente fica fraco, você usou opacity onde alpha era a chamada certa.

JunoTransparência Alpha vive na cor, então um preenchimento translúcido deixa texto e bordas sólidos intocados. opacity compõe o elemento inteiro e seus descendentes como um grupo, é por isso que um filho não pode ficar sólido dentro de um pai desbotado, e por que silenciosamente gira um novo contexto de empilhamento. Alcance alpha a menos que você realmente queira que o elemento inteiro desvaneça junto.

Cor de fundo e imagens

A propriedade background-color preenche a área atrás de um elemento, até sua borda. Você pode usar qualquer cor que conseguir nomear.

.hero {
  background-color: hsl(219 28% 15%);   /* um azul-marinho sólido atrás do conteúdo */
}

Você também pode colocar uma imagem atrás de um elemento com background-image, apontando para o arquivo com url(...):

.hero {
  background-image: url("mountains.jpg");
  background-size: cover;               /* dimensiona a imagem para preencher toda a área */
}

background-size: cover dimensiona a imagem para que ela preencha completamente a caixa, cortando qualquer excesso. É a configuração que você quer a maioria das vezes para não haver espaços vazios.

background-color pinta a área atrás do conteúdo, preenchendo a caixa de preenchimento até a borda da borda. Em cima dessa cor você pode camadas uma imagem com background-image e url(...). Como ela se camadas em cima, uma cor de fundo sob uma imagem mostra através de qualquer parte transparente e enquanto a imagem ainda está carregando.

.hero {
  background-color: hsl(219 28% 15%);   /* mostra através e carrega primeiro */
  background-image: url("mountains.jpg");
  background-size: cover;               /* preencha a caixa, corte o excesso */
  background-position: center;          /* mantenha o meio da imagem à vista */
  background-repeat: no-repeat;         /* uma cópia, não lado a lado */
}

Três propriedades controlam como a imagem fica. background-size é geralmente cover (preencha a caixa, corte o que transborda) ou contain (encaixe a imagem inteira dentro, que pode deixar espaços). background-position decide qual parte permanece à vista quando a imagem é cortada, center sendo o padrão seguro. background-repeat: no-repeat impede uma pequena imagem de lado a lado na caixa.

background-color preenche a área de fundo do elemento, que por padrão é a caixa de preenchimento, então a cor atinge a borda externa do preenchimento e para na borda. background-image pinta em cima dessa cor, e vale a pena manter um background-color sólido sob qualquer imagem fotográfica: é o fallback mostrado enquanto a imagem carrega ou se a requisição falhar, e mostra através de regiões transparentes, então escolher um próximo ao tom da imagem evita um piscar de página nua.

.hero {
  background-color: hsl(219 28% 15%);   /* fallback e preenchimento de tempo de carregamento */
  background-image: url("mountains.jpg");
  background-size: cover;               /* cover: preencha caixa, corte excesso */
  background-position: center;          /* ancora o corte no centro */
  background-repeat: no-repeat;
}

A escolha de dimensionamento é um trade-off real. cover dimensiona a imagem para preencher a caixa em ambos os eixos e corta o que transborda, então nada fica em branco mas parte da imagem é perdida; contain dimensiona até a imagem inteira caber, então nada é cortado mas a caixa pode mostrar tiras descobertas (o background-color preenche aquelas). background-position importa mais sob cover, porque decide qual região sobrevive ao corte: center é seguro, mas um retrato pode querer top para manter um rosto em quadro. Para preenchimentos não-fotográficos crocantes, note que um gradiente também conta como um background-image, que a próxima seção usa.

JunoCor de fundo e imagensbackground-color preenche o espaço atrás de um elemento, e background-image: url(...) coloca uma imagem lá em vez disso. Emparelhe uma imagem com background-size: cover para que ela preencha a caixa inteira sem deixar espaços. Essa combinação cobre a maioria do que você alcançará cedo.

JunoCor de fundo e imagens Uma imagem de fundo se camadas em cima da cor de fundo, então mantenha uma cor embaixo enquanto a imagem carrega. cover preenche a caixa e corta o excesso, contain encaixa a imagem inteira e pode deixar espaços, e background-position decide qual parte permanece visível quando cortada. Adicione no-repeat a menos que você realmente queira que a imagem faça lado a lado.

JunoCor de fundo e imagens Mantenha um background-color sob qualquer foto: é o fallback durante o carregamento e mostra através de áreas transparentes. cover versus contain é preenchimento-e-corte versus encaixe-e-talvez-espaço, e background-position apenas justifica sua existência sob cover, onde escolhe o que sobrevive ao corte. Ancora em center por padrão e mova-o apenas quando uma parte específica da imagem tem que permanecer em quadro.

Gradientes

Um gradiente é uma mistura suave de uma cor para outra. CSS o trata como um tipo de imagem, então vai em background-image em vez de background-color.

.banner {
  background-image: linear-gradient(hsl(219 28% 15%), hsl(219 40% 35%));
}

Isso mistura da primeira cor no topo para a segunda no fundo. Você pode listar mais de duas cores, e você pode mudar a direção:

.banner {
  background-image: linear-gradient(to right, hsl(340 80% 55%), hsl(30 90% 60%));
  /* mistura esquerda para direita em vez de cima para baixo */
}

Nenhum arquivo de imagem necessário; o navegador desenha a mistura para você.

Um gradiente é uma imagem gerada, é por isso que linear-gradient() vai em background-image e não em background-color. Seu primeiro argumento é a direção, então uma lista de cores para misturar entre. Deixe a direção de fora e ela corre de cima para baixo.

.banner {
  background-image: linear-gradient(
    to right,                    /* direção: borda esquerda para borda direita */
    hsl(340 80% 55%),            /* cor de início */
    hsl(30 90% 60%)              /* cor de fim */
  );
}

radial-gradient() funciona da mesma maneira mas mistura para fora de um ponto central em anéis, em vez de ao longo de uma linha reta. É a ferramenta para um brilho suave ou um efeito de holofote.

.spotlight {
  background-image: radial-gradient(hsl(0 0% 100%), hsl(219 28% 15%));
  /* centro brilhante desbotando para bordas escuras */
}

Como um gradiente é uma imagem de fundo, ele se camadas com imagens reais e com outros gradientes sob a mesma propriedade background-image, separados por vírgulas.

Um gradiente é uma imagem gerada, então ele vive em background-image e obedece às mesmas regras de dimensionamento e camadas que um url(...). linear-gradient() leva uma direção opcional primeiro (to right, ou um ângulo como 135deg), então uma lista de paradas de cor que ele mistura entre. Dê a uma parada uma posição explícita e você controla exatamente onde uma cor repousa, que transforma um gradiente em uma listra dura quando duas paradas se encontram no mesmo ponto.

.banner {
  background-image: linear-gradient(
    135deg,                      /* ângulo: 0deg é para cima, 90deg é para direita */
    hsl(340 80% 55%) 0%,
    hsl(30 90% 60%) 100%
  );
}

radial-gradient() mistura de um centro para fora e leva uma forma e tamanho opcionais antes de suas paradas. Ambos são imagens em todos os sentidos, então eles se camadas sob uma background-image separada por vírgula, gradientes anteriores pintando sobre posteriores, que é como um gradiente translúcido se torna um matiz sobre uma foto:

.hero {
  background-image:
    linear-gradient(hsl(219 28% 15% / 0.6), hsl(219 28% 15% / 0.6)),  /* matiz escuro em cima */
    url("mountains.jpg");                                             /* foto embaixo */
  background-size: cover;
}

Como hsl() expõe luminosidade diretamente, um gradiente de duas paradas entre a mesma matiz em dois valores de luminosidade dá uma transição limpa e controlável, que é um mais um lugar escolher hsl sobre hex compensa.

JunoGradientes Um gradiente é uma mistura suave entre cores, e CSS o conta como uma imagem, então vai em background-image. linear-gradient() mistura em uma linha reta, de cima para baixo por padrão, ou adicione to right para mudar direção. Nenhum arquivo necessário, o navegador desenha a mistura em si.

JunoGradientes Tanto linear-gradient() quanto radial-gradient() são imagens geradas, então eles pertencem a background-image. Linear mistura ao longo de uma linha que você aponta com uma direção; radial mistura para fora de um centro em anéis, bom para um brilho. Como são imagens, você pode empilhar vários sob uma background-image separada por vírgula.

JunoGradientes Gradientes são imagens, então eles levam posições, se camadas sob uma background-image, e obedecem background-size. Dê às paradas de cor posições explícitas para transições precisas ou listras duras, e camadas um gradiente translúcido sobre um url(...) para matizar uma foto sem um segundo elemento. Uma transição de duas paradas hsl() entre a mesma matiz em dois valores de luminosidade é o tipo mais limpo de controlar.

Cor que se adapta e permanece legível

Uma palavra-chave útil é currentColor. Ela representa qual quer que seja a cor do texto do elemento, então uma borda ou ícone pode corresponder ao texto automaticamente:

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* a borda corresponde à cor do texto */
}

Mude a cor do texto mais tarde e a borda segue por conta própria, sem uma segunda edição.

Uma coisa mais a manter em mente: certifique-se de que o texto se destaca de seu fundo. Texto escuro em um fundo escuro é difícil de ler, e cinza pálido em branco força os olhos. Aponte para uma diferença clara em brilho entre os dois.

currentColor é uma palavra-chave que se resolve para o valor color do elemento próprio, então bordas, contornos e ícones SVG podem rastrear a cor do texto sem repetir. Defina o texto uma vez e tudo vinculado a currentColor atualiza com ele.

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* segue color, sem valor duplicado */
}

A propriedade para observar ao lado disso é contraste: a diferença em brilho entre texto e seu fundo. Baixo contraste é difícil de ler, e diretrizes de acessibilidade definem uma razão mínima para texto do corpo. Aqui é onde hsl() ganha seu lugar novamente: como luminosidade é seu próprio eixo, você pode manter uma matiz e empurrar a luminosidade do texto e fundo longe o bastante para permanecer legível, sem adivinhar em três canais de uma vez.

currentColor se resolve para o color calculado do elemento, que o torna uma maneira leve de amarrar bordas, contornos, sombras de caixa e SVG fill à cor do texto. Ele herda como qualquer valor, então definir color em um contêiner cascata uma única cor de fonte até cada descendente que referencia currentColor, que é um padrão limpo para tematizar um componente a partir de uma declaração.

A restrição mais difícil é contraste, a diferença medida em luminância relativa entre primeiro plano e fundo. O padrão de acessibilidade, WCAG (as Diretrizes de Acessibilidade de Conteúdo Web), define uma razão mínima de 4.5 para 1 para texto de corpo normal e 3 para 1 para texto grande, e texto abaixo disso é difícil de ler para muitas pessoas, não apenas aquelas com baixa visão. hsl() ajuda você a atingir: luminosidade é um eixo separado, então você pode manter uma matiz e saturação e mover apenas os dois valores de luminosidade separados até o par passar, em vez de ajustar seis canais às cegas. É um auxílio ao raciocínio, não uma garantia, desde que cores de luminosidade igual ainda possam falhar no cálculo de luminância verdadeira, então verifique a razão final com um verificador.

Duas coisas mais são worth knowing neste nível. O atalho background define muitas propriedades de fundo de uma vez, e sua única regra é que background-size vem após background-position, separado por uma barra: background: url("bg.jpg") center / cover no-repeat. E CSS agora tem funções de cor além de hsl(), como oklch(), que alcançam cores fora do espaço sRGB em telas que suportam um gamuta mais amplo (o intervalo de cores que uma tela pode mostrar). Você não precisa delas ainda, mas saber que as novas funções existem significa que você as reconhecerá quando um sistema de design alcançar uma cor mais vívida do que o sRGB pode expressar. Emparelhe isso com tipografia legível e o texto carrega seu significado para cada leitor.

JunoCor que se adapta e permanece legívelcurrentColor é uma palavra-chave que copia a cor do texto do elemento, então uma borda pode corresponder ao texto e segui-lo se você mudá-lo mais tarde. Além disso, mantenha o texto legível: certifique-se de que ele é claramente mais brilho ou mais escuro do que o que fica atrás dele. Baixo contraste é a razão mais comum para uma página ser difícil de ler.

JunoCor que se adapta e permanece legívelcurrentColor amarra bordas, contornos e ícones à cor do texto para que você o defina em um lugar. Observe contraste, a lacuna de brilho entre texto e fundo, porque as regras de acessibilidade definem um mínimo para texto do corpo. Puxar os valores de luminosidade separados em hsl() é a maneira confiável de manter essa lacuna larga o bastante.

JunoCor que se adapta e permanece legívelcurrentColor herda, então um color em um contêiner tematiza cada descendente que o referencia. WCAG quer 4.5 para 1 para texto do corpo, e hsl() deixa você mover apenas luminosidade para atingir, embora luminosidade igual possa ainda falhar no teste real de luminância, então verifique com uma ferramenta. Lembre-se que o atalho background coloca tamanho após posição com uma barra, e funções mais novas como oklch() existem para gamutass mais amplas quando um design precisa delas.