Cor nomeada · #A3BEC4
Clear Vista
Clear Vista é #A3BEC4: rgb(163 190 196), hsl(191 22% 70%), oklch(0.783 0.031 212.6). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Clear Vista color name →
#A3BEC4
oklch(0.783 0.031 212.6)
Conversões de cor
- HEX
- #a3bec4
- RGB
- rgb(163 190 196)
- HSL
- hsl(191 22% 70%)
- HWB
- hwb(191 64% 23%)
- OKLCH
- oklch(0.783 0.031 212.6)
- OKLab
- oklab(0.783 -0.026 -0.016)
- CIE Lab
- lab(75.08 -8.54 -6.28)
- LCH
- lch(75.08 10.6 216.3)
- CMYK
- cmyk(17% 3% 0% 23%)
Tons claros · Sombras · Tons
Tons claros
- ACC4CA
- B5CBD0
- BED1D5
- C7D8DB
- D0DEE1
- DAE5E7
- E3EBED
- ECF2F3
- F6F8F9
Sombras
- 8DA5AA
- 788C91
- 637578
- 4F5E61
- 3C484A
- 2A3335
- 191F21
- 0A0D0E
- 010202
Tons
- A0B8BD
- 9CB1B6
- 99ABAF
- 95A5A8
- 929FA1
- 8E989B
- 8B9294
- 878C8D
- 848687
Harmonias de cor
Complementar +180°
- A3BEC4
Clear Vista
- CBB2AC
≈ Garden Snail
Análoga -30° +30°
- A3BEC4
Clear Vista
- A4BFBA
≈ Botanical Bliss
- A8BBCB
≈ Wood Pigeon
Tríade +120° +240°
- A3BEC4
Clear Vista
- C5B2C1
≈ Masked Mauve
- BFB8A3
≈ Tidal Foam
Complementar dividida +150° +210°
- A3BEC4
Clear Vista
- CAB1B6
≈ Izmir Pink
- C7B5A5
≈ Cool Beige
Tétrade +90° +180° +270°
- A3BEC4
Clear Vista
- BCB4C9
≈ Wedding Flowers
- CBB2AC
≈ Garden Snail
- B5BCA7
≈ Tickled Crow
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.95:1 · APCA Lc 38
Ag
AAASobre preto
WCAG 10.71:1 · APCA Lc 65
Melhor cor de texto: #000000
WCAG 10.71:1 (AAA) · APCA Lc 65
Contrast pairs
Trechos de código
CSS
:root {
--clear-vista: #a3bec4;
--clear-vista-rgb: 163 190 196;
--clear-vista-oklch: oklch(0.783 0.031 212.6);
}
.element {
color: var(--clear-vista);
background-color: hsl(191 22% 70%);
border-color: oklch(0.783 0.031 212.6);
}Tailwind CSS v4
@theme {
--color-clear-vista: #a3bec4;
--color-clear-vista-50: #ecf8fb;
--color-clear-vista-100: #ddebee;
--color-clear-vista-200: #c6d8dc;
--color-clear-vista-300: #a7bcc1;
--color-clear-vista-400: #8ba4a9;
--color-clear-vista-500: #6f8c92;
--color-clear-vista-600: #5f767c;
--color-clear-vista-700: #4b5f63;
--color-clear-vista-800: #364548;
--color-clear-vista-900: #253032;
--color-clear-vista-950: #141c1e;
}SCSS
$clear-vista: #a3bec4;
$clear-vista-rgb: 163, 190, 196;
$clear-vista-light: mix(#fff, $clear-vista, 20%);
$clear-vista-dark: mix(#000, $clear-vista, 20%);
.element {
color: $clear-vista;
box-shadow: 0 0 0 2px rgba($clear-vista, 0.35);
}