命名颜色 · #F85898
Oleander Pink
Oleander Pink 即 #F85898：rgb(248 88 152)、hsl(336 92% 66%)、oklch(0.69 0.202 359.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Oleander Pink color name →
#F85898
oklch(0.69 0.202 359.2)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- FB6CA2
- FE7EAC
- FF90B6
- FFA0C0
- FFB1CA
- FFC0D5
- FFD0DF
- FFE0EA
- FFEFF4
深色调
- D84B84
- B83F70
- 9A335C
- 7C284A
- 601D38
- 451227
- 2C0917
- 150308
- 030001
灰色调
- ED5F96
- E26593
- D76A91
- CB6F8E
- BF738C
- B4768A
- A77987
- 9B7C85
- 8E7E82
配色和谐
互补色 +180°
- F85898
Oleander Pink
- 00B49D
≈ Aare River
类似色 -30° +30°
- F85898
Oleander Pink
- DC64D7
≈ Free Speech Magenta
- FF5D4C
≈ Sunset Orange
三角配色 +120° +240°
- F85898
Oleander Pink
- 91A800
≈ Augustus Asparagus
- 00A6F0
≈ Vivid Cerulean
分裂互补色 +150° +210°
- F85898
Oleander Pink
- 00BA52
≈ Pistou Green
- 00AFC3
≈ Havasupai Falls
四角配色 +90° +180° +270°
- F85898
Oleander Pink
- BE9600
≈ Hidden Tribe
- 00B49D
≈ Aare River
- 7393FF
≈ Blue Chaos
对比度与无障碍
Ag
Fail白底
WCAG 3.06:1 · APCA Lc 57
Ag
AA黑底
WCAG 6.84:1 · APCA Lc 45
最佳文字颜色: #000000
WCAG 6.84:1 (AA) · APCA Lc 45
Contrast pairs
代码片段
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);
}