UD5工具箱
CSS 容器查询演示 - @container 根据父元素响应
设置容器宽度阈值，改变容器大小观察组件内部样式的变化，学习容器查询用法。
✓ 已复制到剪贴板
选择颜色
Preview Text
HEX
RGB: 59, 130, 246
HSL: 217°, 91%, 60%
预设颜色
语义化命名建议
前缀
正在分析颜色...
常见问题与色彩知识
语义化颜色变量命名是指使用有意义的名称来描述颜色的用途或视觉特征，而非直接使用颜色值。例如用
--color-primary-blue代替--color-#3B82F6。这样做的好处是：代码更易读、主题切换更方便、团队协作更高效。当设计调整时，只需修改变量值，而无需改动所有引用位置。
推荐采用三层结构：
① 基础层（Primitive）：原始色值，如
② 语义层（Semantic）：功能角色，如
③ 组件层（Component）：具体应用，如
① 基础层（Primitive）：原始色值，如
blue-500: #3B82F6；② 语义层（Semantic）：功能角色，如
color-primary: blue-500；③ 组件层（Component）：具体应用，如
button-primary-bg: color-primary。这种分层方式使得全局换肤只需调整映射关系，是业界最佳实践。
推荐做法：
• 使用
• 采用
• 避免使用实际色值作为名称
• 保持命名简洁但具有描述性
• 在项目中统一命名规范
• 利用CSS自定义属性的继承特性来管理主题变体。
• 使用
kebab-case命名（如--color-primary-blue）• 采用
类别-名称-变体的结构• 避免使用实际色值作为名称
• 保持命名简洁但具有描述性
• 在项目中统一命名规范
• 利用CSS自定义属性的继承特性来管理主题变体。
灰度色建议使用亮度级别来命名：
•
•
•
•
•
也可以使用数值后缀如
•
white / off-white（L > 95%）•
light-gray（L 70-90%）•
gray / silver（L 40-70%）•
dark-gray / charcoal（L 15-40%）•
near-black / black（L < 15%）也可以使用数值后缀如
gray-100到gray-900，这种方式在Tailwind CSS中广泛使用。
功能性颜色选择通常遵循用户心理模型：
• Primary（主色）：品牌蓝色系，传递信任和专业
• Success（成功）：绿色系，表示正向反馈
• Warning（警告）：橙黄色系，引起注意但不紧急
• Danger（危险）：红色系，表示错误或破坏性操作
• Info（信息）：青色系，中性提示信息。选择时需考虑可访问性对比度（WCAG AA要求4.5:1）。
• Primary（主色）：品牌蓝色系，传递信任和专业
• Success（成功）：绿色系，表示正向反馈
• Warning（警告）：橙黄色系，引起注意但不紧急
• Danger（危险）：红色系，表示错误或破坏性操作
• Info（信息）：青色系，中性提示信息。选择时需考虑可访问性对比度（WCAG AA要求4.5:1）。
颜色名称查找工具 - HEX与命名颜色互转
输入颜色值查找对应的CSS颜色名称，或浏览所有命名颜色及其色值，提升设计效率。
WebSocket 消息构建器 - 编辑并发送文本/二进制帧
连接到 WebSocket 端点，自定义消息内容（JSON、文本、ArrayBuffer）并发送，查看响应。
XSS 过滤器测试沙盒 - 输入转义与过滤演示
输入可能的攻击向量，选择不同的转义或过滤策略，实时查看是否被安全处理，教育安全开发。
代码行数统计工具 - 忽略注释空行
粘贴代码，计算总行数、有效代码行数、注释行数和空行数。
颜色代码转换工具 - RGB,HEX,HSL,HSV互转
在线颜色格式转换器，实现RGB、HEX、HSL、HSV等颜色代码互相转换，实时预览颜色效果。
结构化数据代码快速检查 - 验证 JSON-LD 语法与必填属性
粘贴 JSON-LD 代码，校验语法并提示常见类型的必填属性缺失，辅助 SEO 调试。
JSON Schema生成器 - 从JSON数据推断结构
粘贴JSON示例数据，自动分析并生成对应的JSON Schema，支持类型推断和必填标记。
XML结构校验器 - 嵌套闭合与属性检查
检查XML的格式正确性，报告错误的标签闭合和属性缺失。
代码语言检测工具 - 根据语法特征推断编程语言
粘贴代码片段，基于关键字和语法模式自动推断编程语言，适合未命名文件的快速识别。
Datalist 自动建议增强演示 - 动态数据源
演示如何动态更新 datalist 选项以实现搜索建议，并处理键盘选择。
Web 字体优化建议器 - 分析字体加载对性能的影响
输入网页 URL，检测所用 Web 字体，评估加载策略并给出优化建议。
CSS 混合模式在线演示 - mix-blend-mode 与 background-blend-mode 预览
选择不同的混合模式并调整背景与前景，实时查看混合效果，支持所有标准混合模式。
Webhook载荷美化器 - JSON/XML自动缩进
粘贴原始Webhook请求体，自动识别并格式化，便于阅读调试。
SVG转JSX组件生成器 - 自动化React SVG
粘贴SVG代码，将其转换为可复用的React组件，注意驼峰属性名和自闭合标签。
robots.txt 测试模拟器 - 验证爬虫规则
输入网站robots.txt内容与用户代理，测试指定URL是否被允许抓取，SEO优化辅助。
SVG转React组件 - 自动生成JSX代码
粘贴SVG代码，自动转换为React函数组件格式，处理属性名驼峰化。
WebSocket在线测试工具 - 连接/发送消息调试
输入WebSocket服务地址，建立连接，发送和接收消息，方便调试实时通信应用。
Webmention发送测试 - 手动Ping引用
输入源页和引用页URL，构造Webmention请求通知被引用页面，演示独立博客协议。
波的干涉图样生成器 - 双源波长颜色调节
调节两列波的频率、波长和位置，实时观看水面波干涉形成的明暗条纹图案。
点击劫持测试页面 - 检测 X-Frame-Options 缺失
尝试将目标 URL 加载到 iframe 中，检测是否缺少点击劫持防护头，并展示风险。
增强版字数统计器 - 中英日韩混合精确计数
支持多语言字符分割，准确统计汉字、英文单词、日文假名数量，并评估社交媒体发文长度。
ResizeObserver演示 - 响应元素尺寸变化
拖拽改变一个div的大小，通过ResizeObserver API实时显示其新的宽度和高度。
涂黑诗生成器 - 从报纸文章中选字
粘贴一段文本，涂黑不用单词，保留部分文字组成一首再生诗词。
WebSocket压力测试 - 并发连接发送
配置WebSocket地址，模拟多个并发连接，发送自定义消息并记录响应延迟。
SVG路径补间变形动画生成器
在两个不同形状的SVG路径间自动生成流畅的过渡变形动画SMIL代码。
SVG波浪生成器 - 自定义曲线波形背景
在线调节振幅、频率和层数，生成平滑的SVG波浪图形，直接复制代码或下载SVG。
组件预览沙盒 - 隔离测试 React/Vue 组件
在一个隔离环境中渲染单个组件，调整 props 查看变化，类似于 Storybook 的轻量替代。
神经网络游乐场扩展版 - 自定义激活函数与架构
拖拽构造多层感知机，调整学习率和激活函数，实时观察分类任务训练过程，入门深度学习。
Go 语言 WebAssembly 演练 - 编译 Go 代码到浏览器运行
编写 Go 代码并在线编译为 WASM，在浏览器中调用并显示输出。