Adlandırılmış renk · #F7B6BA
Ballerina Pink
Ballerina Pink, #F7B6BA: rgb(247 182 186), hsl(356 80% 84%), oklch(0.837 0.076 14.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Ballerina Pink color name →
#F7B6BA
oklch(0.837 0.076 14.7)
Renk dönüşümleri
- HEX
- #f7b6ba
- RGB
- rgb(247 182 186)
- HSL
- hsl(356 80% 84%)
- HWB
- hwb(356 71% 3%)
- OKLCH
- oklch(0.837 0.076 14.7)
- OKLab
- oklab(0.837 0.073 0.019)
- CIE Lab
- lab(80.3 24.68 7.74)
- LCH
- lch(80.3 25.87 17.4)
- CMYK
- cmyk(0% 26% 25% 3%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F8BDC1
- FAC5C8
- FBCCCE
- FCD3D5
- FDDBDC
- FDE2E3
- FEE9EA
- FEF0F1
- FFF8F8
Koyu tonlar
- D79EA1
- B78689
- 996F72
- 7C595C
- 604446
- 453032
- 2C1D1E
- 150C0D
- 030202
Gri tonlar
- EBB1B4
- DFABAE
- D3A6A8
- C7A0A2
- BB9B9D
- AF9697
- A39091
- 978B8B
- 8C8586
Renk uyumları
Tamamlayıcı +180°
- F7B6BA
Ballerina Pink
- 8DDAD9
≈ Island Oasis
Analog -30° +30°
- F7B6BA
Ballerina Pink
- EEB6D5
≈ Soft Cashmere
- F5BBA1
≈ Certain Peach
Üçlü +120° +240°
- F7B6BA
Ballerina Pink
- B5D5A3
≈ In Good Taste
- A9CDFB
≈ Night Snow
Bölünmüş tamamlayıcı +150° +210°
- F7B6BA
Ballerina Pink
- 9BDABD
≈ Green Jewel
- 93D5EF
≈ Blue Effervescence
Dörtlü +90° +180° +270°
- F7B6BA
Ballerina Pink
- D1CD93
≈ Corn Husk Green
- 8DDAD9
≈ Island Oasis
- C4C3FA
≈ Light Periwinkle
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.69:1 · APCA Lc 30
Ag
AAASiyah üzerinde
WCAG 12.35:1 · APCA Lc 73
En iyi metin rengi: #000000
WCAG 12.35:1 (AAA) · APCA Lc 73
Contrast pairs
Kod parçacıkları
CSS
:root {
--ballerina-pink: #f7b6ba;
--ballerina-pink-rgb: 247 182 186;
--ballerina-pink-oklch: oklch(0.837 0.076 14.7);
}
.element {
color: var(--ballerina-pink);
background-color: hsl(356 80% 84%);
border-color: oklch(0.837 0.076 14.7);
}Tailwind CSS v4
@theme {
--color-ballerina-pink: #f7b6ba;
--color-ballerina-pink-50: #ffeded;
--color-ballerina-pink-100: #ffdedf;
--color-ballerina-pink-200: #f3c8c9;
--color-ballerina-pink-300: #dca8aa;
--color-ballerina-pink-400: #c78c90;
--color-ballerina-pink-500: #b37176;
--color-ballerina-pink-600: #976064;
--color-ballerina-pink-700: #794d50;
--color-ballerina-pink-800: #5a373b;
--color-ballerina-pink-900: #3f2628;
--color-ballerina-pink-950: #281416;
}SCSS
$ballerina-pink: #f7b6ba;
$ballerina-pink-rgb: 247, 182, 186;
$ballerina-pink-light: mix(#fff, $ballerina-pink, 20%);
$ballerina-pink-dark: mix(#000, $ballerina-pink, 20%);
.element {
color: $ballerina-pink;
box-shadow: 0 0 0 2px rgba($ballerina-pink, 0.35);
}