Nazwany kolor · #E581A0
Hope
Hope to #E581A0: rgb(229 129 160), hsl(341 66% 70%), oklch(0.72 0.127 0.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Hope color name →
#E581A0
oklch(0.72 0.127 0.9)
Konwersje koloru
- HEX
- #e581a0
- RGB
- rgb(229 129 160)
- HSL
- hsl(341 66% 70%)
- HWB
- hwb(341 51% 10%)
- OKLCH
- oklch(0.72 0.127 0.9)
- OKLab
- oklab(0.72 0.127 0.002)
- CIE Lab
- lab(65.98 41.93 1.31)
- LCH
- lch(65.98 41.95 1.8)
- CMYK
- cmyk(0% 44% 30% 10%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E98EA9
- ED9BB2
- F0A7BC
- F3B4C5
- F6C0CE
- F8CDD8
- FAD9E2
- FCE6EB
- FEF2F5
Odcienie ciemniejsze
- C76F8B
- AA5E76
- 8E4E61
- 723E4E
- 582E3B
- 3F1F29
- 281219
- 120609
- 030101
Tony
- DB829D
- D18299
- C88296
- BE8293
- B48290
- AA828D
- A08289
- 958186
- 8B8183
Harmonie kolorów
Komplementarna +180°
- E581A0
Hope
- 15BEA9
≈ Tealish
Analogowa -30° +30°
- E581A0
Hope
- D286C9
≈ Pink Punk
- E98573
≈ Thundelarra
Triada +120° +240°
Komplementarna rozszczepiona +150° +210°
- E581A0
Hope
- 63BB7B
≈ Citronella
- 00B9D1
≈ Holiday Blue
Tetrada +90° +180° +270°
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.63:1 · APCA Lc 51
Ag
AAANa czerni
WCAG 7.97:1 · APCA Lc 51
Najlepszy kolor tekstu: #000000
WCAG 7.97:1 (AAA) · APCA Lc 51
Contrast pairs
Fragmenty kodu
CSS
:root {
--hope: #e581a0;
--hope-rgb: 229 129 160;
--hope-oklch: oklch(0.72 0.127 0.9);
}
.element {
color: var(--hope);
background-color: hsl(341 66% 70%);
border-color: oklch(0.72 0.127 0.9);
}Tailwind CSS v4
@theme {
--color-hope: #e581a0;
--color-hope-50: #ffe7f2;
--color-hope-100: #ffd7e4;
--color-hope-200: #ffbecf;
--color-hope-300: #ee9cb1;
--color-hope-400: #db7d9a;
--color-hope-500: #c85e81;
--color-hope-600: #a9506d;
--color-hope-700: #884057;
--color-hope-800: #642d41;
--color-hope-900: #471f2d;
--color-hope-950: #2e0e1a;
}SCSS
$hope: #e581a0;
$hope-rgb: 229, 129, 160;
$hope-light: mix(#fff, $hope, 20%);
$hope-dark: mix(#000, $hope, 20%);
.element {
color: $hope;
box-shadow: 0 0 0 2px rgba($hope, 0.35);
}