命名颜色 · #44363D
Fireworks
Fireworks 即 #44363D：rgb(68 54 61)、hsl(330 11% 24%)、oklch(0.351 0.023 346.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Fireworks color name →
#44363D
oklch(0.351 0.023 346.8)
颜色转换
- HEX
- #44363d
- RGB
- rgb(68 54 61)
- HSL
- hsl(330 11% 24%)
- HWB
- hwb(330 21% 73%)
- OKLCH
- oklch(0.351 0.023 346.8)
- OKLab
- oklab(0.351 0.022 -0.005)
- CIE Lab
- lab(24.37 7.47 -1.91)
- LCH
- lch(24.37 7.71 345.6)
- CMYK
- cmyk(0% 21% 10% 73%)
浅色调 · 深色调 · 灰色调
浅色调
- 55484E
- 665A60
- 786D72
- 8A8085
- 9D9498
- B0A9AC
- C3BEC0
- D7D3D5
- EBE9EA
深色调
- 3A2E34
- 30252B
- 261E22
- 1D161A
- 140F12
- 0C080A
- 050304
- 020101
- 000000
灰色调
- 4A3D43
- 50444A
- 564B50
- 5B5257
- 615A5D
- 676164
- 6E696B
- 747072
- 7A7879
配色和谐
互补色 +180°
- 44363D
Fireworks
- 2F3F38
≈ Roycroft Bottle Green
类似色 -30° +30°
- 44363D
Fireworks
- 403743
≈ Royal Coronation
- 463636
≈ Noblesse Oblige
三角配色 +120° +240°
- 44363D
Fireworks
- 3C3C2E
≈ USMC Green
- 2E3D44
≈ Cool Current
分裂互补色 +150° +210°
- 44363D
Fireworks
- 353E32
≈ Aged Pine
- 2D3F3F
≈ Liquorice Green
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AAA白底
WCAG 11.40:1 · APCA Lc 96
Ag
Fail黑底
WCAG 1.84:1 · APCA Lc 0
最佳文字颜色: #FFFFFF
WCAG 11.40:1 (AAA) · APCA Lc 96
Contrast pairs
代码片段
CSS
:root {
--fireworks: #44363d;
--fireworks-rgb: 68 54 61;
--fireworks-oklch: oklch(0.351 0.023 346.8);
}
.element {
color: var(--fireworks);
background-color: hsl(330 11% 24%);
border-color: oklch(0.351 0.023 346.8);
}Tailwind CSS v4
@theme {
--color-fireworks: #44363d;
--color-fireworks-50: #fbf3f6;
--color-fireworks-100: #eee5e9;
--color-fireworks-200: #dcd0d6;
--color-fireworks-300: #c1b3b9;
--color-fireworks-400: #a999a1;
--color-fireworks-500: #928089;
--color-fireworks-600: #7c6d74;
--color-fireworks-700: #63575d;
--color-fireworks-800: #493f44;
--color-fireworks-900: #322c2f;
--color-fireworks-950: #1e191c;
}SCSS
$fireworks: #44363d;
$fireworks-rgb: 68, 54, 61;
$fireworks-light: mix(#fff, $fireworks, 20%);
$fireworks-dark: mix(#000, $fireworks, 20%);
.element {
color: $fireworks;
box-shadow: 0 0 0 2px rgba($fireworks, 0.35);
}