企业官网建设流程全解析

网络工具箱里放设计工具？听起来像是在螺丝刀套装里塞了一把调色板。但如果你是一个经常写文档、做 PPT、搭监控大屏、偶尔还要改改前端页面的网络工程师，你就会理解——配色这件事，真的太频繁了。

V1.2.0 新增的设计工具和软件设置，一个解决"配色去哪找"的问题，一个解决"菜单太长不想看"的问题。两个功能都不大，但都用得着。

设计工具

设计工具在侧边栏默认是隐藏的。

为什么？因为不是每个人都需要。

网络工程师打开工具箱，90% 的场景是 Ping、DNS、端口扫描，颜色选择器放在那里反而碍眼。

所以我们在 V1.2.0 加了软件设置功能（后面会详细说），设计工具默认关闭，需要的话去设置里勾选一下就行。开启后侧边栏会出现"设计工具"分类，下面有两个子菜单：颜色选择器和 RGB 颜色表。

颜色选择器

不只是取色，是三合一

打开颜色选择器，第一眼看到的是顶部三个模式按钮：纯色、线性渐变、径向渐变。这不是三个独立页面，而是同一个界面的三种状态，切换后下方的参数面板同步变化。

纯色模式

左侧是颜色预览区 + 预设色板 + 主题色。预设色板有 10 种标准色（红橙黄绿青蓝紫粉黑白），主题色有 10 种常用 UI 色（Indigo、Purple、Pink、Rose、Sky、Teal、Amber、Lime、Slate、Dark），点击即选。

右侧是三个滑块：色相（H）、明度（L）、透明度（A）。色相滑块的背景是彩虹渐变条，明度滑块会根据当前色相动态变化（从黑到当前色相的亮色），透明度滑块下方是棋盘格背景表示透明效果。拖动任意滑块，左侧预览区实时更新。

下方是 HEX 输入框和 RGB 三通道输入框，双向同步——改 HEX 自动更新 RGB，改 RGB 自动更新 HEX。每个输入框旁边都有"复制"按钮。

屏幕取色器

HEX 输入框同一行有个"💉 取色"按钮。点击后鼠标变成十字准星，旁边跟着一个 9×9 像素的放大镜窗口，实时显示鼠标位置周围的颜色网格。中心像素用白色虚线边框高亮，下方显示当前颜色的 HEX 值。鼠标左键点击确认取色，ESC 取消。对高分辨率屏幕做了 DPR 适配，4K 屏幕也能精准取色。

渐变模式

切换到线性渐变或径向渐变后，参数面板多出几个控件：

• 角度调节（线性渐变）：±45° 快捷按钮 + 精确输入，0° 到 360° 任意角度
• 形状选择（径向渐变）：circle / ellipse / closest-side / farthest-side
• 色标列表：默认两个色标（0% 和 100%），可添加到最多 8 个，可删除（最少保留 2 个）。每个色标可以点击色块弹出系统颜色选择器，也可以直接输入 HEX 值，位置用百分比表示
• 🎲 随机按钮：一键生成随机渐变配色，灵感来了挡不住

底部自动生成 CSS 代码，线性渐变输出background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%)，径向渐变输出background: radial-gradient(circle, #ff0000 0%, #0000ff 100%)。一键复制，直接粘贴到项目里。

RGB 颜色表

500+ 精选色值，17 大色系

如果说颜色选择器是"自己调色"，那 RGB 颜色表就是"从色卡里挑"。17 个色系分类，横向 Tab 标签切换，标签太多时可以左右箭头滚动或鼠标滚轮横向浏览。

色系一览

• 中国传统色：朱砂、黛蓝、胭脂、琉璃、琥珀、鸭蛋青、玄色、藕荷……30 种源自古代织物、绘画与瓷器的色彩。鼠标悬停显示英文名，比如朱砂 = Cinnabar，黛蓝 = Dark Blue，对年轻人和不熟悉传统色的用户更友好
• Material Design：Google 规范色彩，18 种，现代 APP 和网页 UI 的标配
• 莫兰迪高级灰：低饱和度柔和色系，12 种，家居、文艺、女性向品牌的最爱
• 商务 B 端：企业级后台常用色——Primary Blue、Success Green、Warning Orange、Error Red，14 种，搭仪表盘直接用
• 日系和色：樱、藤、抹茶、洗朱，12 种，日式风格和治愈系设计
• 极客终端：荧光绿、深色背景、赛博朋克风，12 种，技术博客和代码主题
• 还有马卡龙甜点、电影胶片、Web 安全 16 色、森林与自然、深海与矿物、复古 80s、北欧极简、梵高与绘画、热带沙漠、未来科技、甜点时光

交互细节

每个色卡只显示颜色条 + 中文名称，不挤。鼠标悬停时 Tooltip 显示完整信息：名称（英文名）、HEX 值、RGB 值。点击色卡，底部详情栏显示选中状态（紫色边框高亮），可以一键复制 HEX 或 RGB。搜索框支持按名称、HEX 值、英文描述搜索——输入 “Cinnabar” 能搜到朱砂，输入 “#FF461F” 也能搜到。

软件设置：你的工具箱你做主

新增的"软件设置"页面，核心功能是管理侧边栏菜单的显示与隐藏。

分类 + 子项独立控制

设置页面列出了所有分类（网络工具、编码工具、开发工具、设计工具、参考查询），每个分类可以展开看到其下的所有子菜单。

分类和子项独立控制：

• 取消勾选分类→ 整个分类及所有子菜单隐藏，子项 checkbox 变灰禁用
• 取消勾选子项→ 仅隐藏该菜单项，分类和其他子项不受影响

永久生效

设置通过 Windows 注册表持久化存储（QSettings("NetToolsPro", "Settings")），关闭应用再打开依然生效。只有卸载应用才会清除。设计工具默认隐藏，其他分类默认显示。

下载地址：https://tool.geek.cab/

发版日期：2026年6月5日（周五）· 预上线功能

NetTools Pro —— 网络工程师的瑞士军刀