Adlandırılmış renk · #FFC1D0
Garden Glory
Garden Glory, #FFC1D0: rgb(255 193 208), hsl(345 100% 88%), oklch(0.871 0.073 2.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Garden Glory color name →
#FFC1D0
oklch(0.871 0.073 2.7)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- FFC7D5
- FFCDD9
- FFD4DE
- FFDAE3
- FFE0E7
- FFE6EC
- FFECF1
- FFF3F5
- FFF9FA
Koyu tonlar
- DEA7B5
- BE8F9A
- 9E7780
- 805F67
- 63494F
- 483439
- 2E2023
- 160E10
- 030202
Gri tonlar
- F2BAC8
- E5B4BF
- D8ADB7
- CBA7AF
- BEA0A7
- B29A9F
- A59397
- 998D8F
- 8C8688
Renk uyumları
Tamamlayıcı +180°
- FFC1D0
Garden Glory
- 9DE5D9
≈ Sea Glass Teal
Analog -30° +30°
- FFC1D0
Garden Glory
- F3C3EA
≈ Purple’s Baby Sister
- FFC5B8
≈ Your Pink
Üçlü +120° +240°
- FFC1D0
Garden Glory
- CBDDA8
≈ Butterfly
- ADDBFF
≈ Droplet
Bölünmüş tamamlayıcı +150° +210°
- FFC1D0
Garden Glory
- B1E3BE
≈ Fringy Flower
- 9BE2F1
≈ Blizzard Blue
Dörtlü +90° +180° +270°
- FFC1D0
Garden Glory
- E5D49D
≈ Twinkle Toes
- 9DE5D9
≈ Sea Glass Teal
- C6D3FF
≈ Pale Phthalo Blue
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.52:1 · APCA Lc 24
Ag
AAASiyah üzerinde
WCAG 13.79:1 · APCA Lc 79
En iyi metin rengi: #000000
WCAG 13.79:1 (AAA) · APCA Lc 79
Contrast pairs
Kod parçacıkları
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);
}