Nazwany kolor · #F7B6BA
Ballerina Pink
Ballerina Pink to #F7B6BA: rgb(247 182 186), hsl(356 80% 84%), oklch(0.837 0.076 14.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Ballerina Pink color name →
#F7B6BA
oklch(0.837 0.076 14.7)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F8BDC1
- FAC5C8
- FBCCCE
- FCD3D5
- FDDBDC
- FDE2E3
- FEE9EA
- FEF0F1
- FFF8F8
Odcienie ciemniejsze
- D79EA1
- B78689
- 996F72
- 7C595C
- 604446
- 453032
- 2C1D1E
- 150C0D
- 030202
Tony
- EBB1B4
- DFABAE
- D3A6A8
- C7A0A2
- BB9B9D
- AF9697
- A39091
- 978B8B
- 8C8586
Harmonie kolorów
Komplementarna +180°
- F7B6BA
Ballerina Pink
- 8DDAD9
≈ Island Oasis
Analogowa -30° +30°
- F7B6BA
Ballerina Pink
- EEB6D5
≈ Soft Cashmere
- F5BBA1
≈ Certain Peach
Triada +120° +240°
- F7B6BA
Ballerina Pink
- B5D5A3
≈ In Good Taste
- A9CDFB
≈ Night Snow
Komplementarna rozszczepiona +150° +210°
- F7B6BA
Ballerina Pink
- 9BDABD
≈ Green Jewel
- 93D5EF
≈ Blue Effervescence
Tetrada +90° +180° +270°
- F7B6BA
Ballerina Pink
- D1CD93
≈ Corn Husk Green
- 8DDAD9
≈ Island Oasis
- C4C3FA
≈ Light Periwinkle
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.69:1 · APCA Lc 30
Ag
AAANa czerni
WCAG 12.35:1 · APCA Lc 73
Najlepszy kolor tekstu: #000000
WCAG 12.35:1 (AAA) · APCA Lc 73
Contrast pairs
Fragmenty kodu
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);
}