Color con nombre · #746E6A
Abandoned Playground
Abandoned Playground es #746E6A: rgb(116 110 106), hsl(24 5% 44%), oklch(0.542 0.01 56.2). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Abandoned Playground color name →
#746E6A
oklch(0.542 0.01 56.2)
Conversiones de color
- HEX
- #746e6a
- RGB
- rgb(116 110 106)
- HSL
- hsl(24 5% 44%)
- HWB
- hwb(24 42% 55%)
- OKLCH
- oklch(0.542 0.01 56.2)
- OKLab
- oklab(0.542 0.005 0.008)
- CIE Lab
- lab(46.89 1.84 3.12)
- LCH
- lch(46.89 3.62 59.4)
- CMYK
- cmyk(0% 5% 9% 55%)
Tintes · Sombras · Tonos
Tintes
- 817B78
- 8E8986
- 9C9794
- A9A5A3
- B7B4B2
- C5C2C1
- D3D1D0
- E2E0DF
- F0F0EF
Sombras
- 645F5B
- 54504D
- 45413F
- 373331
- 292624
- 1B1918
- 0F0E0D
- 050404
- 010100
Tonos
- 75706C
- 76726E
- 787371
- 797573
- 7A7775
- 7B7977
- 7C7B79
- 7E7C7C
- 7F7E7E
Armonías de color
Complementario +180°
- 746E6A
Abandoned Playground
- 6A7074
≈ Bottlenose Dolphin
Análogo -30° +30°
- 746E6A
Abandoned Playground
- 756D6C
≈ Emu
- 726F69
≈ Light Charcoal
Triádico +120° +240°
- 746E6A
Abandoned Playground
- 6A716F
≈ Almost Charcoal
- 706E74
≈ Smoked Pearl
Complementario dividido +150° +210°
- 746E6A
Abandoned Playground
- 697172
≈ Rich Pewter
- 6D6F75
≈ High-Speed Steel
Tetrádico +90° +180° +270°
- 746E6A
Abandoned Playground
- 6C716C
≈ Sea Grove
- 6A7074
≈ Bottlenose Dolphin
- 726D72
≈ Wetbar
Contraste y accesibilidad
Ag
AASobre blanco
WCAG 5.02:1 · APCA Lc 75
Ag
FailSobre negro
WCAG 4.18:1 · APCA Lc 27
Mejor color de texto: #FFFFFF
WCAG 5.02:1 (AA) · APCA Lc 75
Contrast pairs
Fragmentos de código
CSS
:root {
--abandoned-playground: #746e6a;
--abandoned-playground-rgb: 116 110 106;
--abandoned-playground-oklch: oklch(0.542 0.01 56.2);
}
.element {
color: var(--abandoned-playground);
background-color: hsl(24 5% 44%);
border-color: oklch(0.542 0.01 56.2);
}Tailwind CSS v4
@theme {
--color-abandoned-playground: #746e6a;
--color-abandoned-playground-50: #f7f4f2;
--color-abandoned-playground-100: #eae7e5;
--color-abandoned-playground-200: #d7d3d0;
--color-abandoned-playground-300: #bbb6b3;
--color-abandoned-playground-400: #a39d99;
--color-abandoned-playground-500: #8b8580;
--color-abandoned-playground-600: #76706c;
--color-abandoned-playground-700: #5e5a57;
--color-abandoned-playground-800: #45413f;
--color-abandoned-playground-900: #302d2c;
--color-abandoned-playground-950: #1c1a19;
}SCSS
$abandoned-playground: #746e6a;
$abandoned-playground-rgb: 116, 110, 106;
$abandoned-playground-light: mix(#fff, $abandoned-playground, 20%);
$abandoned-playground-dark: mix(#000, $abandoned-playground, 20%);
.element {
color: $abandoned-playground;
box-shadow: 0 0 0 2px rgba($abandoned-playground, 0.35);
}