Cor nomeada · #5D5153
Sophisticated Plum
Sophisticated Plum é #5D5153: rgb(93 81 83), hsl(350 7% 34%), oklch(0.447 0.016 6.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Sophisticated Plum color name →
#5D5153
oklch(0.447 0.016 6.4)
Conversões de cor
- HEX
- #5d5153
- RGB
- rgb(93 81 83)
- HSL
- hsl(350 7% 34%)
- HWB
- hwb(350 32% 64%)
- OKLCH
- oklch(0.447 0.016 6.4)
- OKLab
- oklab(0.447 0.016 0.002)
- CIE Lab
- lab(35.71 5.41 0.74)
- LCH
- lch(35.71 5.46 7.8)
- CMYK
- cmyk(0% 13% 11% 64%)
Tons claros · Sombras · Tons
Tons claros
- 6C6163
- 7B7173
- 8B8183
- 9A9294
- ABA4A5
- BBB5B6
- CCC7C8
- DCDADA
- EEECEC
Sombras
- 504547
- 433A3B
- 372F30
- 2A2425
- 1F1A1B
- 141011
- 0A0708
- 030202
- 000000
Tons
- 605657
- 645A5C
- 675F60
- 6B6365
- 6E6869
- 726D6E
- 757272
- 797677
- 7C7B7B
Harmonias de cor
Complementar +180°
- 5D5153
Sophisticated Plum
- 4B5856
≈ Black Spruce
Análoga -30° +30°
- 5D5153
Sophisticated Plum
- 5B5158
≈ Sophisticated Plum
- 5D524E
≈ Gardener’s Soil
Tríade +120° +240°
- 5D5153
Sophisticated Plum
- 52564D
≈ Sunken Battleship
- 4E565D
≈ Urbanite
Complementar dividida +150° +210°
- 5D5153
Sophisticated Plum
- 4E5751
≈ Black Spruce
- 4B575A
≈ Urbanite
Tétrade +90° +180° +270°
- 5D5153
Sophisticated Plum
- 57554B
≈ Shell Brown
- 4B5856
≈ Black Spruce
- 52545E
≈ Coal Tipple
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 7.58:1 · APCA Lc 86
Ag
FailSobre preto
WCAG 2.76:1 · APCA Lc 16
Melhor cor de texto: #FFFFFF
WCAG 7.58:1 (AAA) · APCA Lc 86
Contrast pairs
Trechos de código
CSS
:root {
--sophisticated-plum: #5d5153;
--sophisticated-plum-rgb: 93 81 83;
--sophisticated-plum-oklch: oklch(0.447 0.016 6.4);
}
.element {
color: var(--sophisticated-plum);
background-color: hsl(350 7% 34%);
border-color: oklch(0.447 0.016 6.4);
}Tailwind CSS v4
@theme {
--color-sophisticated-plum: #5d5153;
--color-sophisticated-plum-50: #faf3f4;
--color-sophisticated-plum-100: #ede6e7;
--color-sophisticated-plum-200: #dbd1d3;
--color-sophisticated-plum-300: #bfb4b6;
--color-sophisticated-plum-400: #a89b9d;
--color-sophisticated-plum-500: #908284;
--color-sophisticated-plum-600: #7a6e70;
--color-sophisticated-plum-700: #62585a;
--color-sophisticated-plum-800: #484042;
--color-sophisticated-plum-900: #322c2d;
--color-sophisticated-plum-950: #1e191a;
}SCSS
$sophisticated-plum: #5d5153;
$sophisticated-plum-rgb: 93, 81, 83;
$sophisticated-plum-light: mix(#fff, $sophisticated-plum, 20%);
$sophisticated-plum-dark: mix(#000, $sophisticated-plum, 20%);
.element {
color: $sophisticated-plum;
box-shadow: 0 0 0 2px rgba($sophisticated-plum, 0.35);
}