Adlandırılmış renk · #F1D3B2
Banana Ice Cream
Banana Ice Cream, #F1D3B2: rgb(241 211 178), hsl(31 69% 82%), oklch(0.884 0.055 69.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Banana Ice Cream color name →
#F1D3B2
oklch(0.884 0.055 69.7)
Renk dönüşümleri
- HEX
- #f1d3b2
- RGB
- rgb(241 211 178)
- HSL
- hsl(31 69% 82%)
- HWB
- hwb(31 70% 5%)
- OKLCH
- oklch(0.884 0.055 69.7)
- OKLab
- oklab(0.884 0.019 0.052)
- CIE Lab
- lab(86.49 7.21 20.46)
- LCH
- lch(86.49 21.69 70.6)
- CMYK
- cmyk(0% 12% 26% 5%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F3D7BA
- F4DCC1
- F5E0C9
- F7E5D1
- F8E9D8
- FAEDE0
- FBF2E8
- FCF6F0
- FEFBF7
Koyu tonlar
- D2B79A
- B39C83
- 95826D
- 796957
- 5D5143
- 433A2F
- 2B241D
- 14100C
- 030201
Gri tonlar
- E5CAAD
- DAC2A8
- CEB9A3
- C2B19E
- B7A999
- ACA094
- A1988F
- 96908A
- 8B8885
Renk uyumları
Tamamlayıcı +180°
- F1D3B2
Banana Ice Cream
- BEDCFC
≈ Broad Daylight
Analog -30° +30°
- F1D3B2
Banana Ice Cream
- FACDBE
≈ Spring Song
- E1DAB1
≈ Beige Green
Üçlü +120° +240°
- F1D3B2
Banana Ice Cream
- AFE5E0
≈ Timeless Seafoam
- E4CFF5
≈ Mousse aux Pruneaux
Bölünmüş tamamlayıcı +150° +210°
- F1D3B2
Banana Ice Cream
- B1E2F2
≈ Break the Ice
- D1D6FD
≈ Pale Phthalo Blue
Dörtlü +90° +180° +270°
- F1D3B2
Banana Ice Cream
- BAE4CC
≈ Spearmints
- BEDCFC
≈ Broad Daylight
- F3CBE4
≈ Sparkling Pink
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.42:1 · APCA Lc 21
Ag
AAASiyah üzerinde
WCAG 14.70:1 · APCA Lc 83
En iyi metin rengi: #000000
WCAG 14.70:1 (AAA) · APCA Lc 83
Contrast pairs
Kod parçacıkları
CSS
:root {
--banana-ice-cream: #f1d3b2;
--banana-ice-cream-rgb: 241 211 178;
--banana-ice-cream-oklch: oklch(0.884 0.055 69.7);
}
.element {
color: var(--banana-ice-cream);
background-color: hsl(31 69% 82%);
border-color: oklch(0.884 0.055 69.7);
}Tailwind CSS v4
@theme {
--color-banana-ice-cream: #f1d3b2;
--color-banana-ice-cream-50: #fff3e4;
--color-banana-ice-cream-100: #f4e5d4;
--color-banana-ice-cream-200: #e4d1bb;
--color-banana-ice-cream-300: #cab399;
--color-banana-ice-cream-400: #b4997b;
--color-banana-ice-cream-500: #9e805e;
--color-banana-ice-cream-600: #866c50;
--color-banana-ice-cream-700: #6b5740;
--color-banana-ice-cream-800: #4f3f2e;
--color-banana-ice-cream-900: #372b1f;
--color-banana-ice-cream-950: #22190f;
}SCSS
$banana-ice-cream: #f1d3b2;
$banana-ice-cream-rgb: 241, 211, 178;
$banana-ice-cream-light: mix(#fff, $banana-ice-cream, 20%);
$banana-ice-cream-dark: mix(#000, $banana-ice-cream, 20%);
.element {
color: $banana-ice-cream;
box-shadow: 0 0 0 2px rgba($banana-ice-cream, 0.35);
}