设计与配色

在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。

在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。

按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。

从一个基准色出发，按互补、三分和邻近色规则生成协调的配色。

按目标比例算出缺的那条边，并列出与之吻合的标准尺寸。

一边预览一边叠多层盒阴影和文字阴影，并导出对应的 CSS。

拖动色标做出线性、径向和锥形渐变，并按 sRGB 或 OKLCH 输出 CSS。

用命名区域可视化地排出网格，并导出 grid-template 的 CSS。

从一个颜色做出 50–950 的色阶，再镜像成一套深色色阶，让每一对变量保持原来的对比度。

把截图放进手机、平板、笔记本或浏览器外框里，配上背景和阴影。

在实时示例上逐个切换 flex 属性，同时看到 CSS 和每个属性改变了什么。

算出一条 clamp() 表达式，让尺寸在两个视口宽度之间平滑变化。

在浏览器里把 TTF、OTF 和 WOFF 互转，并生成配套的 @font-face 规则；WOFF2 需要 Brotli，这里不做，会指给你桌面工具。

从系统字体栈里推荐标题和正文的搭配，用你自己输入的文字预览后给出 CSS；字体栈是按韩文和西文选的。

把 TrueType 字体裁到你的文字真正用到的那些字形，还能顺手包成 WOFF——中文和韩文网页字体从几兆变成几十 KB，差别就在这一步。

为任意颜色找出最接近的 Tailwind 调色板取值，并给出感知色差。

把标题、副标题、品牌文字和可选的 logo 摆进模板，生成 1200×630 的分享图，并写好配套的 meta 标签。

一边在实时渲染旁边改 SVG，一边解释这个文件：viewBox 与缩放、变换、每一条路径命令、继承来的填色、白白占地方的字节，以及它在 <img>、data URI 和内联三种用法下各会坏在哪里。

从一个颜色生成 50–950 的明度色阶，步进在感知上均匀，可直接当设计变量用。

生成可无缝平铺的 SVG 图案——条纹、圆点、网格、噪点——颜色和疏密都能调。

每个角单独给值，含两值写法做出的类超椭圆形状，并导出 CSS。

在示例上叠加模糊、亮度、饱和度、色相和投影滤镜，并导出 CSS。

从样式表里把颜色、间距、圆角和字体值抽出来，并提议一套自定义属性。

对着动画预览调 cubic-bezier 或弹簧曲线，并导出 CSS 的时间函数。

打开一个字体文件，按 Unicode 区块显示字形覆盖、韩文音节数、字重、可变轴、嵌入许可和许可证名称记录。

用教科书公式把 RGB 转成 CMYK（不带 ICC 和纸张特性），并标出四色印刷会印得发闷的高饱和颜色。

在绝对和相对命令之间转换路径数据，做平移、缩放、旋转和方向反转，并显示包围盒和实时预览。

把 SVG 编码成可用作 CSS 背景的 data URI，只转义非转义不可的字符，把体积压到最小。

由基准字号和比例生成模块化的字号和间距阶梯，导出成 CSS 或设计变量。