Color con nombre · #BFBCD2
Twilight Pearl
Twilight Pearl es #BFBCD2: rgb(191 188 210), hsl(248 20% 78%), oklch(0.805 0.031 292). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Twilight Pearl color name →
#BFBCD2
oklch(0.805 0.031 292)
Conversiones de color
- HEX
- #bfbcd2
- RGB
- rgb(191 188 210)
- HSL
- hsl(248 20% 78%)
- HWB
- hwb(248 74% 18%)
- OKLCH
- oklch(0.805 0.031 292)
- OKLab
- oklab(0.805 0.012 -0.029)
- CIE Lab
- lab(77.01 4.25 -10.7)
- LCH
- lch(77.01 11.52 291.7)
- CMYK
- cmyk(9% 10% 0% 18%)
Tintes · Sombras · Tonos
Tintes
- C5C3D6
- CBC9DB
- D2D0DF
- D8D6E4
- DFDDE8
- E5E4ED
- EBEBF1
- F2F1F6
- F8F8FA
Sombras
- A6A3B6
- 8D8B9B
- 757381
- 5E5D68
- 484750
- 333239
- 1F1F24
- 0D0D10
- 020202
Tonos
- B8B6CA
- B2B0C1
- ACAAB9
- A5A4B0
- 9F9EA8
- 9998A0
- 929298
- 8C8C90
- 868688
Armonías de color
Complementario +180°
- BFBCD2
Twilight Pearl
- BFC2AB
≈ Jungle Moss
Análogo -30° +30°
- BFBCD2
Twilight Pearl
- B4C0D4
≈ Snow Flurries
- C9B9CB
≈ Last of the Lilacs
Triádico +120° +240°
- BFBCD2
Twilight Pearl
- D0BAAD
≈ Corkscrew Willow
- ACC6BD
≈ Sparkling Lake
Complementario dividido +150° +210°
- BFBCD2
Twilight Pearl
- C9BEA9
≈ Khaki Shell
- B4C5B2
≈ Zanah
Tetrádico +90° +180° +270°
- BFBCD2
Twilight Pearl
- D3B8B6
≈ Mediterranean Sunset
- BFC2AB
≈ Jungle Moss
- A9C6C8
≈ Spring Storm
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.85:1 · APCA Lc 35
Ag
AAASobre negro
WCAG 11.33:1 · APCA Lc 68
Mejor color de texto: #000000
WCAG 11.33:1 (AAA) · APCA Lc 68
Contrast pairs
Fragmentos de código
CSS
:root {
--twilight-pearl: #bfbcd2;
--twilight-pearl-rgb: 191 188 210;
--twilight-pearl-oklch: oklch(0.805 0.031 292);
}
.element {
color: var(--twilight-pearl);
background-color: hsl(248 20% 78%);
border-color: oklch(0.805 0.031 292);
}Tailwind CSS v4
@theme {
--color-twilight-pearl: #bfbcd2;
--color-twilight-pearl-50: #f5f4fd;
--color-twilight-pearl-100: #e8e6f1;
--color-twilight-pearl-200: #d4d2e1;
--color-twilight-pearl-300: #b8b5c6;
--color-twilight-pearl-400: #9e9bb0;
--color-twilight-pearl-500: #868399;
--color-twilight-pearl-600: #716f82;
--color-twilight-pearl-700: #5b5968;
--color-twilight-pearl-800: #42414d;
--color-twilight-pearl-900: #2d2d35;
--color-twilight-pearl-950: #1a1a20;
}SCSS
$twilight-pearl: #bfbcd2;
$twilight-pearl-rgb: 191, 188, 210;
$twilight-pearl-light: mix(#fff, $twilight-pearl, 20%);
$twilight-pearl-dark: mix(#000, $twilight-pearl, 20%);
.element {
color: $twilight-pearl;
box-shadow: 0 0 0 2px rgba($twilight-pearl, 0.35);
}