Definição e propriedades de cores no CSS

Definindo as cores

No CSS as cores podem ser definidas por Nome, Código hexadecimal e/ou Código RGB.

Exemplo:

OBS: códigos hexadecimais sempre devem ser iniciados por "#".

Colorindo um botão

A partir daqui, vamos usar de exemplo um simples botão que já tem suas cores pré-definidas pelo próprio navegador.

E para colorir esse botão, passaremos pelas seguintes propriedades de CSS...

background-color

Com a propriedade "background-color" podemos mudar as cores de fundo dos elementos HTML.

color

Já a propriedade "color" nos permite alterar as cores dos textos nos elementos HTML.

border-color

Também podemos mudar as cores das bordas dos elementos usando a propriedade "border-color", mas atenção, para você conseguir ver essa cor refletir, o elemento precisa ter a largura da borda e o tipo já definidos por você ou pelo navegador.

border

Falando ainda sobre a borda, também podemos unir todas as propriedades de bordas, que mencionei, em uma única propriedade. A abreviação será "border".

outline-color

A propriedade "outline-color" é muito parecida com a propriedade de borda, porém, o outline serve para marcar/contornar o elemento que está em foco na página caso o usuário queira passar pelos itens usando o teclado e não o mouse.

Assim como a borda, o outline-color também precisa da definição da largura e do tipo do contorno para assim refletir a cor. A sua abreviação é "outline".

outline

Normalmente as cores de outline ficam ocultas no código e apenas são visíveis quando o elemento de fato estiver em foco na página, de acordo com a navegação do usuário.

Dica Bônus:

outline-offset

A propriedade "outline-offset" adiciona um espaço transparente entre o contorno e a borda do elemento.

Código do botão:

HTML:

<button>Colora-me</button>

CSS:

button {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 4px;

/*  cores  */
  background-color: #ef2db2;
  color: #fff;
  border: 4px solid #c6128d;
  outline: 2px solid #5a34e8;
  outline-offset: 3px;
}

Links úteis e referência:

Veja o código desse projeto no Codepen

Documentação CSS:
MDN Web Docs
w3schools

Obrigada por ler!