Color con nombre · #555B53
Midnight Spruce
Midnight Spruce es #555B53: rgb(85 91 83), hsl(105 5% 34%), oklch(0.463 0.015 137.8). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Midnight Spruce color name →
#555B53
oklch(0.463 0.015 137.8)
Conversiones de color
- HEX
- #555b53
- RGB
- rgb(85 91 83)
- HSL
- hsl(105 5% 34%)
- HWB
- hwb(105 33% 64%)
- OKLCH
- oklch(0.463 0.015 137.8)
- OKLab
- oklab(0.463 -0.011 0.01)
- CIE Lab
- lab(37.92 -3.73 3.78)
- LCH
- lch(37.92 5.3 134.6)
- CMYK
- cmyk(7% 0% 9% 64%)
Tintes · Sombras · Tonos
Tintes
- 646A63
- 747973
- 848983
- 959994
- A6A9A5
- B7BAB6
- C9CBC8
- DBDCDA
- EDEDEC
Sombras
- 494E47
- 3D413B
- 313530
- 262925
- 1C1E1B
- 111311
- 080908
- 020302
- 000000
Tonos
- 595F57
- 5D625C
- 626660
- 666A65
- 6A6D69
- 6E716E
- 737572
- 777877
- 7C7C7B
Armonías de color
Complementario +180°
- 555B53
Midnight Spruce
- 5C565E
≈ Rabbit
Análogo -30° +30°
- 555B53
Midnight Spruce
- 595A50
≈ Osiris
- 515C57
≈ Evergreen Bough
Triádico +120° +240°
- 555B53
Midnight Spruce
- 545961
≈ Blued Steel
- 615656
≈ Rix
Complementario dividido +150° +210°
- 555B53
Midnight Spruce
- 585861
≈ Midnight Badger
- 60565A
≈ Rabbit
Tetrádico +90° +180° +270°
- 555B53
Midnight Spruce
- 515B60
≈ Novelty Navy
- 5C565E
≈ Rabbit
- 605752
≈ Pure Zeal
Contraste y accesibilidad
Ag
AASobre blanco
WCAG 6.98:1 · APCA Lc 84
Ag
FailSobre negro
WCAG 3.00:1 · APCA Lc 18
Mejor color de texto: #FFFFFF
WCAG 6.98:1 (AA) · APCA Lc 84
Contrast pairs
Fragmentos de código
CSS
:root {
--midnight-spruce: #555b53;
--midnight-spruce-rgb: 85 91 83;
--midnight-spruce-oklch: oklch(0.463 0.015 137.8);
}
.element {
color: var(--midnight-spruce);
background-color: hsl(105 5% 34%);
border-color: oklch(0.463 0.015 137.8);
}Tailwind CSS v4
@theme {
--color-midnight-spruce: #555b53;
--color-midnight-spruce-50: #f3f6f2;
--color-midnight-spruce-100: #e5e9e4;
--color-midnight-spruce-200: #d1d6d0;
--color-midnight-spruce-300: #b4b9b2;
--color-midnight-spruce-400: #9aa198;
--color-midnight-spruce-500: #82897f;
--color-midnight-spruce-600: #6e746c;
--color-midnight-spruce-700: #585c56;
--color-midnight-spruce-800: #40443f;
--color-midnight-spruce-900: #2c2f2b;
--color-midnight-spruce-950: #191b18;
}SCSS
$midnight-spruce: #555b53;
$midnight-spruce-rgb: 85, 91, 83;
$midnight-spruce-light: mix(#fff, $midnight-spruce, 20%);
$midnight-spruce-dark: mix(#000, $midnight-spruce, 20%);
.element {
color: $midnight-spruce;
box-shadow: 0 0 0 2px rgba($midnight-spruce, 0.35);
}