命名颜色 · #A1A196
Grey Expose
Grey Expose 即 #A1A196:rgb(161 161 150)、hsl(60 6% 61%)、oklch(0.706 0.016 106.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Grey Expose color name →
#A1A196
oklch(0.706 0.016 106.8)
颜色转换
- HEX
- #a1a196
- RGB
- rgb(161 161 150)
- HSL
- hsl(60 6% 61%)
- HWB
- hwb(60 59% 37%)
- OKLCH
- oklch(0.706 0.016 106.8)
- OKLab
- oklab(0.706 -0.005 0.015)
- CIE Lab
- lab(66 -1.51 5.75)
- LCH
- lch(66 5.95 104.7)
- CMYK
- cmyk(0% 0% 7% 37%)
浅色调 · 深色调 · 灰色调
浅色调
- AAAAA0
- B3B3AA
- BCBCB4
- C6C6BF
- CFCFC9
- D8D8D4
- E2E2DE
- ECECE9
- F5F5F4
深色调
- 8B8B82
- 76766E
- 62625B
- 4E4E49
- 3C3C37
- 2A2A26
- 191916
- 090908
- 010101
灰色调
- 9E9E94
- 9A9A92
- 97978F
- 94948D
- 90908B
- 8D8D89
- 8A8A87
- 868684
- 838382
配色和谐
互补色 +180°
- A1A196
Grey Expose
- 9F9FAA
≈ Amethyst Haze
类似色 -30° +30°
- A1A196
Grey Expose
- A69F96
≈ Cloudy Today
- 9CA399
≈ Nature’s Gift
三角配色 +120° +240°
- A1A196
Grey Expose
- 97A2A8
≈ Metropolis Mood
- A89CA2
≈ Laylock
分裂互补色 +150° +210°
- A1A196
Grey Expose
- 9AA1AA
≈ Grey Wolf
- A49DA7
≈ Silver Sconce
四角配色 +90° +180° +270°
- A1A196
Grey Expose
- 96A3A3
≈ Dusty Dream
- 9F9FAA
≈ Amethyst Haze
- AA9C9D
≈ Coffee Custard
对比度与无障碍
Ag
Fail白底
WCAG 2.60:1 · APCA Lc 51
Ag
AAA黑底
WCAG 8.05:1 · APCA Lc 51
最佳文字颜色: #000000
WCAG 8.05:1 (AAA) · APCA Lc 51
Contrast pairs
代码片段
CSS
:root {
--grey-expose: #a1a196;
--grey-expose-rgb: 161 161 150;
--grey-expose-oklch: oklch(0.706 0.016 106.8);
}
.element {
color: var(--grey-expose);
background-color: hsl(60 6% 61%);
border-color: oklch(0.706 0.016 106.8);
}Tailwind CSS v4
@theme {
--color-grey-expose: #a1a196;
--color-grey-expose-50: #f5f5f0;
--color-grey-expose-100: #e8e8e2;
--color-grey-expose-200: #d4d5cd;
--color-grey-expose-300: #b8b8af;
--color-grey-expose-400: #9f9f95;
--color-grey-expose-500: #87877b;
--color-grey-expose-600: #727268;
--color-grey-expose-700: #5b5b53;
--color-grey-expose-800: #43433d;
--color-grey-expose-900: #2e2e2a;
--color-grey-expose-950: #1b1b17;
}SCSS
$grey-expose: #a1a196;
$grey-expose-rgb: 161, 161, 150;
$grey-expose-light: mix(#fff, $grey-expose, 20%);
$grey-expose-dark: mix(#000, $grey-expose, 20%);
.element {
color: $grey-expose;
box-shadow: 0 0 0 2px rgba($grey-expose, 0.35);
}