专业配色板实验室
浏览 5 套专业级配色方案 — 极简 SaaS、医疗蓝、复古电影、暗黑科技和生态绿。在网页设计模式（HEX、Tailwind CSS 类、RGB）和印刷模式（CMYK 值和 Pantone 近似色号）之间切换。一键复制任何颜色数值。
Minimal SaaS
Clean, high-contrast palette used by modern SaaS products. Neutral grays anchored by a confident indigo accent.
</> Code Output— click a swatch above
<div class="bg-indigo-500 text-gray-900 p-4 rounded-lg">
Primary
</div>
<!-- Button variant -->
<button class="bg-indigo-500 text-gray-900 px-4 py-2 rounded-lg font-medium hover:opacity-90">
Click me
</button>
<!-- Border variant -->
<div class="border-2 border-indigo-500 p-4 rounded-lg">
Outlined box
</div>Live Preview
Live UI Preview
This preview updates as you click color swatches above.
Medical Blue
Trustworthy, sterile palette for healthcare and medical applications. Calming blues and whites communicate safety and precision.
</> Code Output— click a swatch above
<div class="bg-sky-500 text-gray-900 p-4 rounded-lg">
Primary
</div>
<!-- Button variant -->
<button class="bg-sky-500 text-gray-900 px-4 py-2 rounded-lg font-medium hover:opacity-90">
Click me
</button>
<!-- Border variant -->
<div class="border-2 border-sky-500 p-4 rounded-lg">
Outlined box
</div>Live Preview
Live UI Preview
This preview updates as you click color swatches above.
Retro Film
Warm, faded tones inspired by analog photography. Earthy amber, dusty rose, and worn-paper cream.
</> Code Output— click a swatch above
<div class="bg-amber-600 text-gray-900 p-4 rounded-lg">
Warm Base
</div>
<!-- Button variant -->
<button class="bg-amber-600 text-gray-900 px-4 py-2 rounded-lg font-medium hover:opacity-90">
Click me
</button>
<!-- Border variant -->
<div class="border-2 border-amber-600 p-4 rounded-lg">
Outlined box
</div>Live Preview
Live UI Preview
This preview updates as you click color swatches above.
Dark Tech
High-impact dark UI palette for gaming, cybersecurity, and developer tools. Deep blacks with electric neon accents.
</> Code Output— click a swatch above
<div class="bg-slate-900 text-white p-4 rounded-lg">
Background
</div>
<!-- Button variant -->
<button class="bg-slate-900 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90">
Click me
</button>
<!-- Border variant -->
<div class="border-2 border-slate-900 p-4 rounded-lg">
Outlined box
</div>Live Preview
Live UI Preview
This preview updates as you click color swatches above.
Eco Green
Nature-inspired organic palette for sustainability brands, wellness, and environmental products. Deep forest greens and warm earth tones.
</> Code Output— click a swatch above
<div class="bg-green-800 text-white p-4 rounded-lg">
Forest
</div>
<!-- Button variant -->
<button class="bg-green-800 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90">
Click me
</button>
<!-- Border variant -->
<div class="border-2 border-green-800 p-4 rounded-lg">
Outlined box
</div>Live Preview
Live UI Preview
This preview updates as you click color swatches above.
Pantone references are visual estimates only — not derived from Pantone's proprietary database. CMYK values use the standard device-independent formula. Always verify against a physical Pantone Formula Guide before production use.
How it works
This 专业配色板实验室 runs entirely in your browser — no data is sent to any server. Simply fill in the fields above and the result updates instantly. You can copy the output with the copy button provided.
Frequently Asked Questions
Pantone 色号参考是精确匹配吗？
否。显示的 Pantone 色号是根据 RGB 接近度手动估算的，并非来自 Pantone 专有数据库。Pantone 官方 sRGB 映射表未公开授权。在生产应用前，请务必对照实体 Pantone 色卡或 Pantone 配方指南进行验证。
CMYK 数值如何计算？
CMYK 数值采用标准设备无关公式计算：K = 1 − max(R,G,B)；C = (1−R−K)/(1−K)；M = (1−G−K)/(1−K)；Y = (1−B−K)/(1−K)。实际印刷效果取决于打印机配置文件和纸张类型。
我可以在商业项目中使用这些配色方案吗？
可以。这些配色方案作为参考灵感提供。HEX 值和 Tailwind 类名可自由用于任何项目。Pantone 色号名称为 Pantone LLC 的商标。
Tailwind 类名是什么意思？
每种颜色显示最接近的 Tailwind CSS 实用类（例如 bg-indigo-500）。复制后可直接在 HTML 或 JSX 中使用，无需编写自定义 CSS。