速查在线工具箱配色与视觉设计
从取一个颜色，到生成一整页可用的 CSS
做设计或前端时，颜色相关的需求特别碎：从截图里取一个色值、把 RGB 换成 HEX、确认这组配色对比度够不够、生成一段渐变或阴影的 CSS。每件都很小，但一天下来会打断很多次思路。
这套合集把颜色相关的操作连成链路：取色 → 转换 → 配方案 → 查对比度 → 生成 CSS → 出图标与 Logo。全部在浏览器里完成，不需要打开设计软件。
按流程走一遍
直接看全部工具 →1取色与色值转换
从屏幕上直接取色比凭感觉调更准；取到色值后经常需要在 HEX、RGB、HSL 之间转换——HSL 调明度和饱和度更直观，HEX 用于交付。中文传统色和 Web 安全色则适合需要特定风格倾向的场景。
2搭配色方案
色轮用来找互补色和邻近色，配色方案工具负责把选中的颜色组织成可用的组合（主色、辅助色、点缀色）。两种颜色混合或取相反色时，直接算比在软件里试更快。
5生成 CSS 效果
渐变、阴影、圆角、条纹背景、毛玻璃和弹性布局，这些不用手写 CSS——调好参数直接复制代码，比自己试数值快得多，也更容易和设计稿对齐。
本合集全部 24 款工具
全部工具总览 →屏幕取色器 - 点击屏幕任意位置取色，支持HEX/RGB格式复制，基于EyeDropper API纯前端处理
在线颜色代码转换工具，支持HEX、RGB、HSL、CMYK等格式互转，支持颜色选择器和140+种CSS颜色名称查询，纯浏览器本地处理
RGB/HSL/HEX三向实时换算，支持滑块拖拽、色块预览、颜色历史记录、一键复制。
收录60种中国传统色彩，包含颜色名称、HEX/RGB/CMYK值及文化典故，点击可复制颜色值
216种网页安全色完整展示，支持搜索、按色系筛选、点击复制颜色值，网页设计必备
在线 Canvas 交互式 HSL 色轮工具，点击或拖动色轮选色，自动生成互补、相邻、三色、四色、分裂互补、同色系 6 种配色方案，支持 HEX/RGB/HSL/HSV 互转与一键复制。
输入主色自动生成和谐配色，支持互补色、相邻色、单色渐变等多种模式，一键复制色值
在线混合两种颜色得到新颜色，可调节混合比例，实时预览并给出 HEX、RGB、HSL 三种格式结果
在线计算颜色的反相色与互补色，同时给出灰度值、对比文字色建议与可访问性对比度，支持实时预览
输入 HEXA/RGBA 颜色值，棋盘格背景实时预览透明效果，支持取色器与透明度滑块，一键复制 HEXA/RGBA/HEX/RGB 各格式
检测前景背景色对比度是否符合WCAG AA/AAA无障碍标准
图片颜色提取工具，从图片中提取主要颜色，生成调色板，支持HEX/RGB格式复制，纯浏览器本地处理
在线颜色预览工具，支持HEX、RGB、颜色名输入并实时预览色块，新增WCAG对比度检测（前景/背景色可读性合规）、颜色历史记录与常用色板，设计师与前端开发调色必备
RGB 与 CMYK 颜色互转工具，附常用颜色对照表与印刷用色提示，支持取色器实时换算
在线生成linear-gradient、radial-gradient、conic-gradient，可视化编辑色标，一键复制CSS代码
在线生成box-shadow、text-shadow、drop-shadow，可视化编辑阴影参数，内置Material Design标准预设，一键复制CSS代码
在线生成 CSS 毛玻璃（Glassmorphism）效果代码，实时预览模糊、透明度、圆角与边框参数，一键复制即用
可视化编辑border-radius四角独立圆角半径，支持联动/独立模式切换，px/%单位，8种预设形状，一键复制简化CSS代码
在线生成CSS条纹背景代码，支持多颜色、角度调整、拖拽排序、实时预览
CSS Flexbox生成器 - 可视化配置flex-direction、justify-content、align-items等属性，实时预览生成CSS代码
同时预览多种字体渲染效果，支持字号调节、颜色切换、分类筛选，适合设计师和前端开发者
纯文字LOGO生成器 - 在线生成文字Logo，支持多种字体、渐变色、阴影描边，导出透明PNG
上传PNG/JPG图片，一键转换为SVG矢量格式，支持尺寸调节和简化程度控制
在线生成自定义尺寸、颜色与文字的占位图片，支持预览与下载，做设计稿、原型与前端调试必备，纯浏览器本地处理
关于「配色与视觉设计」的常见问题
同一组颜色，为什么在不同屏幕上看着不一样？
不同设备的色域和色温不同，同一色值在广色域屏幕上会显得更鲜艳。稳妥做法是只在 sRGB 色域内取色，并以主流设备的实际观感为准，而不是以某个特定屏幕为准。
对比度多少才算达标？
按无障碍规范，正文文字的对比度建议不低于 4.5:1，大号标题可以放宽到 3:1。这是底线而非目标——实际设计时通常要做得更高，因为在户外或低亮度屏幕上会打折扣。
HSL 和 RGB 该用哪个？
两者描述的是同一件事。调色时用 HSL 更直观（明度、饱和度分别控制），交付给前端或写进代码时用 HEX 或 RGB。设计过程中的转换是常态，不需要纠结统一用哪一套。
为什么我的设计看起来"脏"？
通常是颜色太多或饱和度过高。建议把主色控制在 1 个、辅助色 1–2 个，其余用黑白灰体系；所有颜色的饱和度尽量保持接近，避免一个色特别跳。
CSS 生成的代码能直接用于生产吗？
可以，但仍建议检查两点：一是兼容性前缀是否覆盖你的目标浏览器；二是数值是否符合项目的设计规范（间距、圆角通常有统一标准），避免局部效果与整体风格不统一。