Cor nomeada · #5F5D64
Baroque Grey
Baroque Grey é #5F5D64: rgb(95 93 100), hsl(257 4% 38%), oklch(0.483 0.011 299). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Baroque Grey color name →
#5F5D64
oklch(0.483 0.011 299)
Conversões de cor
- HEX
- #5f5d64
- RGB
- rgb(95 93 100)
- HSL
- hsl(257 4% 38%)
- HWB
- hwb(257 36% 61%)
- OKLCH
- oklch(0.483 0.011 299)
- OKLab
- oklab(0.483 0.005 -0.01)
- CIE Lab
- lab(39.86 1.94 -3.72)
- LCH
- lch(39.86 4.2 297.5)
- CMYK
- cmyk(5% 7% 0% 61%)
Tons claros · Sombras · Tons
Tons claros
- 6E6C72
- 7D7B81
- 8C8A90
- 9C9A9F
- ABAAAE
- BCBBBE
- CCCBCE
- DDDCDE
- EEEEEE
Sombras
- 525056
- 444348
- 38373B
- 2C2A2E
- 201F22
- 151416
- 0A0A0B
- 030303
- 000000
Tons
- 626067
- 65646A
- 69676C
- 6C6B6F
- 6F6E72
- 737275
- 767577
- 79797A
- 7D7C7D
Harmonias de cor
Complementar +180°
- 5F5D64
Baroque Grey
- 5D5F58
≈ Sable Evening
Análoga -30° +30°
- 5F5D64
Baroque Grey
- 5C5E65
≈ Baroque Grey
- 625C61
≈ Volcanic Glass
Tríade +120° +240°
- 5F5D64
Baroque Grey
- 635D58
≈ Deep Walnut
- 58615E
≈ Jasper Green
Complementar dividida +150° +210°
- 5F5D64
Baroque Grey
- 615E57
≈ Deep Walnut
- 5A605B
≈ Jasper Green
Tétrade +90° +180° +270°
- 5F5D64
Baroque Grey
- 655C5B
≈ Phantom Hue
- 5D5F58
≈ Sable Evening
- 576062
≈ Yacht Club
Contraste e acessibilidade
Ag
AASobre branco
WCAG 6.48:1 · APCA Lc 82
Ag
FailSobre preto
WCAG 3.23:1 · APCA Lc 20
Melhor cor de texto: #FFFFFF
WCAG 6.48:1 (AA) · APCA Lc 82
Contrast pairs
Trechos de código
CSS
:root {
--baroque-grey: #5f5d64;
--baroque-grey-rgb: 95 93 100;
--baroque-grey-oklch: oklch(0.483 0.011 299);
}
.element {
color: var(--baroque-grey);
background-color: hsl(257 4% 38%);
border-color: oklch(0.483 0.011 299);
}Tailwind CSS v4
@theme {
--color-baroque-grey: #5f5d64;
--color-baroque-grey-50: #f5f4f8;
--color-baroque-grey-100: #e8e7eb;
--color-baroque-grey-200: #d5d3d8;
--color-baroque-grey-300: #b8b6bc;
--color-baroque-grey-400: #9f9da4;
--color-baroque-grey-500: #87858d;
--color-baroque-grey-600: #727077;
--color-baroque-grey-700: #5b5a5f;
--color-baroque-grey-800: #434246;
--color-baroque-grey-900: #2e2d30;
--color-baroque-grey-950: #1b1a1d;
}SCSS
$baroque-grey: #5f5d64;
$baroque-grey-rgb: 95, 93, 100;
$baroque-grey-light: mix(#fff, $baroque-grey, 20%);
$baroque-grey-dark: mix(#000, $baroque-grey, 20%);
.element {
color: $baroque-grey;
box-shadow: 0 0 0 2px rgba($baroque-grey, 0.35);
}