配色方案生成
输入主色即可得到深色、点缀与背景的完整梯度,自动校验文字对比度,避免出现看不清的浅灰字。
查看用法 →只做美化这件事,每个模块对应一类高频问题,参数给到可直接使用的程度。
输入主色即可得到深色、点缀与背景的完整梯度,自动校验文字对比度,避免出现看不清的浅灰字。
查看用法 →卡片圆角锁定在 12–16px 区间,阴影按层级分档输出,hover 过渡时长同步给出,避免手感忽快忽慢。
查看用法 →把 margin、padding 收敛到一套倍数体系,跨屏断点自动缩放,手机端不再出现挤成一团的模块。
查看用法 →输入基准字号,直接产出 clamp() 写法,桌面、平板、手机三段取值一次配好,不用再手写媒体查询。
查看用法 →按钮、标签、表单控件的状态样式统一产出,hover、active、focus 三态完整,交互反馈不再缺失。
查看用法 →调整完成后一键复制整段样式代码,变量命名规范,粘进项目里不会和已有样式打架。
查看更新 →不注册、不跳转、不等待,整个过程控制在三分钟内。
填写主色、目标字号与容器宽度,工具据此判断当前页面属于紧凑型还是舒展型布局。
在圆角、阴影、过渡时长三组档位里选择,实时看到卡片和按钮的变化效果。
确认无误后复制生成的 CSS 变量与组件样式,直接落地到你的页面中。
关于使用方式、兼容性与数据处理的集中说明。
按时间倒序记录,只写改动,不写客套话。
字号换算改为三段 clamp() 输出;新增组件 hover / active / focus 三态样式;移动端导航折行逻辑重写;修复卡片阴影在深色背景下过重的问题。
配色生成增加文字对比度校验;导出代码改为变量优先结构;FAQ 区块补充无障碍属性。
新增间距节奏校准模块;圆角档位收敛到 12–16px 区间;优化首屏图片加载策略。
首次提供样式一键复制;整体配色切换为当前的深青与薄荷点缀方案。