命名颜色 · #C677A8
Strawberry Freeze
Strawberry Freeze 即 #C677A8：rgb(198 119 168)、hsl(323 41% 62%)、oklch(0.669 0.116 342.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Strawberry Freeze color name →
#C677A8
oklch(0.669 0.116 342.8)
颜色转换
- HEX
- #c677a8
- RGB
- rgb(198 119 168)
- HSL
- hsl(323 41% 62%)
- HWB
- hwb(323 47% 22%)
- OKLCH
- oklch(0.669 0.116 342.8)
- OKLab
- oklab(0.669 0.111 -0.034)
- CIE Lab
- lab(60.04 36.68 -12.5)
- LCH
- lch(60.04 38.75 341.2)
- CMYK
- cmyk(0% 40% 15% 22%)
浅色调 · 深色调 · 灰色调
浅色调
- CD85B0
- D392B9
- D99FC2
- DFADCA
- E5BAD3
- EAC8DC
- F0D6E4
- F5E3ED
- FAF1F6
深色调
- AC6792
- 92577C
- 7A4767
- 623852
- 4B2A3F
- 351C2C
- 21101A
- 0E050A
- 020101
灰色调
- BF78A4
- B97AA0
- B27B9C
- AB7C98
- A47D94
- 9D7E90
- 967E8C
- 8F7F88
- 888084
配色和谐
互补色 +180°
- C677A8
Strawberry Freeze
- 43AB80
≈ Jubilant Jade
类似色 -30° +30°
- C677A8
Strawberry Freeze
- AE7FC8
≈ Wisteria
- D27581
≈ Pink Shade
三角配色 +120° +240°
- C677A8
Strawberry Freeze
- A29838
≈ Be Yourself
- 25A4C9
≈ Celestine Spring
分裂互补色 +150° +210°
- C677A8
Strawberry Freeze
- 79A457
≈ Grassy Meadow
- 00ABA8
≈ Teal Me No Lies
四角配色 +90° +180° +270°
- C677A8
Strawberry Freeze
- C0893A
≈ Peanut Butter
- 43AB80
≈ Jubilant Jade
- 5F98DB
≈ Little Boy Blue
对比度与无障碍
Ag
Fail白底
WCAG 3.17:1 · APCA Lc 59
Ag
AA黑底
WCAG 6.60:1 · APCA Lc 43
最佳文字颜色: #000000
WCAG 6.60:1 (AA) · APCA Lc 43
Contrast pairs
代码片段
CSS
:root {
--strawberry-freeze: #c677a8;
--strawberry-freeze-rgb: 198 119 168;
--strawberry-freeze-oklch: oklch(0.669 0.116 342.8);
}
.element {
color: var(--strawberry-freeze);
background-color: hsl(323 41% 62%);
border-color: oklch(0.669 0.116 342.8);
}Tailwind CSS v4
@theme {
--color-strawberry-freeze: #c677a8;
--color-strawberry-freeze-50: #ffe9fd;
--color-strawberry-freeze-100: #ffd9f1;
--color-strawberry-freeze-200: #f9c1e0;
--color-strawberry-freeze-300: #e3a0c5;
--color-strawberry-freeze-400: #ce82b1;
--color-strawberry-freeze-500: #ba649b;
--color-strawberry-freeze-600: #9d5583;
--color-strawberry-freeze-700: #7e4469;
--color-strawberry-freeze-800: #5d314e;
--color-strawberry-freeze-900: #412136;
--color-strawberry-freeze-950: #291021;
}SCSS
$strawberry-freeze: #c677a8;
$strawberry-freeze-rgb: 198, 119, 168;
$strawberry-freeze-light: mix(#fff, $strawberry-freeze, 20%);
$strawberry-freeze-dark: mix(#000, $strawberry-freeze, 20%);
.element {
color: $strawberry-freeze;
box-shadow: 0 0 0 2px rgba($strawberry-freeze, 0.35);
}