命名颜色 · #BB3333
Pesto Rosso
Pesto Rosso 即 #BB3333：rgb(187 51 51)、hsl(0 57% 47%)、oklch(0.53 0.173 25.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Pesto Rosso color name →
#BB3333
oklch(0.53 0.173 25.3)
颜色转换
- HEX
- #bb3333
- RGB
- rgb(187 51 51)
- HSL
- hsl(0 57% 47%)
- HWB
- hwb(0 20% 27%)
- OKLCH
- oklch(0.53 0.173 25.3)
- OKLab
- oklab(0.53 0.156 0.074)
- CIE Lab
- lab(43.7 54.63 34)
- LCH
- lch(43.7 64.35 31.9)
- CMYK
- cmyk(0% 73% 73% 27%)
浅色调 · 深色调 · 灰色调
浅色调
- C54C47
- CD615B
- D6766F
- DE8A82
- E59D96
- EBB1AB
- F1C4BF
- F6D8D4
- FBEBEA
深色调
- A22B2B
- 8A2323
- 731C1C
- 5C1414
- 460D0D
- 320707
- 1F0303
- 0D0101
- 020000
灰色调
- B73F3C
- B24944
- AD524C
- A85A54
- A3615B
- 9D6863
- 976E6A
- 907472
- 887A79
配色和谐
互补色 +180°
- BB3333
Pesto Rosso
- 007A85
≈ Mediterranean Cove
类似色 -30° +30°
- BB3333
Pesto Rosso
- B33270
≈ Hibiscus
- A35300
≈ Windsor Brown
三角配色 +120° +240°
- BB3333
Pesto Rosso
- 008323
≈ Poblano
- 3A62CE
≈ God of Rain
分裂互补色 +150° +210°
- BB3333
Pesto Rosso
- 007E69
≈ Mediaeval Forest
- 0075A3
≈ Summer Lake
四角配色 +90° +180° +270°
- BB3333
Pesto Rosso
- 6A7300
≈ Spinach Soup
- 007A85
≈ Mediterranean Cove
- 764FC3
≈ Fuchsia Blue
对比度与无障碍
Ag
AA白底
WCAG 5.77:1 · APCA Lc 78
Ag
Fail黑底
WCAG 3.63:1 · APCA Lc 24
最佳文字颜色: #FFFFFF
WCAG 5.77:1 (AA) · APCA Lc 78
Contrast pairs
代码片段
CSS
:root {
--pesto-rosso: #bb3333;
--pesto-rosso-rgb: 187 51 51;
--pesto-rosso-oklch: oklch(0.53 0.173 25.3);
}
.element {
color: var(--pesto-rosso);
background-color: hsl(0 57% 47%);
border-color: oklch(0.53 0.173 25.3);
}Tailwind CSS v4
@theme {
--color-pesto-rosso: #bb3333;
--color-pesto-rosso-50: #ffe3da;
--color-pesto-rosso-100: #ffd2c9;
--color-pesto-rosso-200: #ffb8ac;
--color-pesto-rosso-300: #ff9386;
--color-pesto-rosso-400: #f46f68;
--color-pesto-rosso-500: #e24946;
--color-pesto-rosso-600: #bf3f3c;
--color-pesto-rosso-700: #993230;
--color-pesto-rosso-800: #732324;
--color-pesto-rosso-900: #511718;
--color-pesto-rosso-950: #360709;
}SCSS
$pesto-rosso: #bb3333;
$pesto-rosso-rgb: 187, 51, 51;
$pesto-rosso-light: mix(#fff, $pesto-rosso, 20%);
$pesto-rosso-dark: mix(#000, $pesto-rosso, 20%);
.element {
color: $pesto-rosso;
box-shadow: 0 0 0 2px rgba($pesto-rosso, 0.35);
}