命名颜色 · #99AAFF
Widowmaker
Widowmaker 即 #99AAFF：rgb(153 170 255)、hsl(230 100% 80%)、oklch(0.759 0.124 274.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Widowmaker color name →
#99AAFF
oklch(0.759 0.124 274.5)
颜色转换
- HEX
- #99aaff
- RGB
- rgb(153 170 255)
- HSL
- hsl(230 100% 80%)
- HWB
- hwb(230 60% 0%)
- OKLCH
- oklch(0.759 0.124 274.5)
- OKLab
- oklab(0.759 0.01 -0.123)
- CIE Lab
- lab(70.85 9.65 -44.65)
- LCH
- lch(70.85 45.68 282.2)
- CMYK
- cmyk(40% 33% 0% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- A3B3FF
- ACBBFF
- B6C4FF
- C0CCFF
- CAD5FF
- D5DDFF
- DFE6FF
- EAEEFF
- F4F7FF
深色调
- 8493DE
- 707DBE
- 5D689E
- 4A5380
- 383F63
- 272D48
- 171B2E
- 080B16
- 010103
灰色调
- 96A6F2
- 94A2E5
- 919ED8
- 8F9ACC
- 8C96BF
- 8A91B2
- 878DA6
- 858999
- 82848D
配色和谐
互补色 +180°
- 99AAFF
Widowmaker
- CAAF4A
≈ Hollywood
类似色 -30° +30°
- 99AAFF
Widowmaker
- 67B8FA
≈ Hello Summer
- C29CF0
≈ Lavender Cream
三角配色 +120° +240°
- 99AAFF
Widowmaker
- F4937B
≈ Indian Dance
- 6BC88D
≈ Green Gala
分裂互补色 +150° +210°
- 99AAFF
Widowmaker
- E79F56
≈ Pumpkin Pie
- A0BE62
≈ Chinese Money Plant
四角配色 +90° +180° +270°
- 99AAFF
Widowmaker
- F28EA7
≈ Astilbe
- CAAF4A
≈ Hollywood
- 32CABA
≈ Exquisite Turquoise
对比度与无障碍
Ag
Fail白底
WCAG 2.19:1 · APCA Lc 43
Ag
AAA黑底
WCAG 9.54:1 · APCA Lc 59
最佳文字颜色: #000000
WCAG 9.54:1 (AAA) · APCA Lc 59
Contrast pairs
代码片段
CSS
:root {
--widowmaker: #99aaff;
--widowmaker-rgb: 153 170 255;
--widowmaker-oklch: oklch(0.759 0.124 274.5);
}
.element {
color: var(--widowmaker);
background-color: hsl(230 100% 80%);
border-color: oklch(0.759 0.124 274.5);
}Tailwind CSS v4
@theme {
--color-widowmaker: #99aaff;
--color-widowmaker-50: #ebf3ff;
--color-widowmaker-100: #dce5ff;
--color-widowmaker-200: #c6d0ff;
--color-widowmaker-300: #a6b2f7;
--color-widowmaker-400: #8898e7;
--color-widowmaker-500: #6e7dd7;
--color-widowmaker-600: #5d6ab6;
--color-widowmaker-700: #4a5592;
--color-widowmaker-800: #343e6d;
--color-widowmaker-900: #232b4d;
--color-widowmaker-950: #121833;
}SCSS
$widowmaker: #99aaff;
$widowmaker-rgb: 153, 170, 255;
$widowmaker-light: mix(#fff, $widowmaker, 20%);
$widowmaker-dark: mix(#000, $widowmaker, 20%);
.element {
color: $widowmaker;
box-shadow: 0 0 0 2px rgba($widowmaker, 0.35);
}