命名颜色 · #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)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Purple’s Baby Sister color name →
#EEC3EE
oklch(0.868 0.075 326.2)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- F0C9F0
- F2CFF2
- F4D5F3
- F5DBF5
- F7E1F7
- F9E7F8
- FAEDFA
- FCF3FC
- FDF9FD
深色调
- CFA9CF
- B190B1
- 937893
- 776077
- 5C4A5C
- 423442
- 2A202A
- 140E14
- 030203
灰色调
- E3BCE3
- D7B5D7
- CCAFCC
- C1A8C1
- B6A1B6
- AB9AAB
- A094A0
- 958D95
- 8B878A
配色和谐
互补色 +180°
- EEC3EE
Purple’s Baby Sister
- B4E1B7
≈ Fringy Flower
类似色 -30° +30°
- EEC3EE
Purple’s Baby Sister
- D7CAFF
≈ Innocent Snowdrop
- FDC0D5
≈ Garden Glory
三角配色 +120° +240°
- EEC3EE
Purple’s Baby Sister
- E9D19B
≈ Italian Straw
- 98E2EC
≈ Blizzard Blue
分裂互补色 +150° +210°
- EEC3EE
Purple’s Baby Sister
- D0DAA2
≈ Lettuce Alone
- 9EE4D2
≈ Aqua Wish
四角配色 +90° +180° +270°
- EEC3EE
Purple’s Baby Sister
- FAC8A4
≈ Fresco Cream
- B4E1B7
≈ Fringy Flower
- A4DCFE
≈ Droplet
对比度与无障碍
Ag
Fail白底
WCAG 1.53:1 · APCA Lc 25
Ag
AAA黑底
WCAG 13.67:1 · APCA Lc 78
最佳文字颜色: #000000
WCAG 13.67:1 (AAA) · APCA Lc 78
Contrast pairs
代码片段
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);
}