命名颜色 · #0485D1
Calgar Blue
Calgar Blue 即 #0485D1：rgb(4 133 209)、hsl(202 96% 42%)、oklch(0.596 0.149 245.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Calgar Blue color name →
#0485D1
oklch(0.596 0.149 245.1)
颜色转换
- HEX
- #0485d1
- RGB
- rgb(4 133 209)
- HSL
- hsl(202 96% 42%)
- HWB
- hwb(202 2% 18%)
- OKLCH
- oklch(0.596 0.149 245.1)
- OKLab
- oklab(0.596 -0.063 -0.135)
- CIE Lab
- lab(52.63 -8.95 -48.41)
- LCH
- lch(52.63 49.23 259.5)
- CMYK
- cmyk(98% 36% 0% 18%)
浅色调 · 深色调 · 灰色调
浅色调
- 3592D6
- 519EDC
- 69AAE1
- 7FB7E6
- 95C3EA
- AACFEF
- BFDBF3
- D5E7F7
- EAF3FB
深色调
- 0373B5
- 02619B
- 015081
- 014068
- 003050
- 002139
- 001323
- 000610
- 000102
灰色调
- 2685C9
- 3785C1
- 4485B9
- 4F85B1
- 5984A9
- 6284A1
- 6A8399
- 728291
- 798189
配色和谐
互补色 +180°
- 0485D1
Calgar Blue
- B46B00
≈ Indocile Tiger
类似色 -30° +30°
- 0485D1
Calgar Blue
- 008EA6
≈ Parrot Flight
- 6774D6
≈ C64 Purple
三角配色 +120° +240°
- 0485D1
Calgar Blue
- C55273
≈ Ripe Cherry
- 6B8D02
≈ Canopy
分裂互补色 +150° +210°
- 0485D1
Calgar Blue
- C8583C
≈ Cinnamon Stone
- 967D00
≈ Moscow Papyrus
四角配色 +90° +180° +270°
- 0485D1
Calgar Blue
- B358A2
≈ Magenta Memoir
- B46B00
≈ Indocile Tiger
- 009856
≈ Garnish
对比度与无障碍
Ag
Fail白底
WCAG 3.97:1 · APCA Lc 66
Ag
AA黑底
WCAG 5.28:1 · APCA Lc 35
最佳文字颜色: #000000
WCAG 5.28:1 (AA) · APCA Lc 35
Contrast pairs
代码片段
CSS
:root {
--calgar-blue: #0485d1;
--calgar-blue-rgb: 4 133 209;
--calgar-blue-oklch: oklch(0.596 0.149 245.1);
}
.element {
color: var(--calgar-blue);
background-color: hsl(202 96% 42%);
border-color: oklch(0.596 0.149 245.1);
}Tailwind CSS v4
@theme {
--color-calgar-blue: #0485d1;
--color-calgar-blue-50: #d4faff;
--color-calgar-blue-100: #c0edff;
--color-calgar-blue-200: #a0dbff;
--color-calgar-blue-300: #75beff;
--color-calgar-blue-400: #44a6f0;
--color-calgar-blue-500: #008ce1;
--color-calgar-blue-600: #0077be;
--color-calgar-blue-700: #005f99;
--color-calgar-blue-800: #004671;
--color-calgar-blue-900: #003150;
--color-calgar-blue-950: #001d35;
}SCSS
$calgar-blue: #0485d1;
$calgar-blue-rgb: 4, 133, 209;
$calgar-blue-light: mix(#fff, $calgar-blue, 20%);
$calgar-blue-dark: mix(#000, $calgar-blue, 20%);
.element {
color: $calgar-blue;
box-shadow: 0 0 0 2px rgba($calgar-blue, 0.35);
}