关键信息
- 分类
- Design
- 输入类型
- textarea, select, checkbox
- 输出类型
- text
- 样本覆盖
- 4
- 支持 API
- Yes
概览
颜色缩短器是一款高效的开发辅助工具，旨在帮助前端开发者和设计师将冗长的 6 位 HEX 颜色代码快速转换为简洁的 3 位简写格式，从而优化 CSS 代码体积并提升代码可读性。
适用场景
- •在编写 CSS 样式表时，需要精简代码以减少文件大小。
- •当 HEX 颜色代码的每对字符完全相同时（如 #FFFFFF），希望将其转换为标准简写。
- •在进行网页性能优化，需要批量处理大量颜色定义时。
工作原理
- •在输入框中粘贴您需要转换的 6 位 HEX 颜色代码，每行一个。
- •选择所需的输出格式，例如是否保留井号（#）或是否转换为小写。
- •点击转换按钮，工具将自动识别可简写的颜色并输出对应的 3 位代码。
- •若开启“显示无法缩短的颜色”选项，系统会列出无法简写的颜色及其原因。
使用场景
前端项目 CSS 代码压缩与重构。
设计系统颜色规范的标准化整理。
网页开发中快速清理冗余的样式代码。
用户案例
1. CSS 样式表代码瘦身
前端开发工程师- 背景原因
- 项目 CSS 文件中存在大量重复的 6 位颜色定义，导致文件体积过大。
- 解决问题
- 需要快速将所有可简写的颜色（如 #FFFFFF, #FF0000）转换为 3 位格式以优化加载速度。
- 如何使用
- 将样式表中的颜色列表粘贴到输入框，选择“#FFF (CSS format)”格式并执行转换。
- 示例配置
-
format: css - 效果
- 成功将 #FFFFFF 转换为 #FFF，#FF0000 转换为 #F00，显著精简了样式代码。
2. 设计规范文档整理
UI 设计师- 背景原因
- 正在整理一份包含数十种品牌色的设计规范，希望代码部分保持简洁统一。
- 解决问题
- 手动检查哪些颜色可以简写非常繁琐，且容易出错。
- 如何使用
- 输入所有品牌色 HEX 代码，开启“显示无法缩短的颜色”选项，快速筛选出可优化的颜色。
- 示例配置
-
includeUnshortenable: true - 效果
- 一键获取了所有可简写的颜色列表，并明确了哪些颜色必须保留 6 位格式，提升了文档专业度。
用 Samples 测试
design相关专题
常见问题
什么是 3 位 HEX 颜色代码？
3 位 HEX 代码是 6 位代码的简写形式。当 6 位代码的每对字符相同时（如 #AABBCC），可以简写为 #ABC。
为什么有些颜色无法缩短？
如果 HEX 代码的每对字符不完全相同（例如 #123456），则无法将其压缩为 3 位格式，因为这会改变颜色值。
该工具支持批量处理吗？
支持。您可以一次性输入多个 HEX 代码，工具会逐行处理并输出结果。
输出格式有哪些选择？
您可以选择大写、小写、是否包含井号（#）以及 CSS 标准格式等多种输出方式。
使用此工具会改变颜色显示吗？
不会。缩短后的 3 位代码在浏览器中渲染出的颜色与原 6 位代码完全一致。