最接近的命名颜色 · #989AA9
#989AA9
最接近的命名颜色: Too Big to Whale
#989AA9（rgb(152 154 169)、hsl(233 9% 63%)、oklch(0.689 0.022 279.8)）最接近命名颜色 Too Big to Whale。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#989AA9
oklch(0.689 0.022 279.8)
颜色转换
- HEX
- #989aa9
- RGB
- rgb(152 154 169)
- HSL
- hsl(233 9% 63%)
- HWB
- hwb(233 60% 34%)
- OKLCH
- oklch(0.689 0.022 279.8)
- OKLab
- oklab(0.689 0.004 -0.022)
- CIE Lab
- lab(63.8 1.53 -8.12)
- LCH
- lch(63.8 8.26 280.7)
- CMYK
- cmyk(10% 9% 0% 34%)
浅色调 · 深色调 · 灰色调
浅色调
- A2A4B1
- ACADBA
- B6B7C2
- C0C1CB
- CACBD3
- D5D6DC
- DFE0E5
- EAEAED
- F4F5F6
深色调
- 848592
- 70717C
- 5C5E67
- 4A4B53
- 38393F
- 27272C
- 17171B
- 08090A
- 010101
灰色调
- 9697A5
- 9395A1
- 91929D
- 8E9098
- 8C8D94
- 898A90
- 87888C
- 858588
- 828384
配色和谐
互补色 +180°
- 989AA9
Too Big to Whale
- 9E9C8C
≈ Milk Thistle
类似色 -30° +30°
- 989AA9
Too Big to Whale
- 919DA9
≈ Blue Heeler
- 9F98A6
≈ Fortune
三角配色 +120° +240°
- 989AA9
Too Big to Whale
- A89791
≈ Putty Pearl
- 90A096
≈ Verdant Retreat
分裂互补色 +150° +210°
- 989AA9
Too Big to Whale
- A4998D
≈ Grey Flanks
- 979E90
≈ Sycamore Stand
四角配色 +90° +180° +270°
- 989AA9
Too Big to Whale
- A89698
≈ Sunrise Over Tahiti
- 9E9C8C
≈ Milk Thistle
- 8CA09E
≈ Aqua Smoke
对比度与无障碍
Ag
Fail白底
WCAG 2.78:1 · APCA Lc 54
Ag
AAA黑底
WCAG 7.53:1 · APCA Lc 48
最佳文字颜色: #000000
WCAG 7.53:1 (AAA) · APCA Lc 48
Contrast pairs
代码片段
CSS
:root {
--too-big-to-whale: #989aa9;
--too-big-to-whale-rgb: 152 154 169;
--too-big-to-whale-oklch: oklch(0.689 0.022 279.8);
}
.element {
color: var(--too-big-to-whale);
background-color: hsl(233 9% 63%);
border-color: oklch(0.689 0.022 279.8);
}Tailwind CSS v4
@theme {
--color-too-big-to-whale: #989aa9;
--color-too-big-to-whale-50: #f4f4fb;
--color-too-big-to-whale-100: #e6e7ef;
--color-too-big-to-whale-200: #d2d3de;
--color-too-big-to-whale-300: #b5b6c3;
--color-too-big-to-whale-400: #9b9dac;
--color-too-big-to-whale-500: #838595;
--color-too-big-to-whale-600: #6f707e;
--color-too-big-to-whale-700: #595a65;
--color-too-big-to-whale-800: #40424a;
--color-too-big-to-whale-900: #2c2d33;
--color-too-big-to-whale-950: #191a1f;
}SCSS
$too-big-to-whale: #989aa9;
$too-big-to-whale-rgb: 152, 154, 169;
$too-big-to-whale-light: mix(#fff, $too-big-to-whale, 20%);
$too-big-to-whale-dark: mix(#000, $too-big-to-whale, 20%);
.element {
color: $too-big-to-whale;
box-shadow: 0 0 0 2px rgba($too-big-to-whale, 0.35);
}