命名颜色 · #4466EE
The Rainbow Fish
The Rainbow Fish 即 #4466EE：rgb(68 102 238)、hsl(228 83% 60%)、oklch(0.565 0.208 268.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · The Rainbow Fish color name →
#4466EE
oklch(0.565 0.208 268.3)
颜色转换
- HEX
- #4466ee
- RGB
- rgb(68 102 238)
- HSL
- hsl(228 83% 60%)
- HWB
- hwb(228 27% 7%)
- OKLCH
- oklch(0.565 0.208 268.3)
- OKLab
- oklab(0.565 -0.006 -0.208)
- CIE Lab
- lab(46.97 23.92 -73.68)
- LCH
- lch(46.97 77.46 288)
- CMYK
- cmyk(71% 57% 0% 7%)
浅色调 · 深色调 · 灰色调
浅色调
- 5477F1
- 6588F4
- 7797F7
- 89A7FA
- 9CB6FC
- AFC5FD
- C3D3FE
- D6E2FF
- EBF1FF
深色调
- 3A58CF
- 304AB1
- 263C93
- 1D2F77
- 14235C
- 0C1742
- 050C2A
- 020414
- 000003
灰色调
- 496BE4
- 4F6FD9
- 5572CE
- 5B75C4
- 6178B9
- 677AAE
- 6D7CA3
- 737E98
- 7A7F8C
配色和谐
互补色 +180°
- 4466EE
The Rainbow Fish
- 927100
≈ Vermin Brown
类似色 -30° +30°
- 4466EE
The Rainbow Fish
- 007FB7
≈ Meissen Blue
- 894EDD
≈ Gloomy Purple
三角配色 +120° +240°
- 4466EE
The Rainbow Fish
- D52822
≈ Tomato Burst
- 008E39
≈ Viper Green
分裂互补色 +150° +210°
- 4466EE
The Rainbow Fish
- AF5E00
≈ Orange Brown
- 6F8000
≈ Verde Tropa
四角配色 +90° +180° +270°
- 4466EE
The Rainbow Fish
- CD2575
≈ Prince Charming
- 927100
≈ Vermin Brown
- 008A76
≈ Emerald Enchantment
对比度与无障碍
Ag
AA白底
WCAG 4.79:1 · APCA Lc 73
Ag
Fail黑底
WCAG 4.38:1 · APCA Lc 29
最佳文字颜色: #FFFFFF
WCAG 4.79:1 (AA) · APCA Lc 73
Contrast pairs
代码片段
CSS
:root {
--the-rainbow-fish: #4466ee;
--the-rainbow-fish-rgb: 68 102 238;
--the-rainbow-fish-oklch: oklch(0.565 0.208 268.3);
}
.element {
color: var(--the-rainbow-fish);
background-color: hsl(228 83% 60%);
border-color: oklch(0.565 0.208 268.3);
}Tailwind CSS v4
@theme {
--color-the-rainbow-fish: #4466ee;
--color-the-rainbow-fish-50: #def3ff;
--color-the-rainbow-fish-100: #cde5ff;
--color-the-rainbow-fish-200: #b2cfff;
--color-the-rainbow-fish-300: #8fafff;
--color-the-rainbow-fish-400: #6b93ff;
--color-the-rainbow-fish-500: #4e74ff;
--color-the-rainbow-fish-600: #4263e3;
--color-the-rainbow-fish-700: #344fb7;
--color-the-rainbow-fish-800: #213a89;
--color-the-rainbow-fish-900: #152861;
--color-the-rainbow-fish-950: #081543;
}SCSS
$the-rainbow-fish: #4466ee;
$the-rainbow-fish-rgb: 68, 102, 238;
$the-rainbow-fish-light: mix(#fff, $the-rainbow-fish, 20%);
$the-rainbow-fish-dark: mix(#000, $the-rainbow-fish, 20%);
.element {
color: $the-rainbow-fish;
box-shadow: 0 0 0 2px rgba($the-rainbow-fish, 0.35);
}