shadcn/ui主题
生成shadcn/ui主题配置。 免费在线使用 shadcn/ui主题，无需注册，在浏览器中快速安全处理。
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
预览
组件预览
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}shadcn/ui主题 可帮助你直接在浏览器中处理颜色。
该工具适合需要快速可靠结果的设计师、开发者和创作者。
Supported formats
CSS
Tailwind
HSL
shadcn/ui
How it works
1
Step 1
打开 shadcn/ui主题
2
Step 2
输入或导入颜色
3
Step 3
复制、导出或复用结果
要避免的常见错误
- 忘记检查对比度可能影响可读性。
- 使用过多颜色会让调色板更难应用。
专业技巧
- 将主色保存为 CSS 变量。
- 发布前在浅色和深色模式下测试调色板。
Privacy guaranteed: everything is processed locally in your browser.
处理会尽可能在浏览器本地完成。无需账户。
用于颜色项目的shadcn/ui主题
生成shadcn/ui主题配置。
无精度损失的shadcn/ui主题
转换基于精确值（HEX、RGB、HSL、OKLCH）。无视觉近似——颜色完全忠于您的设计意图。
免费在线shadcn/ui主题
无需注册，无需下载软件。shadcn/ui主题100%免费，可在任何浏览器中使用。免费方案每天可使用10次。
快速安全的shadcn/ui主题
处理直接在浏览器内完成，速度极快。数据不会发送到服务器，您的颜色与文件保留在本地设备上。
用于分享与协作的shadcn/ui主题
将结果导出为 HEX、RGB、HSL、CSS、JSON，或一键复制。非常适合与团队共享颜色规范或记录设计系统。
探索所有颜色工具
只需几次点击即可提取、转换颜色，生成调色板、渐变和 WCAG 对比度。
Related tools
指南和教程
通过详细指南学习如何使用我们的工具。
Frequently asked questions
是的，该工具可免费在线使用。
为保护数据，处理会尽可能在浏览器中完成。