Adlandırılmış renk · #F1D4C4
Melon Pink
Melon Pink, #F1D4C4: rgb(241 212 196), hsl(21 62% 86%), oklch(0.89 0.039 50.8). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Melon Pink color name →
#F1D4C4
oklch(0.89 0.039 50.8)
Renk dönüşümleri
- HEX
- #f1d4c4
- RGB
- rgb(241 212 196)
- HSL
- hsl(21 62% 86%)
- HWB
- hwb(21 77% 5%)
- OKLCH
- oklch(0.89 0.039 50.8)
- OKLab
- oklab(0.89 0.025 0.03)
- CIE Lab
- lab(87.05 8.59 11.85)
- LCH
- lch(87.05 14.64 54)
- CMYK
- cmyk(0% 12% 19% 5%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F3D8CA
- F4DDD0
- F5E1D6
- F7E5DB
- F8E9E1
- FAEEE7
- FBF2ED
- FCF6F3
- FEFBF9
Koyu tonlar
- D2B8AA
- B39D91
- 958378
- 796961
- 5D514A
- 433A35
- 2B2421
- 14100E
- 030202
Gri tonlar
- E5CBBD
- DAC3B6
- CEBAAF
- C2B2A8
- B7A9A1
- ACA19B
- A19894
- 96908D
- 8B8887
Renk uyumları
Tamamlayıcı +180°
- F1D4C4
Melon Pink
- C2E0F0
≈ Tropical Pool
Analog -30° +30°
- F1D4C4
Melon Pink
- F4D1D0
≈ Pinky Promise
- E8D9BE
≈ Roycroft Vellum
Üçlü +120° +240°
- F1D4C4
Melon Pink
- C2E4D7
≈ Jade Spell
- DAD7F3
≈ Lavender Sky
Bölünmüş tamamlayıcı +150° +210°
- F1D4C4
Melon Pink
- BEE3E5
≈ Cold Well Water
- CCDCF5
≈ Fly a Kite
Dörtlü +90° +180° +270°
- F1D4C4
Melon Pink
- CDE2C9
≈ Jocular Green
- C2E0F0
≈ Tropical Pool
- E7D3EB
≈ First Lilac
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.40:1 · APCA Lc 20
Ag
AAASiyah üzerinde
WCAG 14.95:1 · APCA Lc 84
En iyi metin rengi: #000000
WCAG 14.95:1 (AAA) · APCA Lc 84
Contrast pairs
Kod parçacıkları
CSS
:root {
--melon-pink: #f1d4c4;
--melon-pink-rgb: 241 212 196;
--melon-pink-oklch: oklch(0.89 0.039 50.8);
}
.element {
color: var(--melon-pink);
background-color: hsl(21 62% 86%);
border-color: oklch(0.89 0.039 50.8);
}Tailwind CSS v4
@theme {
--color-melon-pink: #f1d4c4;
--color-melon-pink-50: #fff2eb;
--color-melon-pink-100: #f3e5dc;
--color-melon-pink-200: #e3d0c5;
--color-melon-pink-300: #c8b2a5;
--color-melon-pink-400: #b2988a;
--color-melon-pink-500: #9c7f6f;
--color-melon-pink-600: #846c5e;
--color-melon-pink-700: #6a564b;
--color-melon-pink-800: #4e3f37;
--color-melon-pink-900: #362b25;
--color-melon-pink-950: #211814;
}SCSS
$melon-pink: #f1d4c4;
$melon-pink-rgb: 241, 212, 196;
$melon-pink-light: mix(#fff, $melon-pink, 20%);
$melon-pink-dark: mix(#000, $melon-pink, 20%);
.element {
color: $melon-pink;
box-shadow: 0 0 0 2px rgba($melon-pink, 0.35);
}