Adlandırılmış renk · #F5B3CE
Fulgrim Pink
Fulgrim Pink, #F5B3CE: rgb(245 179 206), hsl(335 77% 83%), oklch(0.836 0.084 352.8). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Fulgrim Pink color name →
#F5B3CE
oklch(0.836 0.084 352.8)
Renk dönüşümleri
- HEX
- #f5b3ce
- RGB
- rgb(245 179 206)
- HSL
- hsl(335 77% 83%)
- HWB
- hwb(335 70% 4%)
- OKLCH
- oklch(0.836 0.084 352.8)
- OKLab
- oklab(0.836 0.083 -0.011)
- CIE Lab
- lab(79.83 27.62 -3.71)
- LCH
- lch(79.83 27.87 352.3)
- CMYK
- cmyk(0% 27% 16% 4%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F7BBD3
- F8C2D8
- F9CADD
- FAD1E1
- FBD9E6
- FCE1EB
- FDE8F0
- FEF0F5
- FFF7FA
Koyu tonlar
- D59BB3
- B68498
- 986E7F
- 7B5866
- 5F434E
- 442F38
- 2B1D23
- 150C0F
- 030102
Gri tonlar
- E9AEC6
- DDA9BE
- D1A4B6
- C69FAE
- BA9AA6
- AE949E
- A38F97
- 978A8F
- 8C8587
Renk uyumları
Tamamlayıcı +180°
- F5B3CE
Fulgrim Pink
- 8EDBC4
≈ Monet Vert
Analog -30° +30°
- F5B3CE
Fulgrim Pink
- E4B7E9
≈ Beefy Pink
- FBB4B0
≈ Wildflower Bouquet
Üçlü +120° +240°
- F5B3CE
Fulgrim Pink
- C9CF90
≈ Dancing Green
- 91D3F7
≈ Kul Sharif Blue
Bölünmüş tamamlayıcı +150° +210°
- F5B3CE
Fulgrim Pink
- AAD8A6
≈ Fizz
- 84DAE1
≈ Deep Aquamarine
Dörtlü +90° +180° +270°
- F5B3CE
Fulgrim Pink
- E4C58A
≈ New Orleans
- 8EDBC4
≈ Monet Vert
- ADCAFF
≈ Night Snow
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.71:1 · APCA Lc 31
Ag
AAASiyah üzerinde
WCAG 12.22:1 · APCA Lc 72
En iyi metin rengi: #000000
WCAG 12.22:1 (AAA) · APCA Lc 72
Contrast pairs
Kod parçacıkları
CSS
:root {
--fulgrim-pink: #f5b3ce;
--fulgrim-pink-rgb: 245 179 206;
--fulgrim-pink-oklch: oklch(0.836 0.084 352.8);
}
.element {
color: var(--fulgrim-pink);
background-color: hsl(335 77% 83%);
border-color: oklch(0.836 0.084 352.8);
}Tailwind CSS v4
@theme {
--color-fulgrim-pink: #f5b3ce;
--color-fulgrim-pink-50: #ffecf6;
--color-fulgrim-pink-100: #ffdde9;
--color-fulgrim-pink-200: #f3c6d6;
--color-fulgrim-pink-300: #dba6ba;
--color-fulgrim-pink-400: #c68aa3;
--color-fulgrim-pink-500: #b16e8b;
--color-fulgrim-pink-600: #965e76;
--color-fulgrim-pink-700: #784b5e;
--color-fulgrim-pink-800: #593646;
--color-fulgrim-pink-900: #3e2530;
--color-fulgrim-pink-950: #27131d;
}SCSS
$fulgrim-pink: #f5b3ce;
$fulgrim-pink-rgb: 245, 179, 206;
$fulgrim-pink-light: mix(#fff, $fulgrim-pink, 20%);
$fulgrim-pink-dark: mix(#000, $fulgrim-pink, 20%);
.element {
color: $fulgrim-pink;
box-shadow: 0 0 0 2px rgba($fulgrim-pink, 0.35);
}