Adlandırılmış renk · #F18870
Juicy Passionfruit
Juicy Passionfruit, #F18870: rgb(241 136 112), hsl(11 82% 69%), oklch(0.735 0.134 33.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Red mean? → · Juicy Passionfruit color name →
#F18870
oklch(0.735 0.134 33.9)
Renk dönüşümleri
- HEX
- #f18870
- RGB
- rgb(241 136 112)
- HSL
- hsl(11 82% 69%)
- HWB
- hwb(11 44% 5%)
- OKLCH
- oklch(0.735 0.134 33.9)
- OKLab
- oklab(0.735 0.111 0.074)
- CIE Lab
- lab(68.17 39.31 31.36)
- LCH
- lch(68.17 50.28 38.6)
- CMYK
- cmyk(0% 44% 54% 5%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F4947E
- F6A18C
- F9AD9B
- FAB9A9
- FCC4B7
- FDD0C5
- FEDCD4
- FFE8E2
- FFF3F0
Koyu tonlar
- D27560
- B36351
- 955243
- 794135
- 5D3127
- 43221A
- 2B130E
- 140604
- 030101
Gri tonlar
- E68872
- DB8874
- D08776
- C58778
- BA867A
- AE857B
- A3847C
- 98837E
- 8C817F
Renk uyumları
Tamamlayıcı +180°
- F18870
Juicy Passionfruit
- 00BDDB
≈ Maldives
Analog -30° +30°
- F18870
Juicy Passionfruit
- EE83A0
≈ Iced Berry
- E39545
≈ Yellow Sumac
Üçlü +120° +240°
- F18870
Juicy Passionfruit
- 5CC282
≈ Enamelled Dragon
- 8FA2FD
≈ Periwinkle Blue
Bölünmüş tamamlayıcı +150° +210°
- F18870
Juicy Passionfruit
- 00C3B2
≈ Amazonite
- 55B2F7
≈ Tiān Lán Sky
Dörtlü +90° +180° +270°
- F18870
Juicy Passionfruit
- 98B752
≈ Clematis Green
- 00BDDB
≈ Maldives
- BC93EE
≈ Luminous Lavender
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.47:1 · APCA Lc 48
Ag
AAASiyah üzerinde
WCAG 8.49:1 · APCA Lc 54
En iyi metin rengi: #000000
WCAG 8.49:1 (AAA) · APCA Lc 54
Contrast pairs
Kod parçacıkları
CSS
:root {
--juicy-passionfruit: #f18870;
--juicy-passionfruit-rgb: 241 136 112;
--juicy-passionfruit-oklch: oklch(0.735 0.134 33.9);
}
.element {
color: var(--juicy-passionfruit);
background-color: hsl(11 82% 69%);
border-color: oklch(0.735 0.134 33.9);
}Tailwind CSS v4
@theme {
--color-juicy-passionfruit: #f18870;
--color-juicy-passionfruit-50: #ffe9db;
--color-juicy-passionfruit-100: #ffd9ca;
--color-juicy-passionfruit-200: #ffc1ad;
--color-juicy-passionfruit-300: #f39f88;
--color-juicy-passionfruit-400: #e27f69;
--color-juicy-passionfruit-500: #cf6047;
--color-juicy-passionfruit-600: #af523d;
--color-juicy-passionfruit-700: #8d4130;
--color-juicy-passionfruit-800: #692e24;
--color-juicy-passionfruit-900: #4a1f18;
--color-juicy-passionfruit-950: #300e09;
}SCSS
$juicy-passionfruit: #f18870;
$juicy-passionfruit-rgb: 241, 136, 112;
$juicy-passionfruit-light: mix(#fff, $juicy-passionfruit, 20%);
$juicy-passionfruit-dark: mix(#000, $juicy-passionfruit, 20%);
.element {
color: $juicy-passionfruit;
box-shadow: 0 0 0 2px rgba($juicy-passionfruit, 0.35);
}