Cor Azul-celeste: código #87CEEB

Azul-celeste

#87CEEB

Códigos da cor

  • HEX#87CEEB
  • RGBrgb(135, 206, 235)
  • HSLhsl(197, 71%, 73%)
  • HSVhsv(197, 43%, 92%)
  • CMYKcmyk(43%, 12%, 0%, 8%)
  • LABlab(79.2% -14.8 -21.3)
  • OKLCHoklch(81.5% 0.082 225.8)

Sobre a cor Azul-celeste

Azul-celeste tem o código HEX #87CEEB, que corresponde a rgb(135, 206, 235) no modelo RGB. No círculo cromático, seu matiz fica em 197°, com 71% de saturação e 73% de luminosidade (hsl(197, 71%, 73%)).

Pelo matiz, é percebida como uma cor fria: tende a transmitir calma e distância e a “recuar” visualmente na composição.

Como fundo, pede texto escuro: o preto atinge contraste de 12,05:1 sobre ela, contra 1,74:1 do branco.

Para impressão, a conversão aproximada é cmyk(43%, 12%, 0%, 8%). Confirme sempre com o perfil de cor da gráfica, porque o resultado depende do papel e da tinta.

Tons mais claros

Tons mais escuros

Combinações com Azul-celeste

Complementar

#87CEEB · #EBA589

Análoga

#89EBD6 · #87CEEB · #899EEB

Tríade

#87CEEB · #EB89CF · #CFEB89

Tetrádica

#87CEEB · #D689EB · #EBA589 · #9EEB89

Complementar dividida

#87CEEB · #EB899E · #EBD689

Monocromática

#23A0D1 · #5EBEE4 · #87CEEB · #CBEAF6 · #FFFFFF

Azul-celeste com texto branco e preto

Texto branco Aa Bb Cc 123
1,74:1 · não passa na WCAG
Texto preto Aa Bb Cc 123
12,05:1 · AAA

Testar outras combinações no verificador de contraste

Céu aberto, em código

O azul-celeste é o azul do céu de dia limpo e costuma ser associado a calma, leveza e amplitude. É um tom que aparece com naturalidade em marcas de turismo, protetor solar, produtos de limpeza e quartos infantis, justamente porque sugere ar e frescor. Mas, como toda associação de cor, essa leitura muda com o contexto: num hospital, o mesmo tom soa higiênico; numa loja de roupas, soa casual e de verão.

O valor de referência, #87CEEB, é o skyblue do CSS: matiz de 197°, saturação moderada e luminosidade alta. Por isso ele parece suave mesmo em grandes áreas.

O erro mais comum: texto branco

Texto branco sobre #87CEEB tem contraste de apenas 1,7:1, muito abaixo dos 4,5:1 que a WCAG pede para texto normal. Em botões e faixas celestes, use texto preto (cerca de 12:1) ou azul-marinho (#000080, cerca de 9:1). Confira sua combinação no verificador de contraste.

No modo escuro, o celeste funciona bem como cor de destaque sobre fundos quase pretos, já que é claro o bastante para ser lido. É um dos poucos azuis que ficam melhores no tema escuro do que no claro.

Paleta com azul-celeste

CorHEXEfeito
Branco#FFFFFFclima praiano, leve
Azul-marinho#000080monocromático com hierarquia clara
Coral#FF7F50complementar quente, bom para destaques
Creme#FFFDD0versão mais aconchegante e vintage

Azul-celeste ou azul bebê?

Na prática, são quase a mesma cor. O azul bebê (#89CFF0) tem matiz de 199° e é um pouco mais saturado; o celeste (#87CEEB) tem 197°. A diferença é mais de nome e de uso do que de pigmento: “celeste” aparece em decoração e moda; “bebê”, em enxoval e festas infantis. Se você precisa de um azul-claro mais marcante, suba a saturação ou procure um turquesa.

Para impressão, a conversão direta de #87CEEB dá aproximadamente cmyk(42%, 12%, 0%, 8%). Em papel não revestido, tons claros como esse tendem a ficar um pouco mais apagados do que na tela, então peça uma prova antes de rodar convites, papelaria ou embalagens. Se precisar comparar valores, o conversor de cores mostra os dois sistemas lado a lado.

Como usar em CSS

:root {
  --color-sky-blue: #87CEEB;
  --color-sky-blue-rgb: 135, 206, 235;
}

.elemento {
  background-color: var(--color-sky-blue);
  color: #000000;
}

Cores parecidas

Use Azul-celeste nas ferramentas