命名颜色 · #00AAFF
Protoss Pylon
Protoss Pylon 即 #00AAFF：rgb(0 170 255)、hsl(200 100% 50%)、oklch(0.707 0.168 242)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Protoss Pylon color name →
#00AAFF
oklch(0.707 0.168 242)
颜色转换
- HEX
- #00aaff
- RGB
- rgb(0 170 255)
- HSL
- hsl(200 100% 50%)
- HWB
- hwb(200 0% 0%)
- OKLCH
- oklch(0.707 0.168 242)
- OKLab
- oklab(0.707 -0.079 -0.148)
- CIE Lab
- lab(65.65 -13.95 -53.22)
- LCH
- lch(65.65 55.02 255.3)
- CMYK
- cmyk(100% 33% 0% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- 3DB3FF
- 5BBCFF
- 73C5FF
- 89CEFF
- 9ED6FF
- B2DFFF
- C6E7FF
- D9EFFF
- ECF7FF
深色调
- 0093DE
- 007DBE
- 00689E
- 005380
- 003F63
- 002D48
- 001B2E
- 000B16
- 000103
灰色调
- 2CA6F2
- 3FA3E5
- 4C9FD9
- 579BCC
- 6097BF
- 6892B3
- 6F8EA6
- 758A99
- 7B858D
配色和谐
互补色 +180°
- 00AAFF
Protoss Pylon
- E68500
≈ Fulvous
类似色 -30° +30°
- 00AAFF
Protoss Pylon
- 00B4CD
≈ Antigua Blue
- 8098FF
≈ Periwinkle Blue
三角配色 +120° +240°
- 00AAFF
Protoss Pylon
- F26D98
≈ God’s Own Junkyard Pink
- 90B011
≈ Sickly Green
分裂互补色 +150° +210°
- 00AAFF
Protoss Pylon
- F7725A
≈ Peach Echo
- C19C00
≈ Rapeseed
四角配色 +90° +180° +270°
- 00AAFF
Protoss Pylon
- DB75CE
≈ French Mauve
- E68500
≈ Fulvous
- 32BD6A
≈ Welsh Onion
对比度与无障碍
Ag
Fail白底
WCAG 2.56:1 · APCA Lc 49
Ag
AAA黑底
WCAG 8.19:1 · APCA Lc 53
最佳文字颜色: #000000
WCAG 8.19:1 (AAA) · APCA Lc 53
Contrast pairs
代码片段
CSS
:root {
--protoss-pylon: #00aaff;
--protoss-pylon-rgb: 0 170 255;
--protoss-pylon-oklch: oklch(0.707 0.168 242);
}
.element {
color: var(--protoss-pylon);
background-color: hsl(200 100% 50%);
border-color: oklch(0.707 0.168 242);
}Tailwind CSS v4
@theme {
--color-protoss-pylon: #00aaff;
--color-protoss-pylon-50: #cdfbff;
--color-protoss-pylon-100: #b8efff;
--color-protoss-pylon-200: #94dcff;
--color-protoss-pylon-300: #64c0ff;
--color-protoss-pylon-400: #1ca8f8;
--color-protoss-pylon-500: #008eea;
--color-protoss-pylon-600: #0078c5;
--color-protoss-pylon-700: #00609f;
--color-protoss-pylon-800: #004776;
--color-protoss-pylon-900: #003153;
--color-protoss-pylon-950: #001d38;
}SCSS
$protoss-pylon: #00aaff;
$protoss-pylon-rgb: 0, 170, 255;
$protoss-pylon-light: mix(#fff, $protoss-pylon, 20%);
$protoss-pylon-dark: mix(#000, $protoss-pylon, 20%);
.element {
color: $protoss-pylon;
box-shadow: 0 0 0 2px rgba($protoss-pylon, 0.35);
}