最接近的命名颜色 · #C20052
#C20052
最接近的命名颜色: Velvet Magic
#C20052(rgb(194 0 82)、hsl(335 100% 38%)、oklch(0.522 0.209 8))最接近命名颜色 Velvet Magic。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。
#C20052
oklch(0.522 0.209 8)
颜色转换
- HEX
- #c20052
- RGB
- rgb(194 0 82)
- HSL
- hsl(335 100% 38%)
- HWB
- hwb(335 0% 24%)
- OKLCH
- oklch(0.522 0.209 8)
- OKLab
- oklab(0.522 0.207 0.029)
- CIE Lab
- lab(42.02 67.58 13.1)
- LCH
- lch(42.02 68.84 11)
- CMYK
- cmyk(0% 100% 58% 24%)
浅色调 · 深色调 · 灰色调
浅色调
- CC3562
- D45172
- DD6982
- E47F93
- EB95A5
- F0AAB6
- F5BFC8
- F9D5DA
- FDEAEC
深色调
- A80046
- 8F003B
- 77002F
- 600025
- 49001A
- 340011
- 200008
- 0E0002
- 020000
灰色调
- BD2557
- B9375B
- B34460
- AE4F64
- A85969
- A1626D
- 9A6A72
- 927277
- 8A797B
配色和谐
互补色 +180°
- C20052
Velvet Magic
- 007A73
≈ Hydra Turquoise
类似色 -30° +30°
- C20052
Velvet Magic
- AE1E92
≈ Magneto’s Magenta
- B63800
≈ Dropped Brick
三角配色 +120° +240°
- C20052
Velvet Magic
- 527700
≈ Tropicana
- 006DB5
≈ Beautiful Blue
分裂互补色 +150° +210°
- C20052
Velvet Magic
- 007E4D
≈ Picture Book Green
- 00768D
≈ Enamel Blue
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AA白底
WCAG 6.14:1 · APCA Lc 78
Ag
Fail黑底
WCAG 3.41:1 · APCA Lc 24
最佳文字颜色: #FFFFFF
WCAG 6.14:1 (AA) · APCA Lc 78
Contrast pairs
代码片段
CSS
:root {
--velvet-magic: #c20052;
--velvet-magic-rgb: 194 0 82;
--velvet-magic-oklch: oklch(0.522 0.209 8);
}
.element {
color: var(--velvet-magic);
background-color: hsl(335 100% 38%);
border-color: oklch(0.522 0.209 8);
}Tailwind CSS v4
@theme {
--color-velvet-magic: #c20052;
--color-velvet-magic-50: #ffdde7;
--color-velvet-magic-100: #ffcbd8;
--color-velvet-magic-200: #ffadc0;
--color-velvet-magic-300: #ff859f;
--color-velvet-magic-400: #ff5d87;
--color-velvet-magic-500: #ed266b;
--color-velvet-magic-600: #c9255b;
--color-velvet-magic-700: #a11e49;
--color-velvet-magic-800: #781337;
--color-velvet-magic-900: #550d26;
--color-velvet-magic-950: #390014;
}SCSS
$velvet-magic: #c20052;
$velvet-magic-rgb: 194, 0, 82;
$velvet-magic-light: mix(#fff, $velvet-magic, 20%);
$velvet-magic-dark: mix(#000, $velvet-magic, 20%);
.element {
color: $velvet-magic;
box-shadow: 0 0 0 2px rgba($velvet-magic, 0.35);
}