[{"data":1,"prerenderedAt":367},["ShallowReactive",2],{"blog-post-/blog/zh-cn/create-css-gradients-online":3,"related-posts-/zh-CN/blog/create-css-gradients-online":101},{"id":4,"title":5,"author":6,"body":7,"category":83,"date":84,"description":85,"extension":86,"featured":87,"image":88,"meta":89,"navigation":90,"path":91,"readingTime":92,"seo":93,"stem":94,"tags":95,"tools":99,"__hash__":100},"content/blog/zh-CN/create-css-gradients-online.md","如何在线创建 CSS 渐变：实用设计流程","Anything Tools Editorial",{"type":8,"value":9,"toc":74},"minimark",[10,14,18,22,25,28,47,50,53,56,68,71],[11,12,5],"h1",{"id":13},"如何在线创建-css-渐变实用设计流程",[15,16,17],"p",{},"渐变能给界面增加层次和方向感，但随意配色往往会让文字难以阅读。好的渐变先要有明确任务：区分区块、引导注意力，或为内容提供安静的背景。",[19,20,21],"h2",{"id":21},"选择渐变类型",[15,23,24],{},"线性渐变适合横幅、卡片和有方向感的画面；径向渐变会把注意力聚向一点，适合放在插画背后。先从两种颜色开始，只有在能改善过渡时再增加第三个色标。",[19,26,27],{"id":27},"在浏览器中制作",[15,29,30,31,36,37,41,42,46],{},"打开 ",[32,33,35],"a",{"href":34},"/design/gradient-generator","渐变生成器","，选择方向，再调整色标并观察预览。可用 ",[32,38,40],{"href":39},"/design/color-picker","取色器"," 从已有素材中提取品牌色，或用 ",[32,43,45],{"href":44},"/design/color-converter","颜色转换器"," 获取可直接用于 CSS 的色值。",[19,48,49],{"id":49},"保持文字可读",[15,51,52],{},"把真实标题和按钮文字放到预览上，而不只是看色块。如果对比度偏弱，可加深浅色文字背后的背景、降低文案附近的饱和度，或加一层轻微遮罩。不要只依靠渐变来表达操作或状态。",[19,54,55],{"id":55},"让结果可复用",[15,57,58,59,63,64,67],{},"复制生成的 CSS 后，用 ",[60,61,62],"code",{},"--surface-accent"," 这类语义化名称保存，而不是 ",[60,65,66],{},"--blue-gradient-2","。在窄屏和图片旁测试：桌面端平衡的背景，到了手机裁切后可能会显得干扰。",[19,69,70],{"id":70},"结论",[15,72,73],{},"最好的渐变会衬托内容，而非与内容竞争。保持配色聚焦，用真实文案测试对比度，并把 CSS 保存为可复用的设计令牌。",{"title":75,"searchDepth":76,"depth":76,"links":77},"",2,[78,79,80,81,82],{"id":21,"depth":76,"text":21},{"id":27,"depth":76,"text":27},{"id":49,"depth":76,"text":49},{"id":55,"depth":76,"text":55},{"id":70,"depth":76,"text":70},"设计","2026-07-10T00:00:00.000Z","使用在线 CSS 渐变生成器，设计有目的的色标、可读的对比度和可复用的 CSS 背景。","md",false,"/blog/create-css-gradients-online.png",{},true,"/blog/zh-cn/create-css-gradients-online",4,{"title":5,"description":85},"blog/zh-CN/create-css-gradients-online",[96,35,97,98],"CSS 渐变","网页设计","颜色",[34,39,44],"K70HeqWgE1SN3_6XVJzq91mX3Ljne4LfGNaLGEGnbg8",[102],{"id":103,"title":104,"author":105,"body":106,"category":83,"date":351,"description":352,"extension":86,"featured":87,"image":353,"meta":354,"navigation":90,"path":355,"readingTime":356,"seo":357,"stem":358,"tags":359,"tools":365,"__hash__":366},"content/blog/zh-CN/how-to-pick-accessible-ui-colors.md","如何在 2026 年选择无障碍 UI 配色","Anything Tools Team",{"type":8,"value":107,"toc":341},[108,111,114,117,124,128,131,134,150,153,157,160,186,189,192,196,199,216,219,223,226,229,240,245,248,251,268,271,275,283,286,303,306,309,327,330,332,335],[11,109,104],{"id":110},"如何在-2026-年选择无障碍-ui-配色",[15,112,113],{},"选择界面颜色，不只是品牌审美问题。它会直接影响可读性、操作判断、错误预防，以及产品是否让人觉得可靠。",[15,115,116],{},"如果按钮看起来漂亮，但文字难以辨认，那这套配色就没有完成它的任务。真正好的无障碍配色，应该先让界面更清晰，再谈装饰感。",[15,118,119,120,123],{},"如果你想先快速试色并转换颜色格式，可以直接使用 ",[32,121,122],{"href":39},"Anything Tools 颜色选择器","。",[19,125,127],{"id":126},"先看对比度再谈好不好看","先看对比度，再谈“好不好看”",[15,129,130],{},"很多团队会先定一个品牌主色，然后把它尽量用到所有地方。这往往会出问题，因为一个强调色很难同时适合正文、背景、边框、标签、状态提示和禁用态。",[15,132,133],{},"更稳妥的方式，是先从用户最常读、最常操作的界面区域开始：",[135,136,137,141,144,147],"ul",{},[138,139,140],"li",{},"正文与主背景",[138,142,143],{},"次级文字与浅色面板",[138,145,146],{},"按钮与链接",[138,148,149],{},"成功、警告、错误状态",[15,151,152],{},"普通文本通常需要满足足够稳妥的对比度，才能符合 WCAG 的可读性预期。对于按钮、标签和提示状态，即使不是正文，也必须让用户一眼分清“可点”“已选中”“有风险”。",[19,154,156],{"id":155},"不要只找一个完美色值而是建立一套小型色彩系统","不要只找一个完美色值，而是建立一套小型色彩系统",[15,158,159],{},"无障碍界面更容易维护的关键，不是“找到一个神奇的 HEX”，而是给每个颜色角色明确职责。常见做法是先定义一小组 token：",[135,161,162,165,168,171,174,177,180,183],{},[138,163,164],{},"页面背景",[138,166,167],{},"主文字",[138,169,170],{},"次级文字",[138,172,173],{},"边框",[138,175,176],{},"主操作色",[138,178,179],{},"成功色",[138,181,182],{},"警告色",[138,184,185],{},"错误色",[15,187,188],{},"当这些角色清楚后，你就能围绕它们延伸深浅层级，而不是每做一个页面就重新猜一次。",[15,190,191],{},"重点不是颜色越多越好，而是一致性越高越好。",[19,193,195],{"id":194},"一定要在真实组件里测试而不是只看色块","一定要在真实组件里测试，而不是只看色块",[15,197,198],{},"颜色单独看没问题，不代表放进产品里也没问题。真正应该测试的是：",[135,200,201,204,207,210,213],{},[138,202,203],{},"带文字的主按钮",[138,205,206],{},"带占位符的输入框",[138,208,209],{},"表单下方的错误提示",[138,211,212],{},"被选中的标签页",[138,214,215],{},"禁用状态的操作按钮",[15,217,218],{},"很多可访问性问题都出在“组合”上，而不是单个颜色本身。例如浅灰文字放在纯白背景上还勉强可读，放进浅色卡片或搭配细边框后，就会明显发虚。",[19,220,222],{"id":221},"调色时尽量用-hsl-或成体系的色阶","调色时尽量用 HSL 或成体系的色阶",[15,224,225],{},"如果团队只是在多个随机 HEX 值之间来回试，后续维护会非常困难。更实用的方式，是按色相、饱和度、明度来有意识地调整。",[15,227,228],{},"这样你就更容易回答这些实际问题：",[135,230,231,234,237],{},[138,232,233],{},"这个警告色应该更深一点，还是更低饱和一些？",[138,235,236],{},"边框是不是和卡片背景太接近了？",[138,238,239],{},"hover 状态需要明显加深，还是只要轻微变化就够？",[15,241,242,244],{},[32,243,122],{"href":39}," 在这一步很方便，因为它支持在 HEX、RGB、HSL 之间快速切换，也能顺手看配色关系和深浅变化。",[19,246,247],{"id":247},"最常见的无障碍配色错误",[15,249,250],{},"下面这些问题在产品里反复出现：",[135,252,253,256,259,262,265],{},[138,254,255],{},"为了“现代感”把正文做得太灰",[138,257,258],{},"只靠颜色表达错误或成功状态",[138,260,261],{},"红绿搭配对色觉缺陷用户不友好",[138,263,264],{},"焦点边框太弱，键盘导航时几乎看不见",[138,266,267],{},"把文字放到渐变或染色背景上，却没有重新检查对比度",[15,269,270],{},"一个很实用的原则是：只要这个状态重要，就不要只靠颜色。可以同时结合字重、图标、标签或形状变化。",[19,272,274],{"id":273},"把配色写成可复用规则工程实现才不会跑偏","把配色写成可复用规则，工程实现才不会跑偏",[15,276,277,278,282],{},"很多配色在设计稿里是对的，真正上线后却失真，原因往往不是设计不好，而是 token 没有被清楚记录。建议把每个颜色的用途和限制写明白。如果团队会把设计 token 放进配置文件或交接文档里，也可以顺手用 ",[32,279,281],{"href":280},"/dev/json-formatter","Anything Tools JSON Formatter"," 整理颜色对象，减少工程接入时的误读。",[15,284,285],{},"一份实用的颜色文档通常至少包括：",[135,287,288,291,294,297,300],{},[138,289,290],{},"token 名称",[138,292,293],{},"精确色值",[138,295,296],{},"适用背景",[138,298,299],{},"可用于文字还是只适合装饰",[138,301,302],{},"hover 与 active 变体",[19,304,305],{"id":305},"一个足够轻量的浏览器工作流",[15,307,308],{},"对大多数团队来说，下面这套流程就够用了：",[310,311,312,315,318,321,324],"ol",{},[138,313,314],{},"先确定品牌色或起始界面色。",[138,316,317],{},"生成相邻色阶和协调配色。",[138,319,320],{},"在真实按钮、卡片、输入框中测试。",[138,322,323],{},"去掉对比度太弱的组合。",[138,325,326],{},"把最终 token 整理成可复用格式。",[15,328,329],{},"这样做比每个页面单独调色更快，也更容易随着产品规模增长继续维护。",[19,331,70],{"id":70},[15,333,334],{},"无障碍 UI 配色的目标，是让用户更轻松地读懂界面、完成判断和操作。也就是说，文字要清楚，状态要明显，重点要稳定可见。",[15,336,337,338,340],{},"把颜色当成界面结构，而不是装饰层，会让产品质量更稳。如果你想快速开始建立这套结构，可以先用 ",[32,339,122],{"href":39}," 搭出候选配色，再放进真实组件里验证。",{"title":75,"searchDepth":76,"depth":76,"links":342},[343,344,345,346,347,348,349,350],{"id":126,"depth":76,"text":127},{"id":155,"depth":76,"text":156},{"id":194,"depth":76,"text":195},{"id":221,"depth":76,"text":222},{"id":247,"depth":76,"text":247},{"id":273,"depth":76,"text":274},{"id":305,"depth":76,"text":305},{"id":70,"depth":76,"text":70},"2026-03-29T00:00:00.000Z","一份实用指南，教你如何用更好的对比度、状态区分和浏览器工作流选择更易读的 UI 配色。","/blog/how-to-pick-accessible-ui-colors.png",{},"/blog/zh-cn/how-to-pick-accessible-ui-colors",8,{"title":104,"description":352},"blog/zh-CN/how-to-pick-accessible-ui-colors",[360,361,362,363,364],"无障碍设计","颜色选择器","UI 设计","WCAG","设计系统",[39,44],"Al5nZ4-CSTM60NFgX9aWWKlgYASXyBLD4WwJh0gS9T4",1783657426082]