命名颜色 · #BB1122
Ruby Star
Ruby Star 即 #BB1122：rgb(187 17 34)、hsl(354 83% 40%)、oklch(0.504 0.197 24.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Ruby Star color name →
#BB1122
oklch(0.504 0.197 24.9)
颜色转换
- HEX
- #bb1122
- RGB
- rgb(187 17 34)
- HSL
- hsl(354 83% 40%)
- HWB
- hwb(354 7% 27%)
- OKLCH
- oklch(0.504 0.197 24.9)
- OKLab
- oklab(0.504 0.179 0.083)
- CIE Lab
- lab(40.5 62.51 40.63)
- LCH
- lch(40.5 74.56 33)
- CMYK
- cmyk(0% 91% 82% 27%)
浅色调 · 深色调 · 灰色调
浅色调
- C5393A
- CF534F
- D76B64
- DF817A
- E7968F
- EDABA5
- F3C0BB
- F8D5D1
- FCEAE8
深色调
- A20D1C
- 8A0916
- 730611
- 5C040B
- 460207
- 320103
- 1F0001
- 0D0000
- 020000
灰色调
- B72A2E
- B33A38
- AE4642
- A9504C
- A45A55
- 9E625D
- 986A66
- 91726F
- 897977
配色和谐
互补色 +180°
- BB1122
Ruby Star
- 00727C
≈ Scurf Green
类似色 -30° +30°
- BB1122
Ruby Star
- B1146A
≈ Plum Paradise
- 994D00
≈ Warm Brown
三角配色 +120° +240°
- BB1122
Ruby Star
- 007A1D
≈ Spreadsheet Green
- 2A57D3
≈ Bnei Brak Bay
分裂互补色 +150° +210°
- BB1122
Ruby Star
- 007661
≈ Tropical Rainforest
- 006D98
≈ Disarm
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AA白底
WCAG 6.52:1 · APCA Lc 80
Ag
Fail黑底
WCAG 3.21:1 · APCA Lc 22
最佳文字颜色: #FFFFFF
WCAG 6.52:1 (AA) · APCA Lc 80
Contrast pairs
代码片段
CSS
:root {
--ruby-star: #bb1122;
--ruby-star-rgb: 187 17 34;
--ruby-star-oklch: oklch(0.504 0.197 24.9);
}
.element {
color: var(--ruby-star);
background-color: hsl(354 83% 40%);
border-color: oklch(0.504 0.197 24.9);
}Tailwind CSS v4
@theme {
--color-ruby-star: #bb1122;
--color-ruby-star-50: #ffe0d7;
--color-ruby-star-100: #ffcfc5;
--color-ruby-star-200: #ffb3a7;
--color-ruby-star-300: #ff8c80;
--color-ruby-star-400: #fd6561;
--color-ruby-star-500: #ec373d;
--color-ruby-star-600: #c83134;
--color-ruby-star-700: #a12729;
--color-ruby-star-800: #781a20;
--color-ruby-star-900: #551115;
--color-ruby-star-950: #390207;
}SCSS
$ruby-star: #bb1122;
$ruby-star-rgb: 187, 17, 34;
$ruby-star-light: mix(#fff, $ruby-star, 20%);
$ruby-star-dark: mix(#000, $ruby-star, 20%);
.element {
color: $ruby-star;
box-shadow: 0 0 0 2px rgba($ruby-star, 0.35);
}