染色體
描述
Chromaverse是一個複雜的Web應用程序，允許用戶根據十六進制值，隨機輸入或基於情緒的描述生成和比較調色板。用戶可以生成多個調色板，查看各個顏色詳細信息，下載調色板，並在並排視圖中進行比較。該設計既時尚又專業，具有懸停效果，顏色預覽以及調色板和漸變的高級下載功能。
特徵
- 多個十六進制輸入：用戶可以輸入多個通過逗號分開的十六進制值，以生成單個顏色色板和梯度。
- 顏色的自動檢測：輸入任何文本或情緒描述，系統將嘗試根據輸入提取相關的十六進制值或生成顏色。
- 圓形顏色顯示：每個生成的顏色都以圓形色板顯示，以更好地可視化。
- 梯度生成：自動提供所有生成顏色的梯度。
- 顏色下載：下載整個調色板或生成的梯度作為PNG圖像。
- 十六進制值顯示：在調色板中顯示每種顏色的單個十六進制值，並帶有一個“複製”按鈕，可輕鬆複製十六進制代碼。
- 懸停效果：增強的懸停效果使懸停時的單個顏色彈出，從而改善了用戶體驗。
- 顏色選擇器：可用顏色選擇器工具，允許用戶手動選擇顏色並實時顯示其十六進制值。
- 多個調色板：連續產生多個調色板。每個調色板都有一個選擇刪除它的選項，並發出警報消息以進行確認。
- 比較調色板：將調色板添加到“比較列表”中，以在視覺上比較並排視圖中的不同顏色組合。
- 刪除並清除所有調色板：用戶可以從比較列表中刪除單個調色板，或清除清理之前先清除所有調色板。
- 下載比較列表：將所有調色板下載在比較列表中作為單個PNG圖像。
- 專業風格：具有現代CSS技術的高級UI設計，例如玻璃塑料，平穩的過渡和響應式設計，可確保應用程序看起來很精緻且專業。
如何使用
- 輸入十六進制值：在輸入字段中，您可以輸入一個或多個由逗號分隔的十六進制值。可選地，輸入文本說明或情緒，系統將自動檢測並為您生成顏色。
- 生成調色板：單擊“生成”按鈕以生成調色板。顏色顯示為圓形色板，還顯示了所有顏色的梯度。
- 懸停在顏色上：將鼠標移到各個顏色上，以查看增強的預覽並查看相應的十六進制代碼。
- 下載選項：使用提供的按鈕將生成的調色板或梯度作為PNG文件下載。
- 複製十六進制值：使用每種顏色旁邊的“複製”按鈕複製單獨的十六進制代碼。
- 添加到比較列表：單擊“添加到比較列表”以將生成的調色板移至比較部分。
- 比較和刪除調色板：查看和比較多個調色板，刪除單獨的調色板，或用確認警報清除所有調色板。
- 下載比較列表：比較調色板後，將它們全部下載為單個PNG圖像，以供將來參考。
安裝說明
克隆存儲庫：
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
在您的瀏覽器中打開index.html ：
文件結構
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
代碼概述
html
- HTML提供了輸入字段，按鈕，顏色顯示，比較列表和下載選項的結構。
- 它使用
<input> ， <button> ， <div>和<canvas>元素來構建UI並與JavaScript交互以獲得功能。
CSS
- CSS包括用於懸停效果，玻璃塑料，暗模式支持，響應設計和其他現代UI元素的高級樣式。
- 顏色是使用CSS變量控制的，使其易於在光模式和深色模式之間切換。
JavaScript
- JavaScript用於從用戶輸入，處理十六進制提取，管理比較列表，啟用圖像下載並添加諸如Hover效果和警報等交互性的情況下生成調色板。
- 代碼利用畫布用於渲染圖像，用於下載和剪貼板API，用於復制十六進制值。
使用的技術
- HTML5 ：為應用程序提供結構。
- CSS3 ：負責響應式設計，懸停效果和現代玻璃塑料樣式。
- JavaScript ：處理用於生成調色板，提取顏色，下載圖像和交互性的邏輯。
- 帆布API ：用於生成可下載的調色板和漸變圖像。
執照
該項目已根據MIT許可獲得許可。有關詳細信息，請參見許可證文件。
