染色体
描述
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许可获得许可。有关详细信息，请参见许可证文件。
