阿杰，我帮你整理了一些 前端开发自用的免费配色网站，颜色丰富，适合网页、UI 设计或前端项目使用。

一、专业配色网站

网站特色链接
Coolors一键生成调色板，支持导出多种格式，颜色丰富https://coolors.co
Color Hunt网友分享的精美调色板，分类清晰https://colorhunt.co
Flat UI Colors扁平化 UI 颜色，常用网页色https://flatuicolors.com
Adobe ColorAdobe 官方，支持色轮、渐变、配色规则https://color.adobe.com
Material PaletteGoogle Material Design 风格配色https://www.materialpalette.com

二、辅助工具类网站

网站功能链接
Paletton可调节主色、辅助色、对比色生成完整配色方案http://paletton.com
ColorSpace输入一个主色，自动生成渐变色、补色、调和色https://mycolor.space
ColormindAI 自动生成配色方案，适合网页/UIhttp://colormind.io
Colorable检查配色的可读性和对比度，适合无障碍设计https://colorable.jxnblk.com

三、使用建议

  1. 保存常用色板
    • 可以在项目中创建 colors.css 或 variables.scss 保存常用颜色。
  2. 考虑色彩可读性
    • 配色不仅美观，还要保证文字和背景的对比度足够。
    • 可以使用 Colorable 或 contrast-ratio 工具检查对比度。
  3. 搭配渐变色
    • 有些网站如 Coolors、ColorSpace 支持一键生成渐变色，可增加界面层次感。
  4. 参考设计规范
    • 对应 Material Design、Ant Design 等组件库，可以直接使用其配色规范，避免自定义配色带来的不一致。

好的，阿杰，我帮你整理了一份 前端自用全色系配色速查表，包含主色、辅助色、强调色和渐变色，方便直接在项目中引用。

前端自用全色系配色速查表

1. 红色系 (Red)

色名HEXRGB用途
鲜红#FF4C4Crgb(255,76,76)按钮、警告提示
樱桃红#FF6B81rgb(255,107,129)文字强调、装饰
酒红#8B0000rgb(139,0,0)背景、深色强调
渐变#FF4C4C → #FF6B81—按钮、Banner

2. 橙色系 (Orange)

色名HEXRGB用途
橘黄#FFA500rgb(255,165,0)提示、徽章
胡萝卜#FF8C00rgb(255,140,0)按钮、图标
渐变#FFA500 → #FF8C00—Banner、装饰条

3. 黄色系 (Yellow)

色名HEXRGB用途
柠檬黄#FFF44Frgb(255,244,79)高亮、标签
金黄#FFD700rgb(255,215,0)装饰、强调元素
渐变#FFF44F → #FFD700—按钮、渐变背景

4. 绿色系 (Green)

色名HEXRGB用途
浅绿#32CD32rgb(50,205,50)成功提示、标签
草绿#00FA9Argb(0,250,154)按钮、标记
深绿#006400rgb(0,100,0)背景、图标
渐变#32CD32 → #00FA9A—Banner、按钮

5. 蓝色系 (Blue)

色名HEXRGB用途
天蓝#1E90FFrgb(30,144,255)链接、按钮
蓝宝石#4169E1rgb(65,105,225)背景、卡片
深蓝#00008Brgb(0,0,139)页脚、标题
渐变#1E90FF → #4169E1—Banner、按钮

6. 紫色系 (Purple)

色名HEXRGB用途
淡紫#DA70D6rgb(218,112,214)背景、按钮
紫罗兰#8A2BE2rgb(138,43,226)标题、强调文字
深紫#4B0082rgb(75,0,130)背景、装饰
渐变#DA70D6 → #8A2BE2—Banner、按钮

7. 灰色系 (Gray)

色名HEXRGB用途
浅灰#D3D3D3rgb(211,211,211)背景、分割线
中灰#A9A9A9rgb(169,169,169)按钮禁用状态
深灰#696969rgb(105,105,105)文字、图标
渐变#D3D3D3 → #A9A9A9—背景、阴影

8. 黑白系 (Black & White)

色名HEXRGB用途
白#FFFFFFrgb(255,255,255)背景、卡片
黑#000000rgb(0,0,0)文字、标题
灰黑#2F2F2Frgb(47,47,47)页脚、暗模式
渐变#FFFFFF → #000000—背景渐变、装饰

9. 使用建议

  1. 主色 + 辅助色 + 强调色
    • 主色：占比 60%（背景或主要元素）
    • 辅助色：占比 30%（卡片、按钮、次级元素）
    • 强调色：占比 10%（高亮、重要信息）
  2. 渐变色搭配
    • 按钮、Banner 或图标可使用同色系渐变增加层次感。
  3. 保持对比度
    • 避免文字和背景颜色太接近，可使用黑白或灰色辅助。
  4. 可复用 CSS 变量
:root {
  --color-primary: #1E90FF;
  --color-secondary: #32CD32;
  --color-accent: #FF4C4C;
  --color-background: #FFFFFF;
  --color-text: #000000;
}
  • 项目中统一调用，方便维护和修改。