命名颜色 · #F6C2CC
Deco Pink
Deco Pink 即 #F6C2CC：rgb(246 194 204)、hsl(348 74% 86%)、oklch(0.863 0.061 5.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Deco Pink color name →
#F6C2CC
oklch(0.863 0.061 5.5)
颜色转换
- HEX
- #f6c2cc
- RGB
- rgb(246 194 204)
- HSL
- hsl(348 74% 86%)
- HWB
- hwb(348 76% 4%)
- OKLCH
- oklch(0.863 0.061 5.5)
- OKLab
- oklab(0.863 0.06 0.006)
- CIE Lab
- lab(83.36 20.25 2.47)
- LCH
- lch(83.36 20.4 7)
- CMYK
- cmyk(0% 21% 17% 4%)
浅色调 · 深色调 · 灰色调
浅色调
- F7C8D1
- F8CED6
- F9D4DB
- FBDAE0
- FBE0E5
- FCE7EA
- FDEDEF
- FEF3F5
- FEF9FA
深色调
- D6A8B1
- B78F97
- 98777E
- 7B6065
- 5F494E
- 453437
- 2C2022
- 150E0F
- 030202
灰色调
- EABBC4
- DEB5BC
- D2AEB5
- C6A7AD
- BAA1A5
- AE9A9E
- A39396
- 978D8F
- 8B8687
配色和谐
互补色 +180°
- F6C2CC
Deco Pink
- A5DFD7
≈ Frosty
类似色 -30° +30°
- F6C2CC
Deco Pink
- ECC3E2
≈ Sweet Murmur
- F7C5B7
≈ Serene Pink
三角配色 +120° +240°
- F6C2CC
Deco Pink
- C8DAAF
≈ White Vienna
- B2D7F8
≈ Blue Rice
分裂互补色 +150° +210°
- F6C2CC
Deco Pink
- B3DEC1
≈ Quantum Effect
- A5DDEB
≈ Early July
四角配色 +90° +180° +270°
- F6C2CC
Deco Pink
- DED2A5
≈ Summer Solstice
- A5DFD7
≈ Frosty
- C6CFFA
≈ Lavender Blue
对比度与无障碍
Ag
Fail白底
WCAG 1.55:1 · APCA Lc 25
Ag
AAA黑底
WCAG 13.50:1 · APCA Lc 78
最佳文字颜色: #000000
WCAG 13.50:1 (AAA) · APCA Lc 78
Contrast pairs
代码片段
CSS
:root {
--deco-pink: #f6c2cc;
--deco-pink-rgb: 246 194 204;
--deco-pink-oklch: oklch(0.863 0.061 5.5);
}
.element {
color: var(--deco-pink);
background-color: hsl(348 74% 86%);
border-color: oklch(0.863 0.061 5.5);
}Tailwind CSS v4
@theme {
--color-deco-pink: #f6c2cc;
--color-deco-pink-50: #ffeef2;
--color-deco-pink-100: #fbe0e4;
--color-deco-pink-200: #edcacf;
--color-deco-pink-300: #d4abb2;
--color-deco-pink-400: #bf9099;
--color-deco-pink-500: #a97580;
--color-deco-pink-600: #8f646d;
--color-deco-pink-700: #734f57;
--color-deco-pink-800: #553a40;
--color-deco-pink-900: #3b272c;
--color-deco-pink-950: #251619;
}SCSS
$deco-pink: #f6c2cc;
$deco-pink-rgb: 246, 194, 204;
$deco-pink-light: mix(#fff, $deco-pink, 20%);
$deco-pink-dark: mix(#000, $deco-pink, 20%);
.element {
color: $deco-pink;
box-shadow: 0 0 0 2px rgba($deco-pink, 0.35);
}