Cor nomeada · #AB9BBC
Purple Springs
Purple Springs é #AB9BBC: rgb(171 155 188), hsl(269 20% 67%), oklch(0.714 0.05 307). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Purple Springs color name →
#AB9BBC
oklch(0.714 0.05 307)
Conversões de cor
- HEX
- #ab9bbc
- RGB
- rgb(171 155 188)
- HSL
- hsl(269 20% 67%)
- HWB
- hwb(269 61% 26%)
- OKLCH
- oklch(0.714 0.05 307)
- OKLab
- oklab(0.714 0.03 -0.04)
- CIE Lab
- lab(66.22 10.82 -14.91)
- LCH
- lch(66.22 18.42 306)
- CMYK
- cmyk(9% 18% 0% 26%)
Tons claros · Sombras · Tons
Tons claros
- B3A5C3
- BBAEC9
- C4B8D0
- CCC2D7
- D4CCDD
- DDD6E4
- E5E0EB
- EEEAF1
- F6F5F8
Sombras
- 9486A3
- 7E728B
- 685E73
- 544B5D
- 403947
- 2D2832
- 1B181F
- 0B090D
- 010102
Tons
- A798B6
- A296B0
- 9E93AA
- 9A90A4
- 958E9E
- 918B98
- 8D8892
- 88858C
- 848386
Harmonias de cor
Complementar +180°
- AB9BBC
Purple Springs
- 9AA987
≈ Fern Leaf
Análoga -30° +30°
- AB9BBC
Purple Springs
- 9AA1C3
≈ Midnight Blush
- B897AE
≈ Cherished
Tríade +120° +240°
- AB9BBC
Purple Springs
- B99D82
≈ Au Lait Ole
- 7FADA8
≈ Green Room
Complementar dividida +150° +210°
- AB9BBC
Purple Springs
- ABA380
≈ Inglenook Olive
- 89AD96
≈ Pale Willow
Tétrade +90° +180° +270°
- AB9BBC
Purple Springs
- C0988D
≈ Muddy Mire
- 9AA987
≈ Fern Leaf
- 7FABB8
≈ Winter Twilight
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.57:1 · APCA Lc 50
Ag
AAASobre preto
WCAG 8.14:1 · APCA Lc 52
Melhor cor de texto: #000000
WCAG 8.14:1 (AAA) · APCA Lc 52
Contrast pairs
Trechos de código
CSS
:root {
--purple-springs: #ab9bbc;
--purple-springs-rgb: 171 155 188;
--purple-springs-oklch: oklch(0.714 0.05 307);
}
.element {
color: var(--purple-springs);
background-color: hsl(269 20% 67%);
border-color: oklch(0.714 0.05 307);
}Tailwind CSS v4
@theme {
--color-purple-springs: #ab9bbc;
--color-purple-springs-50: #f9f1ff;
--color-purple-springs-100: #ede4f5;
--color-purple-springs-200: #dacfe5;
--color-purple-springs-300: #bfb1cb;
--color-purple-springs-400: #a697b6;
--color-purple-springs-500: #8f7ea1;
--color-purple-springs-600: #796a88;
--color-purple-springs-700: #61556d;
--color-purple-springs-800: #463e51;
--color-purple-springs-900: #312b38;
--color-purple-springs-950: #1d1823;
}SCSS
$purple-springs: #ab9bbc;
$purple-springs-rgb: 171, 155, 188;
$purple-springs-light: mix(#fff, $purple-springs, 20%);
$purple-springs-dark: mix(#000, $purple-springs, 20%);
.element {
color: $purple-springs;
box-shadow: 0 0 0 2px rgba($purple-springs, 0.35);
}