命名颜色 · #F7D6D8
Lovelight
Lovelight 即 #F7D6D8：rgb(247 214 216)、hsl(356 67% 90%)、oklch(0.904 0.037 13.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Lovelight color name →
#F7D6D8
oklch(0.904 0.037 13.7)
颜色转换
- HEX
- #f7d6d8
- RGB
- rgb(247 214 216)
- HSL
- hsl(356 67% 90%)
- HWB
- hwb(356 84% 3%)
- OKLCH
- oklch(0.904 0.037 13.7)
- OKLab
- oklab(0.904 0.036 0.009)
- CIE Lab
- lab(88.48 12.09 3.48)
- LCH
- lch(88.48 12.58 16.1)
- CMYK
- cmyk(0% 13% 13% 3%)
浅色调 · 深色调 · 灰色调
浅色调
- F8DADC
- F9DEE0
- FAE2E4
- FBE6E7
- FBEAEB
- FCEFEF
- FDF3F3
- FEF7F7
- FEFBFB
深色调
- D7BABC
- B79EA0
- 998485
- 7C6A6B
- 605253
- 453B3B
- 2C2525
- 151011
- 030202
灰色调
- EBCDCF
- DEC4C6
- D2BBBD
- C6B3B4
- BAAAAB
- AEA1A2
- A2999A
- 979191
- 8B8888
配色和谐
互补色 +180°
- F7D6D8
Lovelight
- C4E8E6
≈ Saline Water
类似色 -30° +30°
- F7D6D8
Lovelight
- F2D6E6
≈ Samantha’s Room
- F6D8CC
≈ Angelic Pink
三角配色 +120° +240°
- F7D6D8
Lovelight
- D6E5CD
≈ Infinitesimal Green
- CFE1F8
≈ Light Breeze
分裂互补色 +150° +210°
- F7D6D8
Lovelight
- CAE8D9
≈ Misty Glen
- C6E5F2
≈ Sapphireberry
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.34:1 · APCA Lc 17
Ag
AAA黑底
WCAG 15.56:1 · APCA Lc 86
最佳文字颜色: #000000
WCAG 15.56:1 (AAA) · APCA Lc 86
Contrast pairs
代码片段
CSS
:root {
--lovelight: #f7d6d8;
--lovelight-rgb: 247 214 216;
--lovelight-oklch: oklch(0.904 0.037 13.7);
}
.element {
color: var(--lovelight);
background-color: hsl(356 67% 90%);
border-color: oklch(0.904 0.037 13.7);
}Tailwind CSS v4
@theme {
--color-lovelight: #f7d6d8;
--color-lovelight-50: #fff1f1;
--color-lovelight-100: #f4e3e4;
--color-lovelight-200: #e4cecf;
--color-lovelight-300: #cab0b1;
--color-lovelight-400: #b39698;
--color-lovelight-500: #9d7d7f;
--color-lovelight-600: #856a6b;
--color-lovelight-700: #6a5456;
--color-lovelight-800: #4e3d3f;
--color-lovelight-900: #362a2b;
--color-lovelight-950: #211819;
}SCSS
$lovelight: #f7d6d8;
$lovelight-rgb: 247, 214, 216;
$lovelight-light: mix(#fff, $lovelight, 20%);
$lovelight-dark: mix(#000, $lovelight, 20%);
.element {
color: $lovelight;
box-shadow: 0 0 0 2px rgba($lovelight, 0.35);
}