命名颜色 · #FFC1D0
Garden Glory
Garden Glory 即 #FFC1D0：rgb(255 193 208)、hsl(345 100% 88%)、oklch(0.871 0.073 2.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Garden Glory color name →
#FFC1D0
oklch(0.871 0.073 2.7)
颜色转换
- HEX
- #ffc1d0
- RGB
- rgb(255 193 208)
- HSL
- hsl(345 100% 88%)
- HWB
- hwb(345 76% 0%)
- OKLCH
- oklch(0.871 0.073 2.7)
- OKLab
- oklab(0.871 0.073 0.003)
- CIE Lab
- lab(84.12 24.48 1.58)
- LCH
- lch(84.12 24.54 3.7)
- CMYK
- cmyk(0% 24% 18% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- FFC7D5
- FFCDD9
- FFD4DE
- FFDAE3
- FFE0E7
- FFE6EC
- FFECF1
- FFF3F5
- FFF9FA
深色调
- DEA7B5
- BE8F9A
- 9E7780
- 805F67
- 63494F
- 483439
- 2E2023
- 160E10
- 030202
灰色调
- F2BAC8
- E5B4BF
- D8ADB7
- CBA7AF
- BEA0A7
- B29A9F
- A59397
- 998D8F
- 8C8688
配色和谐
互补色 +180°
- FFC1D0
Garden Glory
- 9DE5D9
≈ Sea Glass Teal
类似色 -30° +30°
- FFC1D0
Garden Glory
- F3C3EA
≈ Purple’s Baby Sister
- FFC5B8
≈ Your Pink
三角配色 +120° +240°
- FFC1D0
Garden Glory
- CBDDA8
≈ Butterfly
- ADDBFF
≈ Droplet
分裂互补色 +150° +210°
- FFC1D0
Garden Glory
- B1E3BE
≈ Fringy Flower
- 9BE2F1
≈ Blizzard Blue
四角配色 +90° +180° +270°
- FFC1D0
Garden Glory
- E5D49D
≈ Twinkle Toes
- 9DE5D9
≈ Sea Glass Teal
- C6D3FF
≈ Pale Phthalo Blue
对比度与无障碍
Ag
Fail白底
WCAG 1.52:1 · APCA Lc 24
Ag
AAA黑底
WCAG 13.79:1 · APCA Lc 79
最佳文字颜色: #000000
WCAG 13.79:1 (AAA) · APCA Lc 79
Contrast pairs
代码片段
CSS
:root {
--garden-glory: #ffc1d0;
--garden-glory-rgb: 255 193 208;
--garden-glory-oklch: oklch(0.871 0.073 2.7);
}
.element {
color: var(--garden-glory);
background-color: hsl(345 100% 88%);
border-color: oklch(0.871 0.073 2.7);
}Tailwind CSS v4
@theme {
--color-garden-glory: #ffc1d0;
--color-garden-glory-50: #ffedf2;
--color-garden-glory-100: #ffdee5;
--color-garden-glory-200: #f1c8d0;
--color-garden-glory-300: #d9a8b2;
--color-garden-glory-400: #c48d9a;
--color-garden-glory-500: #af7182;
--color-garden-glory-600: #94606e;
--color-garden-glory-700: #774d58;
--color-garden-glory-800: #583841;
--color-garden-glory-900: #3d262d;
--color-garden-glory-950: #27141a;
}SCSS
$garden-glory: #ffc1d0;
$garden-glory-rgb: 255, 193, 208;
$garden-glory-light: mix(#fff, $garden-glory, 20%);
$garden-glory-dark: mix(#000, $garden-glory, 20%);
.element {
color: $garden-glory;
box-shadow: 0 0 0 2px rgba($garden-glory, 0.35);
}