Color con nombre más cercano · #F9EDFF
#F9EDFF
Color con nombre más cercano: Holographic Lavender
#F9EDFF (rgb(249 237 255), hsl(280 100% 96%), oklch(0.961 0.027 314.7)) se parece más al color con nombre Holographic Lavender. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#F9EDFF
oklch(0.961 0.027 314.7)
Conversiones de color
- HEX
- #f9edff
- RGB
- rgb(249 237 255)
- HSL
- hsl(280 100% 96%)
- HWB
- hwb(280 93% 0%)
- OKLCH
- oklch(0.961 0.027 314.7)
- OKLab
- oklab(0.961 0.019 -0.019)
- CIE Lab
- lab(95.1 6.54 -7.18)
- LCH
- lch(95.1 9.72 312.3)
- CMYK
- cmyk(2% 7% 0% 0%)
Tintes · Sombras · Tonos
Tintes
- FAEFFF
- FAF1FF
- FBF2FF
- FBF4FF
- FCF6FF
- FDF8FF
- FDFAFF
- FEFBFF
- FEFDFF
Sombras
- D9CEDE
- B9B0BE
- 9A939E
- 7D7780
- 615C63
- 464248
- 2C2A2E
- 151416
- 030303
Tonos
- ECE2F2
- E0D6E4
- D3CBD7
- C7C0CA
- BBB5BE
- AFAAB1
- A39FA4
- 979598
- 8B8A8C
Armonías de color
Complementario +180°
- F9EDFF
Holographic Lavender
- EBF6E4
≈ Panache
Análogo -30° +30°
- F9EDFF
Holographic Lavender
- F0F1FF
≈ Cloud Break
- FFECF6
≈ Partial Pink
Triádico +120° +240°
- F9EDFF
Holographic Lavender
- FDF0DF
≈ Award Winning White
- DEF8F7
≈ Frosty Mint
Complementario dividido +150° +210°
- F9EDFF
Holographic Lavender
- F4F3DF
≈ Full Moon
- E2F8ED
≈ Frosty Mint
Tetrádico +90° +180° +270°
- F9EDFF
Holographic Lavender
- FFEEE7
≈ Peach Breeze
- EBF6E4
≈ Panache
- E1F6FF
≈ Glacial Day
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.12:1 · APCA Lc 0
Ag
AAASobre negro
WCAG 18.58:1 · APCA Lc 99
Mejor color de texto: #000000
WCAG 18.58:1 (AAA) · APCA Lc 99
Contrast pairs
Fragmentos de código
CSS
:root {
--holographic-lavender: #f9edff;
--holographic-lavender-rgb: 249 237 255;
--holographic-lavender-oklch: oklch(0.961 0.027 314.7);
}
.element {
color: var(--holographic-lavender);
background-color: hsl(280 100% 96%);
border-color: oklch(0.961 0.027 314.7);
}Tailwind CSS v4
@theme {
--color-holographic-lavender: #f9edff;
--color-holographic-lavender-50: #f8f3fa;
--color-holographic-lavender-100: #ece5ee;
--color-holographic-lavender-200: #d9d1dc;
--color-holographic-lavender-300: #bdb3c1;
--color-holographic-lavender-400: #a49aaa;
--color-holographic-lavender-500: #8d8193;
--color-holographic-lavender-600: #776d7c;
--color-holographic-lavender-700: #5f5763;
--color-holographic-lavender-800: #464049;
--color-holographic-lavender-900: #302c33;
--color-holographic-lavender-950: #1c191e;
}SCSS
$holographic-lavender: #f9edff;
$holographic-lavender-rgb: 249, 237, 255;
$holographic-lavender-light: mix(#fff, $holographic-lavender, 20%);
$holographic-lavender-dark: mix(#000, $holographic-lavender, 20%);
.element {
color: $holographic-lavender;
box-shadow: 0 0 0 2px rgba($holographic-lavender, 0.35);
}