Cor nomeada · #EEC3EE
Purple’s Baby Sister
Purple’s Baby Sister é #EEC3EE: rgb(238 195 238), hsl(300 56% 85%), oklch(0.868 0.075 326.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Purple’s Baby Sister color name →
#EEC3EE
oklch(0.868 0.075 326.2)
Conversões de cor
- HEX
- #eec3ee
- RGB
- rgb(238 195 238)
- HSL
- hsl(300 56% 85%)
- HWB
- hwb(300 76% 7%)
- OKLCH
- oklch(0.868 0.075 326.2)
- OKLab
- oklab(0.868 0.062 -0.041)
- CIE Lab
- lab(83.61 21.13 -15.34)
- LCH
- lch(83.61 26.11 324)
- CMYK
- cmyk(0% 18% 0% 7%)
Tons claros · Sombras · Tons
Tons claros
- F0C9F0
- F2CFF2
- F4D5F3
- F5DBF5
- F7E1F7
- F9E7F8
- FAEDFA
- FCF3FC
- FDF9FD
Sombras
- CFA9CF
- B190B1
- 937893
- 776077
- 5C4A5C
- 423442
- 2A202A
- 140E14
- 030203
Tons
- E3BCE3
- D7B5D7
- CCAFCC
- C1A8C1
- B6A1B6
- AB9AAB
- A094A0
- 958D95
- 8B878A
Harmonias de cor
Complementar +180°
- EEC3EE
Purple’s Baby Sister
- B4E1B7
≈ Fringy Flower
Análoga -30° +30°
- EEC3EE
Purple’s Baby Sister
- D7CAFF
≈ Innocent Snowdrop
- FDC0D5
≈ Garden Glory
Tríade +120° +240°
- EEC3EE
Purple’s Baby Sister
- E9D19B
≈ Italian Straw
- 98E2EC
≈ Blizzard Blue
Complementar dividida +150° +210°
- EEC3EE
Purple’s Baby Sister
- D0DAA2
≈ Lettuce Alone
- 9EE4D2
≈ Aqua Wish
Tétrade +90° +180° +270°
- EEC3EE
Purple’s Baby Sister
- FAC8A4
≈ Fresco Cream
- B4E1B7
≈ Fringy Flower
- A4DCFE
≈ Droplet
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.53:1 · APCA Lc 25
Ag
AAASobre preto
WCAG 13.67:1 · APCA Lc 78
Melhor cor de texto: #000000
WCAG 13.67:1 (AAA) · APCA Lc 78
Contrast pairs
Trechos de código
CSS
:root {
--purple-s-baby-sister: #eec3ee;
--purple-s-baby-sister-rgb: 238 195 238;
--purple-s-baby-sister-oklch: oklch(0.868 0.075 326.2);
}
.element {
color: var(--purple-s-baby-sister);
background-color: hsl(300 56% 85%);
border-color: oklch(0.868 0.075 326.2);
}Tailwind CSS v4
@theme {
--color-purple-s-baby-sister: #eec3ee;
--color-purple-s-baby-sister-50: #ffeeff;
--color-purple-s-baby-sister-100: #f6e0f5;
--color-purple-s-baby-sister-200: #e7cae5;
--color-purple-s-baby-sister-300: #cdaacb;
--color-purple-s-baby-sister-400: #b68fb6;
--color-purple-s-baby-sister-500: #a075a1;
--color-purple-s-baby-sister-600: #876388;
--color-purple-s-baby-sister-700: #6d4f6d;
--color-purple-s-baby-sister-800: #4f3951;
--color-purple-s-baby-sister-900: #372738;
--color-purple-s-baby-sister-950: #221523;
}SCSS
$purple-s-baby-sister: #eec3ee;
$purple-s-baby-sister-rgb: 238, 195, 238;
$purple-s-baby-sister-light: mix(#fff, $purple-s-baby-sister, 20%);
$purple-s-baby-sister-dark: mix(#000, $purple-s-baby-sister, 20%);
.element {
color: $purple-s-baby-sister;
box-shadow: 0 0 0 2px rgba($purple-s-baby-sister, 0.35);
}