Cor nomeada do CSS
Cor Thistle #D8BFD8
Thistle (palavra-chave thistle no CSS) tem o código hex #D8BFD8 e o valor RGB rgb(216, 191, 216): um magenta suave e muito claro.
O nome vem do cardo, flor que é emblema nacional da Escócia: um lilás claro e acinzentado (#d8bfd8).
Códigos da cor Thistle
| Palavra-chave CSS | thistle |
|---|---|
| HEX | #D8BFD8 |
| RGB | rgb(216, 191, 216) |
| HSL | hsl(300, 24%, 80%) |
| HWB | hwb(300 75% 15%) |
| OKLCH | oklch(83.3% 0.044 326) |
| CMYK (simples, sem perfil ICC) | cmyk(0%, 12%, 0%, 15%) |
| Decimal | 14.204.888 |
| Família de matiz | Roxos e violetas |
Contraste e acessibilidade
Sobre thistle, texto preto tem contraste de 12,36:1 e passa no AAA para qualquer tamanho de texto; texto branco fica em 1,69:1.
Razões de contraste do WCAG 2.2 (critérios 1.4.3 e 1.4.6: AA exige 4,5:1 para texto normal e 3:1 para texto grande; AAA exige 7:1 e 4,5:1). APCA Lc é o contraste de luminosidade do modelo APCA-W3 0.0.98G proposto para o WCAG 3; quanto maior o valor absoluto, mais legível, e Lc 75 é o mínimo sugerido para texto corrido.
| Combinação | Razão | AA | AA grande | AAA | AAA grande | APCA Lc |
|---|---|---|---|---|---|---|
| Texto preto sobre thistle | 12,36:1 | Passa | Passa | Passa | Passa | 73,5 |
| Texto branco sobre thistle | 1,69:1 | Falha | Falha | Falha | Falha | −34,1 |
| Texto thistle sobre branco | 1,69:1 | Falha | Falha | Falha | Falha | 30,3 |
| Texto thistle sobre preto | 12,36:1 | Passa | Passa | Passa | Passa | −72,5 |
Tons claros e escuros
Cada passo mistura thistle com branco (tons claros) ou preto (tons escuros) em sRGB com correção gama, o mesmo resultado de color-mix(in srgb, thistle, white 25%) no CSS.
Tons claros (misturados com branco)
- 5%
#dac2da - 15%
#dec9de - 25%
#e2cfe2 - 35%
#e6d5e6 - 45%
#eadcea - 55%
#ede2ed - 65%
#f1e9f1 - 75%
#f5eff5 - 85%
#f9f5f9 - 95%
#fdfcfd
Tons escuros (misturados com preto)
- 5%
#cdb5cd - 15%
#b8a2b8 - 25%
#a28fa2 - 35%
#8c7c8c - 45%
#776977 - 55%
#615661 - 65%
#4c434c - 75%
#363036 - 85%
#201d20 - 95%
#0b0a0b
Harmonias de cor
Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de thistle é #B7D1B8 (perto de silver), as análogas são #CAC3E2 e #E1BDC9 e a tríade se completa com #D5C7A9 e #A8D1D6. Para texto por cima, preto dá mais contraste.
| Harmonia | Rotação | Cor |
|---|---|---|
| Complementar | +180° | #b7d1b8 |
| Análogas | −30°, +30° | #cac3e2#e1bdc9 |
| Tríade | +120°, +240° | #d5c7a9#a8d1d6 |
| Complementar dividida | +150°, +210° | #c6ccac#abd2c7 |
Calculadas em OKLCH: o matiz gira 180° (complementar), ±30° (análogas), ±120° (tríade) e 180° ±30° (complementar dividida), com luminosidade e croma mantidos. Quando o resultado sai do sRGB, ele é trazido de volta com o algoritmo de mapeamento de gama do CSS Color 4. Por usar OKLCH, os valores diferem das ferramentas que giram o matiz em HSL, mas as cores ficam com a mesma luminosidade percebida.
Quente ou fria?
Thistle fica na fronteira: o matiz de 300° no círculo HSL é um magenta, que parece quente ao lado de azuis e frio ao lado de vermelhos e laranjas.
Cores nomeadas e do Tailwind mais próximas
A distância é o ΔE OK, a distância euclidiana no OKLab multiplicada por 100. Valores abaixo de cerca de 2 são difíceis de distinguir lado a lado.
Código
.element {
color: thistle;
background-color: #d8bfd8;
border-color: rgb(216 191 216);
outline-color: oklch(83.3% 0.044 326);
}<div class="bg-[#d8bfd8] text-black">...</div>
/* ou registre uma vez no seu CSS (Tailwind v4) */
@theme {
--color-thistle: #d8bfd8;
}
/* depois use bg-thistle, text-thistle, border-thistle */import SwiftUI
extension Color {
static let thistle = Color(red: 0.847, green: 0.749, blue: 0.847)
}import androidx.compose.ui.graphics.Color
val Thistle = Color(0xFFD8BFD8)import 'package:flutter/material.dart';
const thistle = Color(0xFFD8BFD8);<!-- res/values/colors.xml -->
<color name="thistle">#D8BFD8</color>Perguntas frequentes
- Qual é o código hex da cor thistle?
- O código hex de thistle é #D8BFD8. A mesma cor se escreve rgb(216, 191, 216), hsl(300, 24%, 80%) ou oklch(83.3% 0.044 326), e no CSS também dá para usar direto a palavra-chave thistle.
- Thistle é uma cor quente ou fria?
- Thistle fica na fronteira: o matiz de 300° no círculo HSL é um magenta, que parece quente ao lado de azuis e frio ao lado de vermelhos e laranjas.
- Quais cores combinam com thistle?
- Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de thistle é #B7D1B8 (perto de silver), as análogas são #CAC3E2 e #E1BDC9 e a tríade se completa com #D5C7A9 e #A8D1D6. Para texto por cima, preto dá mais contraste.
- Dá para usar texto branco sobre thistle?
- Texto branco sobre thistle tem contraste de 1,69:1 e não passa no AA nem para texto grande do WCAG 2.2. Texto preto chega a 12,36:1 e passa no AA e no AAA. No APCA, o valor é Lc −34,1 para branco e Lc 73,5 para preto.
- Qual é o RGB de thistle?
- Thistle é rgb(216, 191, 216): vermelho 216, verde 191 e azul 216 na escala de 0 a 255, ou 84,7%, 74,9% e 84,7%. Em número decimal, 14204888.
Revisado em por Arielton Oberek.