颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
本地生成 1200×630 分享卡片,预览各平台效果并复制 Meta 标签
本地渲染 1200×630 的分享卡片,并在 X、Facebook、LinkedIn、Slack 四种卡片样式里预览实际效果,同时给出 12 条 og / twitter 标签。
在浏览器里渲染 **1200×630** 的分享卡(Open Graph 的标准尺寸):文字模式标题最多三行、**中文按字符断行**,不会因为整段没有空格而溢出画布;也可以上传图片自动居中裁切。
同时给出 **X / Facebook / LinkedIn / Slack 四种平台预览**与可直接使用的 meta 标签(`og:*` 与 `twitter:*` 各一套),避免「本地看着好、发出去被裁掉一半」。
全程用 canvas 在本地渲染,图片不上传;下载的是 1200×630 的 PNG,也可以只复制标签不生成图。
选模式:文字或上传图片
文字模式填标题、描述、站点名与地址;上传模式会把图片按比例铺满并居中裁切。
调主题与强调色
深/浅两套底色,强调色用于标题里的品牌片段。
对照预览、复制标签、下载 PNG
先把 PNG 传到服务器拿到绝对地址,再把标签里的 `og:image` 换成它。
是:爬虫抓取时没有页面上下文,**相对路径解析不了**,必须写 `https://你的域名/og.png` 这样的绝对地址。所以顺序是:先生成并上传图片,拿到地址,再填回标签。
平台会**缓存**抓取到的图。改文件名或加版本参数(`og.png?v=2`)能让它立刻重抓。另外把关键信息放在中间区域:各平台按自己的比例裁切(Slack 的展开卡片比 1.91:1 更方),边缘内容可能被切掉——这正是本页要对照四个预览的原因。
工具不生成这一条。它对无障碍(屏幕阅读器)与图片加载失败时的说明有用,需要的话在复制出来的标签里手工补一行 `<meta property="og:image:alt" content="…" />`。另外注意图片体积:多数平台的上限在 5–8MB,超过会放弃抓取。
选择并提取 HEX、RGB、HSL 颜色值
检查前背景色对比是否符合的可访问性标准
可视化创建漂亮的 CSS 线性或径向渐变
可视化调节并复制 box-shadow 代码
各领域物理单位的精准换算
在 B, KB, MB, GB, TB 间进行转换
可视化调节四角圆角并复制 border-radius 代码
拖动顶点调整形状,复制 clip-path: polygon() 代码