命名颜色 · #F7CDCE
Strawberry Ripple
Strawberry Ripple 即 #F7CDCE：rgb(247 205 206)、hsl(359 72% 89%)、oklch(0.885 0.048 16.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Strawberry Ripple color name →
#F7CDCE
oklch(0.885 0.048 16.5)
颜色转换
- HEX
- #f7cdce
- RGB
- rgb(247 205 206)
- HSL
- hsl(359 72% 89%)
- HWB
- hwb(359 80% 3%)
- OKLCH
- oklch(0.885 0.048 16.5)
- OKLab
- oklab(0.885 0.046 0.013)
- CIE Lab
- lab(86.11 15.38 5.35)
- LCH
- lch(86.11 16.28 19.2)
- CMYK
- cmyk(0% 17% 17% 3%)
浅色调 · 深色调 · 灰色调
浅色调
- F8D2D3
- F9D7D8
- FADCDD
- FBE1E1
- FCE6E6
- FCEBEB
- FDF0F0
- FEF5F5
- FEFAFA
深色调
- D7B2B3
- B79898
- 997E7F
- 7C6666
- 604E4E
- 453838
- 2C2323
- 150F0F
- 030202
灰色调
- EBC5C6
- DEBDBE
- D2B5B6
- C6AEAE
- BAA6A6
- AE9E9E
- A39797
- 978F8F
- 8B8787
配色和谐
互补色 +180°
- F7CDCE
Strawberry Ripple
- B5E3E3
≈ Seascape Green
类似色 -30° +30°
- F7CDCE
Strawberry Ripple
- F2CDDF
≈ Minimal Rose
- F5D0BF
≈ Sand Island
三角配色 +120° +240°
- F7CDCE
Strawberry Ripple
- CBE1C2
≈ Chayote
- C5DBF9
≈ Fly a Kite
分裂互补色 +150° +210°
- F7CDCE
Strawberry Ripple
- BCE4D2
≈ Beru
- B9E0F1
≈ Bellagio Fountains
四角配色 +90° +180° +270°
- F7CDCE
Strawberry Ripple
- DCDCB8
≈ Beach Grass
- B5E3E3
≈ Seascape Green
- D6D5F8
≈ Flax Bloom
对比度与无障碍
Ag
Fail白底
WCAG 1.44:1 · APCA Lc 21
Ag
AAA黑底
WCAG 14.57:1 · APCA Lc 82
最佳文字颜色: #000000
WCAG 14.57:1 (AAA) · APCA Lc 82
Contrast pairs
代码片段
CSS
:root {
--strawberry-ripple: #f7cdce;
--strawberry-ripple-rgb: 247 205 206;
--strawberry-ripple-oklch: oklch(0.885 0.048 16.5);
}
.element {
color: var(--strawberry-ripple);
background-color: hsl(359 72% 89%);
border-color: oklch(0.885 0.048 16.5);
}Tailwind CSS v4
@theme {
--color-strawberry-ripple: #f7cdce;
--color-strawberry-ripple-50: #fff0f0;
--color-strawberry-ripple-100: #f8e2e2;
--color-strawberry-ripple-200: #e8cdcc;
--color-strawberry-ripple-300: #cfaeae;
--color-strawberry-ripple-400: #b99495;
--color-strawberry-ripple-500: #a37a7b;
--color-strawberry-ripple-600: #8a6768;
--color-strawberry-ripple-700: #6f5253;
--color-strawberry-ripple-800: #523c3d;
--color-strawberry-ripple-900: #39292a;
--color-strawberry-ripple-950: #231718;
}SCSS
$strawberry-ripple: #f7cdce;
$strawberry-ripple-rgb: 247, 205, 206;
$strawberry-ripple-light: mix(#fff, $strawberry-ripple, 20%);
$strawberry-ripple-dark: mix(#000, $strawberry-ripple, 20%);
.element {
color: $strawberry-ripple;
box-shadow: 0 0 0 2px rgba($strawberry-ripple, 0.35);
}