配色环和谐规则可视化 - 实时补色与分裂互补
拖拽基色指针,自动计算互补、近似、三等分等七种和谐配色方案,复制十六进制值。
UD5工具箱
g — 全局匹配:查找所有匹配项,而非在第一个匹配后停止。推荐始终开启。i — 忽略大小写:匹配时不区分字母大小写。例如 /hello/i 可匹配 "Hello"、"HELLO"。m — 多行模式:使 ^ 和 $ 锚点匹配每行的开头和结尾,而非整个字符串的首尾。s — dotAll模式:使 .(点号)匹配包括换行符在内的所有字符。m 标志,需要不区分大小写请开启 i 标志;^ 或 $ 但文本结构不符合预期;[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,} | 匹配邮箱地址 |
https?://[^\s]+ | 匹配HTTP/HTTPS URL |
1[3-9]\d{9} | 匹配中国大陆手机号 |
\d{4}-\d{2}-\d{2} | 匹配YYYY-MM-DD格式日期 |
\b(?:\d{1,3}\.){3}\d{1,3}\b | 匹配IPv4地址 |
[\u4e00-\u9fa5]+ | 匹配中文字符 |
#[0-9a-fA-F]{6}\b | 匹配十六进制颜色代码 |
¥\d+\.?\d* | 匹配人民币金额 |
拖拽基色指针,自动计算互补、近似、三等分等七种和谐配色方案,复制十六进制值。
选择任意基色,自动计算互补色、分裂互补及三分色,提供十六进制代码,一键复制。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
输入新旧JSON,并排展示增删改的行级差异,辅助接口变动追踪。
在线正则表达式测试工具,支持JavaScript正则匹配、替换、提取等操作,即时显示匹配结果和高亮。
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
在色相环上点选基色,自动生成互补色、分裂互补、三角色、四角色等方案。
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶,点击复制类名或色值。
支持任意格式颜色输入,计算对比度并显示WCAG 2.1各级别通过情况,含颜色建议。
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
在画布上放置多个色点,颜色平滑插值形成类似矢量网格渐变的梦幻背景。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
上传图片并设置层位置和滚动速度,生成纯 CSS 的多层视差滚动背景代码。
一款漂亮的拟物指针时钟,同时显示数字时间和日历,适合常驻副屏或全屏。
创建带有复选框或标签的多选下拉列表,支持删除已选项,键盘可全控。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
拖拽题型构建客户或员工反馈表,支持NPS、星级评分,导出填写链接或二维码。
随机生成两到五种颜色的组合,附带预览色块,提供设计意外之喜。
输入标题文本,尝试不同容器宽度,手动插入<br>或使用text-wrap:balance显示效果。
输入HEX,从内置的Pantone色库中寻找最接近的彩通色号及名称。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
从一个基色或图片提取的颜色,自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
输入网址,尝试拉取该站favicon并提取其主要颜色,用于品牌配色参考。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
经典的Canny计算机视觉边缘检测算法的前端演示,可调节低高阈值。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。