命名颜色 · #F7CDC8
Veiled Rose
Veiled Rose 即 #F7CDC8：rgb(247 205 200)、hsl(6 75% 88%)、oklch(0.883 0.048 26)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Veiled Rose color name →
#F7CDC8
oklch(0.883 0.048 26)
颜色转换
- HEX
- #f7cdc8
- RGB
- rgb(247 205 200)
- HSL
- hsl(6 75% 88%)
- HWB
- hwb(6 78% 3%)
- OKLCH
- oklch(0.883 0.048 26)
- OKLab
- oklab(0.883 0.043 0.021)
- CIE Lab
- lab(85.99 14.71 8.34)
- LCH
- lch(85.99 16.91 29.6)
- CMYK
- cmyk(0% 17% 19% 3%)
浅色调 · 深色调 · 灰色调
浅色调
- F8D2CD
- F9D7D3
- FADCD8
- FBE1DE
- FCE6E3
- FCEBE9
- FDF0EE
- FEF5F4
- FEFAF9
深色调
- D7B2AE
- B79894
- 997E7B
- 7C6663
- 604E4C
- 453836
- 2C2321
- 150F0F
- 030202
灰色调
- EBC5C1
- DEBDB9
- D2B5B2
- C6AEAB
- BAA6A3
- AE9E9C
- A39795
- 978F8E
- 8B8787
配色和谐
互补色 +180°
- F7CDC8
Veiled Rose
- B4E2E8
≈ Across the Bay
类似色 -30° +30°
- F7CDC8
Veiled Rose
- F4CCD9
≈ Pink Lace
- F2D1BB
≈ Only Yesterday
三角配色 +120° +240°
- F7CDC8
Veiled Rose
- C5E2C6
≈ Chayote
- CAD8F9
≈ Icy Plains
分裂互补色 +150° +210°
- F7CDC8
Veiled Rose
- B8E3D7
≈ Cruise
- BBDEF5
≈ Arctic Paradise
四角配色 +90° +180° +270°
- F7CDC8
Veiled Rose
- D6DDB9
≈ Clean Air
- B4E2E8
≈ Across the Bay
- DBD3F5
≈ Japan Blush
对比度与无障碍
Ag
Fail白底
WCAG 1.44:1 · APCA Lc 21
Ag
AAA黑底
WCAG 14.52:1 · APCA Lc 82
最佳文字颜色: #000000
WCAG 14.52:1 (AAA) · APCA Lc 82
Contrast pairs
代码片段
CSS
:root {
--veiled-rose: #f7cdc8;
--veiled-rose-rgb: 247 205 200;
--veiled-rose-oklch: oklch(0.883 0.048 26);
}
.element {
color: var(--veiled-rose);
background-color: hsl(6 75% 88%);
border-color: oklch(0.883 0.048 26);
}Tailwind CSS v4
@theme {
--color-veiled-rose: #f7cdc8;
--color-veiled-rose-50: #fff0ed;
--color-veiled-rose-100: #f8e2df;
--color-veiled-rose-200: #e8cdc9;
--color-veiled-rose-300: #cfafaa;
--color-veiled-rose-400: #b99490;
--color-veiled-rose-500: #a47a75;
--color-veiled-rose-600: #8b6864;
--color-veiled-rose-700: #6f534f;
--color-veiled-rose-800: #523c3a;
--color-veiled-rose-900: #392928;
--color-veiled-rose-950: #231716;
}SCSS
$veiled-rose: #f7cdc8;
$veiled-rose-rgb: 247, 205, 200;
$veiled-rose-light: mix(#fff, $veiled-rose, 20%);
$veiled-rose-dark: mix(#000, $veiled-rose, 20%);
.element {
color: $veiled-rose;
box-shadow: 0 0 0 2px rgba($veiled-rose, 0.35);
}