命名颜色 · #FFAA44
Match Strike
Match Strike 即 #FFAA44：rgb(255 170 68)、hsl(33 100% 63%)、oklch(0.804 0.151 67.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Match Strike color name →
#FFAA44
oklch(0.804 0.151 67.1)
颜色转换
- HEX
- #ffaa44
- RGB
- rgb(255 170 68)
- HSL
- hsl(33 100% 63%)
- HWB
- hwb(33 27% 0%)
- OKLCH
- oklch(0.804 0.151 67.1)
- OKLab
- oklab(0.804 0.059 0.139)
- CIE Lab
- lab(76.93 26.09 63.19)
- LCH
- lch(76.93 68.37 67.6)
- CMYK
- cmyk(0% 33% 73% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- FFB35D
- FFBC72
- FFC585
- FFCD98
- FFD6AA
- FFDEBB
- FFE7CC
- FFEFDD
- FFF7EE
深色调
- DE933A
- BE7D30
- 9E6826
- 80531D
- 633F14
- 482D0C
- 2E1B05
- 160B02
- 030100
灰色调
- F2A64F
- E5A258
- D99E60
- CC9A66
- BF966C
- B29271
- A68E75
- 998979
- 8D857D
配色和谐
互补色 +180°
- FFAA44
Match Strike
- 87C6FF
≈ Chromis Damsel Blue
类似色 -30° +30°
- FFAA44
Match Strike
- FFA58A
≈ Citrus Hill
- DBBF34
≈ Durian Yellow
三角配色 +120° +240°
- FFAA44
Match Strike
- 00DCCE
≈ Mint Morning
- D5A9FF
≈ Testosterose
分裂互补色 +150° +210°
- FFAA44
Match Strike
- 00D5FB
≈ Neon Blue
- AFBAFF
≈ Greyish Lavender
四角配色 +90° +180° +270°
- FFAA44
Match Strike
- 5BDC97
≈ Aurora Green
- 87C6FF
≈ Chromis Damsel Blue
- FC97E2
≈ Pink Condition
对比度与无障碍
Ag
Fail白底
WCAG 1.89:1 · APCA Lc 36
Ag
AAA黑底
WCAG 11.08:1 · APCA Lc 67
最佳文字颜色: #000000
WCAG 11.08:1 (AAA) · APCA Lc 67
Contrast pairs
代码片段
CSS
:root {
--match-strike: #ffaa44;
--match-strike-rgb: 255 170 68;
--match-strike-oklch: oklch(0.804 0.151 67.1);
}
.element {
color: var(--match-strike);
background-color: hsl(33 100% 63%);
border-color: oklch(0.804 0.151 67.1);
}Tailwind CSS v4
@theme {
--color-match-strike: #ffaa44;
--color-match-strike-50: #ffeec7;
--color-match-strike-100: #ffe0b2;
--color-match-strike-200: #ffc98d;
--color-match-strike-300: #e9a95c;
--color-match-strike-400: #d98a24;
--color-match-strike-500: #c66d00;
--color-match-strike-600: #a75d00;
--color-match-strike-700: #864a00;
--color-match-strike-800: #653500;
--color-match-strike-900: #472400;
--color-match-strike-950: #2e1200;
}SCSS
$match-strike: #ffaa44;
$match-strike-rgb: 255, 170, 68;
$match-strike-light: mix(#fff, $match-strike, 20%);
$match-strike-dark: mix(#000, $match-strike, 20%);
.element {
color: $match-strike;
box-shadow: 0 0 0 2px rgba($match-strike, 0.35);
}