命名颜色 · #B50729
Holly Jolly Christmas
Holly Jolly Christmas 即 #B50729：rgb(181 7 41)、hsl(348 93% 37%)、oklch(0.491 0.194 21.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Holly Jolly Christmas color name →
#B50729
oklch(0.491 0.194 21.8)
颜色转换
- HEX
- #b50729
- RGB
- rgb(181 7 41)
- HSL
- hsl(348 93% 37%)
- HWB
- hwb(348 3% 29%)
- OKLCH
- oklch(0.491 0.194 21.8)
- OKLab
- oklab(0.491 0.181 0.072)
- CIE Lab
- lab(38.84 62.26 34.38)
- LCH
- lch(38.84 71.12 28.9)
- CMYK
- cmyk(0% 96% 77% 29%)
浅色调 · 深色调 · 灰色调
浅色调
- C0353E
- CA5053
- D36867
- DC7E7C
- E49491
- EBA9A6
- F1BFBC
- F6D4D2
- FBE9E8
深色调
- 9D0522
- 86041C
- 6F0215
- 59020F
- 440109
- 300005
- 1D0002
- 0C0001
- 020000
灰色调
- B22633
- AE363C
- AA4345
- A64E4E
- A15856
- 9C615F
- 966967
- 90716F
- 887978
配色和谐
互补色 +180°
- B50729
Holly Jolly Christmas
- 006E75
≈ Teal Motif
类似色 -30° +30°
- B50729
Holly Jolly Christmas
- AA116C
≈ Plum Paradise
- 964700
≈ Roux
三角配色 +120° +240°
- B50729
Holly Jolly Christmas
- 0E7600
≈ Toy Camouflage
- 1755CC
≈ Dead Blue Eyes
分裂互补色 +150° +210°
- B50729
Holly Jolly Christmas
- 00725A
≈ Tropical Rainforest
- 00698F
≈ Pulsating Blue
四角配色 +90° +180° +270°
- B50729
Holly Jolly Christmas
- 636600
≈ Mud Green
- 006E75
≈ Teal Motif
- 673FC3
≈ Dragonlord Purple
对比度与无障碍
Ag
AA白底
WCAG 6.93:1 · APCA Lc 82
Ag
Fail黑底
WCAG 3.02:1 · APCA Lc 20
最佳文字颜色: #FFFFFF
WCAG 6.93:1 (AA) · APCA Lc 82
Contrast pairs
代码片段
CSS
:root {
--holly-jolly-christmas: #b50729;
--holly-jolly-christmas-rgb: 181 7 41;
--holly-jolly-christmas-oklch: oklch(0.491 0.194 21.8);
}
.element {
color: var(--holly-jolly-christmas);
background-color: hsl(348 93% 37%);
border-color: oklch(0.491 0.194 21.8);
}Tailwind CSS v4
@theme {
--color-holly-jolly-christmas: #b50729;
--color-holly-jolly-christmas-50: #ffe0da;
--color-holly-jolly-christmas-100: #ffcfc9;
--color-holly-jolly-christmas-200: #ffb2ac;
--color-holly-jolly-christmas-300: #ff8c86;
--color-holly-jolly-christmas-400: #fc6569;
--color-holly-jolly-christmas-500: #eb3848;
--color-holly-jolly-christmas-600: #c7323d;
--color-holly-jolly-christmas-700: #a02831;
--color-holly-jolly-christmas-800: #771a25;
--color-holly-jolly-christmas-900: #541219;
--color-holly-jolly-christmas-950: #380309;
}SCSS
$holly-jolly-christmas: #b50729;
$holly-jolly-christmas-rgb: 181, 7, 41;
$holly-jolly-christmas-light: mix(#fff, $holly-jolly-christmas, 20%);
$holly-jolly-christmas-dark: mix(#000, $holly-jolly-christmas, 20%);
.element {
color: $holly-jolly-christmas;
box-shadow: 0 0 0 2px rgba($holly-jolly-christmas, 0.35);
}