Color con nombre · #B8A3BB
Svelte
Svelte es #B8A3BB: rgb(184 163 187), hsl(293 15% 69%), oklch(0.741 0.041 322). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Purple mean? → · Svelte color name →
#B8A3BB
oklch(0.741 0.041 322)
Conversiones de color
- HEX
- #b8a3bb
- RGB
- rgb(184 163 187)
- HSL
- hsl(293 15% 69%)
- HWB
- hwb(293 64% 27%)
- OKLCH
- oklch(0.741 0.041 322)
- OKLab
- oklab(0.741 0.033 -0.025)
- CIE Lab
- lab(69.42 11.17 -9.45)
- LCH
- lch(69.42 14.63 319.7)
- CMYK
- cmyk(2% 13% 0% 27%)
Tintes · Sombras · Tonos
Tintes
- BFACC2
- C6B5C8
- CDBECF
- D4C7D6
- DBD0DD
- E2D9E3
- E9E3EA
- F1ECF1
- F8F6F8
Sombras
- A08DA2
- 88788A
- 716373
- 5B4F5C
- 453C46
- 312A32
- 1E191F
- 0C0A0D
- 020102
Tonos
- B29FB5
- AD9CAF
- A798A9
- A195A3
- 9C919D
- 968E97
- 918A91
- 8B878C
- 858386
Armonías de color
Complementario +180°
- B8A3BB
Svelte
- 9DB29A
≈ Copper Patina
Análogo -30° +30°
- B8A3BB
Svelte
- ABA7C4
≈ Eyeshadow Viola
- C1A1AE
≈ Decanting
Triádico +120° +240°
- B8A3BB
Svelte
- B8A98E
≈ Sepia Tone
- 8DB3B6
≈ Artful Aqua
Complementario dividido +150° +210°
- B8A3BB
Svelte
- ABAE91
≈ Olive Sprig
- 92B4A8
≈ Vintage Vessel
Tetrádico +90° +180° +270°
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.33:1 · APCA Lc 46
Ag
AAASobre negro
WCAG 8.99:1 · APCA Lc 56
Mejor color de texto: #000000
WCAG 8.99:1 (AAA) · APCA Lc 56
Contrast pairs
Fragmentos de código
CSS
:root {
--svelte: #b8a3bb;
--svelte-rgb: 184 163 187;
--svelte-oklch: oklch(0.741 0.041 322);
}
.element {
color: var(--svelte);
background-color: hsl(293 15% 69%);
border-color: oklch(0.741 0.041 322);
}Tailwind CSS v4
@theme {
--color-svelte: #b8a3bb;
--color-svelte-50: #fbf1fc;
--color-svelte-100: #efe3f0;
--color-svelte-200: #ddcfde;
--color-svelte-300: #c2b1c4;
--color-svelte-400: #aa97ad;
--color-svelte-500: #947d97;
--color-svelte-600: #7d6a7f;
--color-svelte-700: #645566;
--color-svelte-800: #493e4b;
--color-svelte-900: #332b34;
--color-svelte-950: #1e1820;
}SCSS
$svelte: #b8a3bb;
$svelte-rgb: 184, 163, 187;
$svelte-light: mix(#fff, $svelte, 20%);
$svelte-dark: mix(#000, $svelte, 20%);
.element {
color: $svelte;
box-shadow: 0 0 0 2px rgba($svelte, 0.35);
}