Nazwany kolor · #BA789E
Valentine Heart
Valentine Heart to #BA789E: rgb(186 120 158), hsl(325 32% 60%), oklch(0.653 0.096 344.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Valentine Heart color name →
#BA789E
oklch(0.653 0.096 344.6)
Konwersje koloru
- HEX
- #ba789e
- RGB
- rgb(186 120 158)
- HSL
- hsl(325 32% 60%)
- HWB
- hwb(325 47% 27%)
- OKLCH
- oklch(0.653 0.096 344.6)
- OKLab
- oklab(0.653 0.092 -0.025)
- CIE Lab
- lab(58.47 30.62 -9.29)
- LCH
- lch(58.47 32 343.1)
- CMYK
- cmyk(0% 35% 15% 27%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C185A7
- C992B1
- D0A0BA
- D7ADC4
- DEBACE
- E5C8D7
- ECD6E1
- F2E3EB
- F9F1F5
Odcienie ciemniejsze
- A16789
- 895774
- 724860
- 5C394D
- 462A3A
- 321D29
- 1E1018
- 0D0509
- 020101
Tony
- B5799B
- AF7A98
- A97B95
- A47C92
- 9E7D8F
- 987E8C
- 927E89
- 8C7F86
- 868083
Harmonie kolorów
Komplementarna +180°
- BA789E
Valentine Heart
- 51A381
≈ Inspiration Peak
Analogowa -30° +30°
- BA789E
Valentine Heart
- A67EB9
≈ Berries Galore
- C3777E
≈ Begonia Rose
Triada +120° +240°
- BA789E
Valentine Heart
- 99934A
≈ Tangy Dill
- 449CBC
≈ Fairy Tale Blue
Komplementarna rozszczepiona +150° +210°
- BA789E
Valentine Heart
- 779D61
≈ Leek Soup
- 36A2A2
≈ Royal Cloak
Tetrada +90° +180° +270°
- BA789E
Valentine Heart
- B38749
≈ Rice Curry
- 51A381
≈ Inspiration Peak
- 6793CA
≈ Zeus Temple
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.35:1 · APCA Lc 61
Ag
AANa czerni
WCAG 6.26:1 · APCA Lc 41
Najlepszy kolor tekstu: #000000
WCAG 6.26:1 (AA) · APCA Lc 41
Contrast pairs
Fragmenty kodu
CSS
:root {
--valentine-heart: #ba789e;
--valentine-heart-rgb: 186 120 158;
--valentine-heart-oklch: oklch(0.653 0.096 344.6);
}
.element {
color: var(--valentine-heart);
background-color: hsl(325 32% 60%);
border-color: oklch(0.653 0.096 344.6);
}Tailwind CSS v4
@theme {
--color-valentine-heart: #ba789e;
--color-valentine-heart-50: #ffebfb;
--color-valentine-heart-100: #ffdcee;
--color-valentine-heart-200: #f4c4dc;
--color-valentine-heart-300: #dda4c1;
--color-valentine-heart-400: #c787ac;
--color-valentine-heart-500: #b36b95;
--color-valentine-heart-600: #975b7e;
--color-valentine-heart-700: #794965;
--color-valentine-heart-800: #59354b;
--color-valentine-heart-900: #3e2434;
--color-valentine-heart-950: #271220;
}SCSS
$valentine-heart: #ba789e;
$valentine-heart-rgb: 186, 120, 158;
$valentine-heart-light: mix(#fff, $valentine-heart, 20%);
$valentine-heart-dark: mix(#000, $valentine-heart, 20%);
.element {
color: $valentine-heart;
box-shadow: 0 0 0 2px rgba($valentine-heart, 0.35);
}