最接近的命名颜色 · #DEF0FD
#DEF0FD
最接近的命名颜色: Celestial Cathedral
#DEF0FD（rgb(222 240 253)、hsl(205 89% 93%)、oklch(0.946 0.026 239.1)）最接近命名颜色 Celestial Cathedral。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#DEF0FD
oklch(0.946 0.026 239.1)
颜色转换
- HEX
- #def0fd
- RGB
- rgb(222 240 253)
- HSL
- hsl(205 89% 93%)
- HWB
- hwb(205 87% 1%)
- OKLCH
- oklch(0.946 0.026 239.1)
- OKLab
- oklab(0.946 -0.013 -0.022)
- CIE Lab
- lab(93.74 -4.25 -8.42)
- LCH
- lch(93.74 9.44 243.2)
- CMYK
- cmyk(12% 5% 0% 1%)
浅色调 · 深色调 · 灰色调
浅色调
- E1F2FD
- E5F3FD
- E8F5FE
- EBF6FE
- EFF8FE
- F2F9FE
- F5FBFE
- F8FCFF
- FCFEFF
深色调
- C1D1DC
- A5B2BC
- 89959D
- 6F787F
- 555D62
- 3D4347
- 262A2D
- 121416
- 020303
灰色调
- D4E4F0
- CBD9E3
- C1CDD6
- B7C2C9
- AEB6BD
- A5ABB0
- 9BA0A4
- 929598
- 898B8C
配色和谐
互补色 +180°
- DEF0FD
Celestial Cathedral
- FBE9DC
≈ Pink Blossom
类似色 -30° +30°
- DEF0FD
Celestial Cathedral
- DAF2F6
≈ Let It Snow
- E6EDFF
≈ Brilliant White
三角配色 +120° +240°
- DEF0FD
Celestial Cathedral
- FDE6EC
≈ Nosegay
- EBF0DD
≈ Nursery Green
分裂互补色 +150° +210°
- DEF0FD
Celestial Cathedral
- FEE7E3
≈ Spirited Away
- F4EDDA
≈ Satin Weave
四角配色 +90° +180° +270°
- DEF0FD
Celestial Cathedral
- F7E7F6
≈ Cherry Pearl
- FBE9DC
≈ Pink Blossom
- E2F2E4
≈ Frosted Mint
对比度与无障碍
Ag
Fail白底
WCAG 1.16:1 · APCA Lc 8
Ag
AAA黑底
WCAG 17.98:1 · APCA Lc 96
最佳文字颜色: #000000
WCAG 17.98:1 (AAA) · APCA Lc 96
Contrast pairs
代码片段
CSS
:root {
--celestial-cathedral: #def0fd;
--celestial-cathedral-rgb: 222 240 253;
--celestial-cathedral-oklch: oklch(0.946 0.026 239.1);
}
.element {
color: var(--celestial-cathedral);
background-color: hsl(205 89% 93%);
border-color: oklch(0.946 0.026 239.1);
}Tailwind CSS v4
@theme {
--color-celestial-cathedral: #def0fd;
--color-celestial-cathedral-50: #eff6fc;
--color-celestial-cathedral-100: #e1e9f0;
--color-celestial-cathedral-200: #cbd6df;
--color-celestial-cathedral-300: #acb9c4;
--color-celestial-cathedral-400: #91a1ac;
--color-celestial-cathedral-500: #778996;
--color-celestial-cathedral-600: #65747f;
--color-celestial-cathedral-700: #505d65;
--color-celestial-cathedral-800: #3a444a;
--color-celestial-cathedral-900: #282f34;
--color-celestial-cathedral-950: #161b1f;
}SCSS
$celestial-cathedral: #def0fd;
$celestial-cathedral-rgb: 222, 240, 253;
$celestial-cathedral-light: mix(#fff, $celestial-cathedral, 20%);
$celestial-cathedral-dark: mix(#000, $celestial-cathedral, 20%);
.element {
color: $celestial-cathedral;
box-shadow: 0 0 0 2px rgba($celestial-cathedral, 0.35);
}