Nazwany kolor · #F85898
Oleander Pink
Oleander Pink to #F85898: rgb(248 88 152), hsl(336 92% 66%), oklch(0.69 0.202 359.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Oleander Pink color name →
#F85898
oklch(0.69 0.202 359.2)
Konwersje koloru
- HEX
- #f85898
- RGB
- rgb(248 88 152)
- HSL
- hsl(336 92% 66%)
- HWB
- hwb(336 35% 3%)
- OKLCH
- oklch(0.69 0.202 359.2)
- OKLab
- oklab(0.69 0.202 -0.003)
- CIE Lab
- lab(61.47 65.58 -0.18)
- LCH
- lch(61.47 65.58 359.8)
- CMYK
- cmyk(0% 65% 39% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FB6CA2
- FE7EAC
- FF90B6
- FFA0C0
- FFB1CA
- FFC0D5
- FFD0DF
- FFE0EA
- FFEFF4
Odcienie ciemniejsze
- D84B84
- B83F70
- 9A335C
- 7C284A
- 601D38
- 451227
- 2C0917
- 150308
- 030001
Tony
- ED5F96
- E26593
- D76A91
- CB6F8E
- BF738C
- B4768A
- A77987
- 9B7C85
- 8E7E82
Harmonie kolorów
Komplementarna +180°
- F85898
Oleander Pink
- 00B49D
≈ Aare River
Analogowa -30° +30°
- F85898
Oleander Pink
- DC64D7
≈ Free Speech Magenta
- FF5D4C
≈ Sunset Orange
Triada +120° +240°
- F85898
Oleander Pink
- 91A800
≈ Augustus Asparagus
- 00A6F0
≈ Vivid Cerulean
Komplementarna rozszczepiona +150° +210°
- F85898
Oleander Pink
- 00BA52
≈ Pistou Green
- 00AFC3
≈ Havasupai Falls
Tetrada +90° +180° +270°
- F85898
Oleander Pink
- BE9600
≈ Hidden Tribe
- 00B49D
≈ Aare River
- 7393FF
≈ Blue Chaos
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.06:1 · APCA Lc 57
Ag
AANa czerni
WCAG 6.84:1 · APCA Lc 45
Najlepszy kolor tekstu: #000000
WCAG 6.84:1 (AA) · APCA Lc 45
Contrast pairs
Fragmenty kodu
CSS
:root {
--oleander-pink: #f85898;
--oleander-pink-rgb: 248 88 152;
--oleander-pink-oklch: oklch(0.69 0.202 359.2);
}
.element {
color: var(--oleander-pink);
background-color: hsl(336 92% 66%);
border-color: oklch(0.69 0.202 359.2);
}Tailwind CSS v4
@theme {
--color-oleander-pink: #f85898;
--color-oleander-pink-50: #ffdef1;
--color-oleander-pink-100: #ffcce3;
--color-oleander-pink-200: #ffafcf;
--color-oleander-pink-300: #ff87b1;
--color-oleander-pink-400: #f8619b;
--color-oleander-pink-500: #e63183;
--color-oleander-pink-600: #c22c6f;
--color-oleander-pink-700: #9c2358;
--color-oleander-pink-800: #741843;
--color-oleander-pink-900: #52102e;
--color-oleander-pink-950: #36021b;
}SCSS
$oleander-pink: #f85898;
$oleander-pink-rgb: 248, 88, 152;
$oleander-pink-light: mix(#fff, $oleander-pink, 20%);
$oleander-pink-dark: mix(#000, $oleander-pink, 20%);
.element {
color: $oleander-pink;
box-shadow: 0 0 0 2px rgba($oleander-pink, 0.35);
}