Nazwany kolor · #E08194
Bella Pink
Bella Pink to #E08194: rgb(224 129 148), hsl(348 61% 69%), oklch(0.711 0.118 7.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Bella Pink color name →
#E08194
oklch(0.711 0.118 7.7)
Konwersje koloru
- HEX
- #e08194
- RGB
- rgb(224 129 148)
- HSL
- hsl(348 61% 69%)
- HWB
- hwb(348 51% 12%)
- OKLCH
- oklch(0.711 0.118 7.7)
- OKLab
- oklab(0.711 0.117 0.016)
- CIE Lab
- lab(65.06 39.01 6.66)
- LCH
- lch(65.06 39.58 9.7)
- CMYK
- cmyk(0% 42% 34% 12%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E48E9E
- E89AA9
- ECA7B3
- F0B4BE
- F3C0C8
- F6CDD3
- F9D9DE
- FBE6E9
- FDF2F4
Odcienie ciemniejsze
- C36F80
- A65E6D
- 8A4E5A
- 703E48
- 562E36
- 3E1F26
- 271216
- 120608
- 020101
Tony
- D78192
- CD8290
- C4828E
- BB828C
- B1828A
- A88288
- 9E8286
- 948184
- 8A8182
Harmonie kolorów
Komplementarna +180°
- E08194
Bella Pink
- 20B9AF
≈ Turquoise Topaz
Analogowa -30° +30°
- E08194
Bella Pink
- D184BC
≈ Cyclamen
- E1866B
≈ Summer Memory
Triada +120° +240°
- E08194
Bella Pink
- 8DB05C
≈ Usumoegi Green
- 61A8E8
≈ Cerulean
Komplementarna rozszczepiona +150° +210°
- E08194
Bella Pink
- 59B885
≈ Bleached Olive
- 2AB3D2
≈ Ocean Sigh
Tetrada +90° +180° +270°
- E08194
Bella Pink
- B6A241
≈ Sea Squash
- 20B9AF
≈ Turquoise Topaz
- 909AEB
≈ Cold Lips
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.71:1 · APCA Lc 52
Ag
AAANa czerni
WCAG 7.73:1 · APCA Lc 50
Najlepszy kolor tekstu: #000000
WCAG 7.73:1 (AAA) · APCA Lc 50
Contrast pairs
Fragmenty kodu
CSS
:root {
--bella-pink: #e08194;
--bella-pink-rgb: 224 129 148;
--bella-pink-oklch: oklch(0.711 0.118 7.7);
}
.element {
color: var(--bella-pink);
background-color: hsl(348 61% 69%);
border-color: oklch(0.711 0.118 7.7);
}Tailwind CSS v4
@theme {
--color-bella-pink: #e08194;
--color-bella-pink-50: #ffe8ed;
--color-bella-pink-100: #ffd8df;
--color-bella-pink-200: #ffc0c9;
--color-bella-pink-300: #ed9eaa;
--color-bella-pink-400: #da8091;
--color-bella-pink-500: #c66178;
--color-bella-pink-600: #a75365;
--color-bella-pink-700: #874251;
--color-bella-pink-800: #642f3c;
--color-bella-pink-900: #462029;
--color-bella-pink-950: #2d0f17;
}SCSS
$bella-pink: #e08194;
$bella-pink-rgb: 224, 129, 148;
$bella-pink-light: mix(#fff, $bella-pink, 20%);
$bella-pink-dark: mix(#000, $bella-pink, 20%);
.element {
color: $bella-pink;
box-shadow: 0 0 0 2px rgba($bella-pink, 0.35);
}