Color con nombre más cercano · #DEF0FD
#DEF0FD
Color con nombre más cercano: Celestial Cathedral
#DEF0FD (rgb(222 240 253), hsl(205 89% 93%), oklch(0.946 0.026 239.1)) se parece más al color con nombre Celestial Cathedral. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#DEF0FD
oklch(0.946 0.026 239.1)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- E1F2FD
- E5F3FD
- E8F5FE
- EBF6FE
- EFF8FE
- F2F9FE
- F5FBFE
- F8FCFF
- FCFEFF
Sombras
- C1D1DC
- A5B2BC
- 89959D
- 6F787F
- 555D62
- 3D4347
- 262A2D
- 121416
- 020303
Tonos
- D4E4F0
- CBD9E3
- C1CDD6
- B7C2C9
- AEB6BD
- A5ABB0
- 9BA0A4
- 929598
- 898B8C
Armonías de color
Complementario +180°
- DEF0FD
Celestial Cathedral
- FBE9DC
≈ Pink Blossom
Análogo -30° +30°
- DEF0FD
Celestial Cathedral
- DAF2F6
≈ Let It Snow
- E6EDFF
≈ Brilliant White
Triádico +120° +240°
- DEF0FD
Celestial Cathedral
- FDE6EC
≈ Nosegay
- EBF0DD
≈ Nursery Green
Complementario dividido +150° +210°
- DEF0FD
Celestial Cathedral
- FEE7E3
≈ Spirited Away
- F4EDDA
≈ Satin Weave
Tetrádico +90° +180° +270°
- DEF0FD
Celestial Cathedral
- F7E7F6
≈ Cherry Pearl
- FBE9DC
≈ Pink Blossom
- E2F2E4
≈ Frosted Mint
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.16:1 · APCA Lc 8
Ag
AAASobre negro
WCAG 17.98:1 · APCA Lc 96
Mejor color de texto: #000000
WCAG 17.98:1 (AAA) · APCA Lc 96
Contrast pairs
Fragmentos de código
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);
}