從單一基色生成色調
我們的免費線上工具可立即為您選擇的任何顏色產生各種色調和色度。無論您是設計師、開發者還是數位藝術家，只需輸入十六進位程式碼或選擇一種顏色（例如 Medium Purple），我們的生成器就會產生完整的調色板，其中包含精美的漸層色。使用這些顏色可以建立引人注目的 UI 元件、創建引人入勝的插圖，或為您的下一個專案產生動態 CSS 主題。
使用右側的工具面板調整基底色，即可變更色調範圍。使用編輯按鈕更改基色。左側的預覽元件會隨著您的變更自動更新。輕鬆建立 CSS、Tailwind、SwiftUI 或 CSS 變數的值，並將其複製到剪貼簿。
Example Components
Premium Wireless Headphones
High-fidelity audio with active noise cancellation, premium materials, and up to 30 hours of battery life. Perfect for music enthusiasts and professionals.
Alex Chen
Mar 15, 2025
The Future of Web Development: AI-Powered Tools and Automation
Explore how artificial intelligence is revolutionizing web development workflows, making developers more productive and efficient than ever before.
Web Development Workshop 2025
Join us for an intensive workshop on modern web development practices. Learn about the latest frameworks, tools, and techniques from industry experts. This hands-on session will cover everything from frontend development to backend architecture and deployment strategies.
Tech Innovation Hub
123 Developer Street, Silicon Valley, CA
45 going
5 spots left
Revenue Overview
Monthly revenue performance and key metrics
Total Revenue
vs. last month
Average Order Value
vs. last month
Conversion Rate
vs. last month
Active Customers
vs. last month
Button States
Demonstration of primary button states: normal, hover, active, and disabled
Normal State
Hover State
Active State
Interactive Example
Disabled State
Explore More Color Shades
Medium Purple
medium-purple-50: #eae1f8;
medium-purple-100: #d6c4f2;
medium-purple-200: #c0a8ea;
medium-purple-300: #aa8ce3;
medium-purple-400: #9370db;
medium-purple-500: #7d60b8;
medium-purple-600: #675097;
medium-purple-700: #534077;
medium-purple-800: #3f3158;
medium-purple-900: #2c233b;
medium-purple-950: #1a1521;