Adlandırılmış renk · #FDBAC4
Pink Bubble Tea
Pink Bubble Tea, #FDBAC4: rgb(253 186 196), hsl(351 94% 86%), oklch(0.853 0.078 8.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Pink Bubble Tea color name →
#FDBAC4
oklch(0.853 0.078 8.9)
Renk dönüşümleri
- HEX
- #fdbac4
- RGB
- rgb(253 186 196)
- HSL
- hsl(351 94% 86%)
- HWB
- hwb(351 73% 1%)
- OKLCH
- oklch(0.853 0.078 8.9)
- OKLab
- oklab(0.853 0.077 0.012)
- CIE Lab
- lab(82.06 25.94 4.99)
- LCH
- lch(82.06 26.42 10.9)
- CMYK
- cmyk(0% 26% 23% 1%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- FEC1CA
- FEC8D0
- FFCFD5
- FFD6DB
- FFDDE1
- FFE3E7
- FFEAED
- FFF1F3
- FFF8F9
Koyu tonlar
- DCA1AA
- BC8991
- 9D7278
- 7F5C61
- 62464A
- 473235
- 2D1E21
- 160D0E
- 030202
Gri tonlar
- F0B4BD
- E3AEB6
- D7A9AF
- CAA3A8
- BE9DA1
- B1979B
- A59194
- 998C8D
- 8C8687
Renk uyumları
Tamamlayıcı +180°
- FDBAC4
Pink Bubble Tea
- 91E0D9
≈ Pale Beryl
Analog -30° +30°
- FDBAC4
Pink Bubble Tea
- F2BBE0
≈ Pink Heath
- FDBEA9
≈ Porcellana
Üçlü +120° +240°
- FDBAC4
Pink Bubble Tea
- BFD9A3
≈ Embroidered Silk
- A9D4FF
≈ Malmö FF
Bölünmüş tamamlayıcı +150° +210°
- FDBAC4
Pink Bubble Tea
- A3DFBC
≈ Bright Sea Green
- 93DCF2
≈ Photon Barrier
Dörtlü +90° +180° +270°
- FDBAC4
Pink Bubble Tea
- DBD095
≈ Bongo Skin
- 91E0D9
≈ Pale Beryl
- C4CBFF
≈ Lavender Blue
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.61:1 · APCA Lc 28
Ag
AAASiyah üzerinde
WCAG 12.99:1 · APCA Lc 75
En iyi metin rengi: #000000
WCAG 12.99:1 (AAA) · APCA Lc 75
Contrast pairs
Kod parçacıkları
CSS
:root {
--pink-bubble-tea: #fdbac4;
--pink-bubble-tea-rgb: 253 186 196;
--pink-bubble-tea-oklch: oklch(0.853 0.078 8.9);
}
.element {
color: var(--pink-bubble-tea);
background-color: hsl(351 94% 86%);
border-color: oklch(0.853 0.078 8.9);
}Tailwind CSS v4
@theme {
--color-pink-bubble-tea: #fdbac4;
--color-pink-bubble-tea-50: #ffedf0;
--color-pink-bubble-tea-100: #ffdee1;
--color-pink-bubble-tea-200: #f4c7cc;
--color-pink-bubble-tea-300: #dca7ad;
--color-pink-bubble-tea-400: #c88b95;
--color-pink-bubble-tea-500: #b3707b;
--color-pink-bubble-tea-600: #975f68;
--color-pink-bubble-tea-700: #794c53;
--color-pink-bubble-tea-800: #5a373e;
--color-pink-bubble-tea-900: #3f252a;
--color-pink-bubble-tea-950: #281418;
}SCSS
$pink-bubble-tea: #fdbac4;
$pink-bubble-tea-rgb: 253, 186, 196;
$pink-bubble-tea-light: mix(#fff, $pink-bubble-tea, 20%);
$pink-bubble-tea-dark: mix(#000, $pink-bubble-tea, 20%);
.element {
color: $pink-bubble-tea;
box-shadow: 0 0 0 2px rgba($pink-bubble-tea, 0.35);
}