命名颜色 · #746E6A
Abandoned Playground
Abandoned Playground 即 #746E6A：rgb(116 110 106)、hsl(24 5% 44%)、oklch(0.542 0.01 56.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Abandoned Playground color name →
#746E6A
oklch(0.542 0.01 56.2)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- 817B78
- 8E8986
- 9C9794
- A9A5A3
- B7B4B2
- C5C2C1
- D3D1D0
- E2E0DF
- F0F0EF
深色调
- 645F5B
- 54504D
- 45413F
- 373331
- 292624
- 1B1918
- 0F0E0D
- 050404
- 010100
灰色调
- 75706C
- 76726E
- 787371
- 797573
- 7A7775
- 7B7977
- 7C7B79
- 7E7C7C
- 7F7E7E
配色和谐
互补色 +180°
- 746E6A
Abandoned Playground
- 6A7074
≈ Bottlenose Dolphin
类似色 -30° +30°
- 746E6A
Abandoned Playground
- 756D6C
≈ Emu
- 726F69
≈ Light Charcoal
三角配色 +120° +240°
- 746E6A
Abandoned Playground
- 6A716F
≈ Almost Charcoal
- 706E74
≈ Smoked Pearl
分裂互补色 +150° +210°
- 746E6A
Abandoned Playground
- 697172
≈ Rich Pewter
- 6D6F75
≈ High-Speed Steel
四角配色 +90° +180° +270°
- 746E6A
Abandoned Playground
- 6C716C
≈ Sea Grove
- 6A7074
≈ Bottlenose Dolphin
- 726D72
≈ Wetbar
对比度与无障碍
Ag
AA白底
WCAG 5.02:1 · APCA Lc 75
Ag
Fail黑底
WCAG 4.18:1 · APCA Lc 27
最佳文字颜色: #FFFFFF
WCAG 5.02:1 (AA) · APCA Lc 75
Contrast pairs
代码片段
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);
}