Cor nomeada · #BEB5A9
Amazing Grey
Amazing Grey é #BEB5A9: rgb(190 181 169), hsl(34 14% 70%), oklch(0.777 0.02 75.3). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Amazing Grey color name →
#BEB5A9
oklch(0.777 0.02 75.3)
Conversões de cor
- HEX
- #beb5a9
- RGB
- rgb(190 181 169)
- HSL
- hsl(34 14% 70%)
- HWB
- hwb(34 66% 25%)
- OKLCH
- oklch(0.777 0.02 75.3)
- OKLab
- oklab(0.777 0.005 0.019)
- CIE Lab
- lab(74.18 1.76 7.34)
- LCH
- lch(74.18 7.55 76.5)
- CMYK
- cmyk(0% 5% 11% 25%)
Tons claros · Sombras · Tons
Tons claros
- C4BCB1
- CBC3BA
- D1CBC2
- D8D2CB
- DED9D3
- E5E1DC
- EBE8E5
- F2F0ED
- F8F7F6
Sombras
- A59D92
- 8C867C
- 756F67
- 5E5953
- 48443F
- 33302C
- 1F1D1B
- 0D0C0A
- 020201
Tons
- B8B0A5
- B1AAA1
- ABA59D
- A59F98
- 9E9A94
- 989590
- 92908C
- 8C8A88
- 868584
Harmonias de cor
Complementar +180°
- BEB5A9
Amazing Grey
- AEB7C3
≈ Bedside Manner
Análoga -30° +30°
- BEB5A9
Amazing Grey
- C2B3AC
≈ Mauvette
- B8B7A9
≈ Play on Grey
Tríade +120° +240°
- BEB5A9
Amazing Grey
- A9BBBA
≈ Blue Willow
- BBB3BF
≈ Ash Grove
Complementar dividida +150° +210°
- BEB5A9
Amazing Grey
- AAB9C0
≈ Glen Falls
- B5B5C3
≈ Fading Sunset
Tétrade +90° +180° +270°
- BEB5A9
Amazing Grey
- ACBBB3
≈ Quietude
- AEB7C3
≈ Bedside Manner
- C0B2B9
≈ Blossom Powder
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.02:1 · APCA Lc 39
Ag
AAASobre preto
WCAG 10.37:1 · APCA Lc 63
Melhor cor de texto: #000000
WCAG 10.37:1 (AAA) · APCA Lc 63
Contrast pairs
Trechos de código
CSS
:root {
--amazing-grey: #beb5a9;
--amazing-grey-rgb: 190 181 169;
--amazing-grey-oklch: oklch(0.777 0.02 75.3);
}
.element {
color: var(--amazing-grey);
background-color: hsl(34 14% 70%);
border-color: oklch(0.777 0.02 75.3);
}Tailwind CSS v4
@theme {
--color-amazing-grey: #beb5a9;
--color-amazing-grey-50: #f8f4ef;
--color-amazing-grey-100: #ece7e1;
--color-amazing-grey-200: #d9d3cb;
--color-amazing-grey-300: #bdb6ac;
--color-amazing-grey-400: #a59d92;
--color-amazing-grey-500: #8e8578;
--color-amazing-grey-600: #787066;
--color-amazing-grey-700: #605a51;
--color-amazing-grey-800: #47413b;
--color-amazing-grey-900: #312d28;
--color-amazing-grey-950: #1d1a16;
}SCSS
$amazing-grey: #beb5a9;
$amazing-grey-rgb: 190, 181, 169;
$amazing-grey-light: mix(#fff, $amazing-grey, 20%);
$amazing-grey-dark: mix(#000, $amazing-grey, 20%);
.element {
color: $amazing-grey;
box-shadow: 0 0 0 2px rgba($amazing-grey, 0.35);
}