命名颜色 · #9C2542
Big Dip O’ruby
Big Dip O’ruby 即 #9C2542：rgb(156 37 66)、hsl(345 62% 38%)、oklch(0.464 0.155 11.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Big Dip O’ruby color name →
#9C2542
oklch(0.464 0.155 11.8)
颜色转换
- HEX
- #9c2542
- RGB
- rgb(156 37 66)
- HSL
- hsl(345 62% 38%)
- HWB
- hwb(345 15% 39%)
- OKLCH
- oklch(0.464 0.155 11.8)
- OKLab
- oklab(0.464 0.151 0.032)
- CIE Lab
- lab(36.09 50.18 13.77)
- LCH
- lch(36.09 52.03 15.4)
- CMYK
- cmyk(0% 76% 58% 39%)
浅色调 · 深色调 · 灰色调
浅色调
- A83F53
- B45564
- BF6B76
- CA8089
- D4949C
- DEA9AF
- E7BFC2
- EFD4D6
- F7E9EA
深色调
- 871F38
- 73192F
- 5F1325
- 4C0D1C
- 390814
- 28040B
- 180205
- 090001
- 010000
灰色调
- 9B3248
- 9A3E4E
- 984754
- 96515A
- 935961
- 916167
- 8D696D
- 897173
- 85797A
配色和谐
互补色 +180°
- 9C2542
Big Dip O’ruby
- 006764
≈ Peacock Pride
类似色 -30° +30°
- 9C2542
Big Dip O’ruby
- 8F2B71
≈ Beetiful Magenta
- 963500
≈ Chocoholic
三角配色 +120° +240°
- 9C2542
Big Dip O’ruby
- 3D6700
≈ Tatzelwurm Green
- 005AA3
≈ Princess Blue
分裂互补色 +150° +210°
- 9C2542
Big Dip O’ruby
- 006A47
≈ Vegan Green
- 00637B
≈ Jamaican Dream
四角配色 +90° +180° +270°
- 9C2542
Big Dip O’ruby
- 655A00
≈ Brussels Sprout Green
- 006764
≈ Peacock Pride
- 4F48AC
≈ Swiss Plum
对比度与无障碍
Ag
AAA白底
WCAG 7.61:1 · APCA Lc 85
Ag
Fail黑底
WCAG 2.75:1 · APCA Lc 17
最佳文字颜色: #FFFFFF
WCAG 7.61:1 (AAA) · APCA Lc 85
Contrast pairs
代码片段
CSS
:root {
--big-dip-o-ruby: #9c2542;
--big-dip-o-ruby-rgb: 156 37 66;
--big-dip-o-ruby-oklch: oklch(0.464 0.155 11.8);
}
.element {
color: var(--big-dip-o-ruby);
background-color: hsl(345 62% 38%);
border-color: oklch(0.464 0.155 11.8);
}Tailwind CSS v4
@theme {
--color-big-dip-o-ruby: #9c2542;
--color-big-dip-o-ruby-50: #ffe4e8;
--color-big-dip-o-ruby-100: #ffd3d8;
--color-big-dip-o-ruby-200: #ffb9c0;
--color-big-dip-o-ruby-300: #fc95a0;
--color-big-dip-o-ruby-400: #ea7486;
--color-big-dip-o-ruby-500: #d8516b;
--color-big-dip-o-ruby-600: #b6455b;
--color-big-dip-o-ruby-700: #933748;
--color-big-dip-o-ruby-800: #6d2736;
--color-big-dip-o-ruby-900: #4d1a25;
--color-big-dip-o-ruby-950: #320a14;
}SCSS
$big-dip-o-ruby: #9c2542;
$big-dip-o-ruby-rgb: 156, 37, 66;
$big-dip-o-ruby-light: mix(#fff, $big-dip-o-ruby, 20%);
$big-dip-o-ruby-dark: mix(#000, $big-dip-o-ruby, 20%);
.element {
color: $big-dip-o-ruby;
box-shadow: 0 0 0 2px rgba($big-dip-o-ruby, 0.35);
}