命名颜色 · #FF3311
Rocket Science
Rocket Science 即 #FF3311：rgb(255 51 17)、hsl(9 100% 53%)、oklch(0.647 0.24 31.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Rocket Science color name →
#FF3311
oklch(0.647 0.24 31.6)
颜色转换
- HEX
- #ff3311
- RGB
- rgb(255 51 17)
- HSL
- hsl(9 100% 53%)
- HWB
- hwb(9 7% 0%)
- OKLCH
- oklch(0.647 0.24 31.6)
- OKLab
- oklab(0.647 0.204 0.126)
- CIE Lab
- lab(56.74 74.19 66.45)
- LCH
- lch(56.74 99.6 41.9)
- CMYK
- cmyk(0% 80% 93% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- FF5338
- FF6B52
- FF8169
- FF957F
- FFA794
- FFBAAA
- FFCBBF
- FFDDD4
- FFEEE9
深色调
- DE2B0D
- BE2309
- 9E1C06
- 801404
- 630D02
- 480701
- 2E0300
- 160100
- 030000
灰色调
- F44429
- E85038
- DD5A45
- D1624F
- C56958
- B86F61
- AB7469
- 9E7971
- 8F7D79
配色和谐
互补色 +180°
- FF3311
Rocket Science
- 00A0B5
≈ January Blue
类似色 -30° +30°
- FF3311
Rocket Science
- F82B84
≈ Pink Piano
- CD7500
≈ Mountain Ash
三角配色 +120° +240°
- FF3311
Rocket Science
- 00AA55
≈ Rita Repulsa
- 6781FF
≈ Deep Denim
分裂互补色 +150° +210°
- FF3311
Rocket Science
- 00A593
≈ Persian Green
- 0097E2
≈ Atmosphere
四角配色 +90° +180° +270°
- FF3311
Rocket Science
- 809C00
≈ Luminescent Green
- 00A0B5
≈ January Blue
- A95FFF
≈ Purple Hedonist
对比度与无障碍
Ag
Fail白底
WCAG 3.66:1 · APCA Lc 62
Ag
AA黑底
WCAG 5.73:1 · APCA Lc 39
最佳文字颜色: #000000
WCAG 5.73:1 (AA) · APCA Lc 39
Contrast pairs
代码片段
CSS
:root {
--rocket-science: #ff3311;
--rocket-science-rgb: 255 51 17;
--rocket-science-oklch: oklch(0.647 0.24 31.6);
}
.element {
color: var(--rocket-science);
background-color: hsl(9 100% 53%);
border-color: oklch(0.647 0.24 31.6);
}Tailwind CSS v4
@theme {
--color-rocket-science: #ff3311;
--color-rocket-science-50: #ffddc8;
--color-rocket-science-100: #ffcab3;
--color-rocket-science-200: #ffac8f;
--color-rocket-science-300: #ff8160;
--color-rocket-science-400: #ff5235;
--color-rocket-science-500: #fe0000;
--color-rocket-science-600: #d70000;
--color-rocket-science-700: #ad0500;
--color-rocket-science-800: #820000;
--color-rocket-science-900: #5c0301;
--color-rocket-science-950: #3e0000;
}SCSS
$rocket-science: #ff3311;
$rocket-science-rgb: 255, 51, 17;
$rocket-science-light: mix(#fff, $rocket-science, 20%);
$rocket-science-dark: mix(#000, $rocket-science, 20%);
.element {
color: $rocket-science;
box-shadow: 0 0 0 2px rgba($rocket-science, 0.35);
}