# 背景颜色展示






视觉锤（让人一眼认出）

你这个名字很适合做视觉记忆：

建议：

主色：青色 + 浅绿（强化“青芒”）
图标：小岛 + 芒果 + 波浪 🌊
形状统一：圆角、柔和（记忆更友好）

👉 目标：
用户刷到就知道



紫色：#5A56E9


✅ Copy success!

#5A56E9

# 免费截屏（Pixpin）

https://pixpin.cn/

截图	Ctrl + 1	最常用的功能，进入截图界面。
贴图	Ctrl + 2	将剪贴板的内容贴在屏幕上常驻。
恢复上次关闭的贴图	Ctrl + 3	不小心关掉了贴图窗口，可以用它找回。

✅ Copy success!

# 免费开源颜色获取器（Color Picker）

# 1. PowerToys Color Picker (Windows 首选)【Windows 用户，追求稳定且全能】

如果你使用的是 Windows 10 或 11，最推荐的是微软官方开发的 PowerToys。它内置了一个系统级的颜色选择器，按 Win + Shift + C 即可在屏幕任何位置取色。

microsoft/PowerToys特点: 官方维护、极致稳定、支持多种颜色格式（HEX, RGB, HSL 等）、内置缩放器可以精确到像素。

GitHub 地址: https://github.com/microsoft/PowerToys (opens new window)

# 2. ColorPicker (全平台/设计者推荐)【苹果 Mac 用户，或追求高颜值 UI】

这是一款基于 Electron 开发的现代颜色工具，拥有非常漂亮的 UI，适合设计师和前端开发。

特点: 支持 Windows、macOS 和 Linux。除了取色，还自带“颜色书”功能来管理你的调色板，并能生成阴影和色调。

GitHub 地址: https://github.com/Toinane/colorpicker (opens new window)

# 3. ColorPicker (轻量化/原生)【只需要一个简单的 EXE 绿色版取色器】

如果你觉得 PowerToys 太重，只想要一个独立的小工具，这个由个人开发者维护的项目非常出色。特点: 只有几 MB 大小，运行飞快，支持历史记录显示。

GitHub 地址: https://github.com/martinchrzan/ColorPicker (opens new window)




✅ Copy success!

# 宠物社区 App 配色方案预览

# 1. 温暖治愈系 (推荐度：⭐⭐⭐⭐⭐)

适合：全品类宠物社交、领养、日常记录。给人温暖、亲切的视觉感受。

#FF8D1A

#FFB400

#FFECD9

# 2. 专业信任系 (推荐度：⭐⭐⭐⭐)

适合：宠物医疗、在线问诊、科学养宠指南。传递专业、可靠、干净的信号。

#4A90E2

#5CACEB

#A5C8ED

# 3. 自然健康系 (推荐度：⭐⭐⭐⭐)

适合：户外活动、宠物食品推荐、生命力主题。呼应自然与健康。

#679267

#8FBC8F

#C3D8C3

# 4. 梦幻潮流系 (推荐度：⭐⭐⭐)

适合：精致猫咖、宠物美容、高颜值萌宠选美。符合年轻女性审美倾向。

#9D85E1

#F1A7B5

#F1E9FF

这个页面使用 VuePress 直接渲染颜色效果，不只展示代码，还能在页面里直接看到主色、渐变、背景层级和按钮状态。

# 核心主色

Primary

#1BB8AF

品牌主色，适合按钮、图标、强调信息

Primary Dark

#159A93

按压态、hover、激活状态

Primary Light

#E8F8F7

浅色背景、弱强调、镂空按钮底色

--primary-color: #1BB8AF;
--primary-dark: #159A93;
--primary-light: #E8F8F7;
✅ Copy success!

# 渐变效果展示

background: linear-gradient(135deg, #1BB8AF 0%, #6EE7B7 100%);
background: linear-gradient(135deg, #2EC4B6 0%, #A8E6CF 100%);
background: linear-gradient(135deg, #00C9A7 0%, #92FE9D 100%);
✅ Copy success!

# 背景与文字层级

页面背景

#F5FBFA

卡片背景

#FFFFFF

浅绿背景块

#EAFBF6

主标题 #1F2D3D

次级文字 #5A6C7D

占位提示 #A0AEC0

品牌强调 #1BB8AF

--bg-color: #F5FBFA;
--card-bg: #FFFFFF;
--bg-light-green: #EAFBF6;

--text-primary: #1F2D3D;
--text-secondary: #5A6C7D;
--text-placeholder: #A0AEC0;
--text-brand: #1BB8AF;
✅ Copy success!

# 状态色与按钮示例

Success #22C55E

Warning #F59E0B

Error #EF4444

--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;

.button-primary {
  background: linear-gradient(135deg, #1BB8AF 0%, #6EE7B7 100%);
  color: #FFFFFF;
  border-radius: 12rpx;
}

.button-ghost {
  background: #E8F8F7;
  color: #1BB8AF;
}
✅ Copy success!

# 建议变量

:root {
  --primary-color: #1BB8AF;
  --primary-dark: #159A93;
  --primary-light: #E8F8F7;

  --bg-color: #F5FBFA;
  --card-bg: #FFFFFF;
  --bg-light-green: #EAFBF6;

  --text-primary: #1F2D3D;
  --text-secondary: #5A6C7D;
  --text-placeholder: #A0AEC0;
  --text-brand: #1BB8AF;

  --border-color: #E6F0EE;
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
}
✅ Copy success!


✅ Copy success!

直接给你一套可落地的「青岛」配色体系（偏产品级）」，包含：主色 / 渐变 / 背景 / 文字 / 辅助色，直接能用在 uniapp / 小程序。

# 一、核心主色（青芒感）

建议主色不要太“纯绿”，要偏一点青（更高级）

/* 主色（品牌色） */
--primary-color: #1BB8AF;

/* 主色加深（用于hover / 点击） */
--primary-dark: #159A93;

/* 主色浅色（用于背景淡化） */
--primary-light: #E8F8F7;
✅ Copy success!

👉 特点：清爽、科技感、有记忆点（推荐主色）

# 二、青色 + 浅绿渐变（重点推荐🔥）

用于：顶部背景 / 卡片 / Banner

background: linear-gradient(135deg, #1BB8AF 0%, #6EE7B7 100%);
✅ Copy success!

再给你2套备选👇

# 方案2（更清新）

background: linear-gradient(135deg, #2EC4B6 0%, #A8E6CF 100%);
✅ Copy success!

# 方案3（更高级偏蓝）

background: linear-gradient(135deg, #00C9A7 0%, #92FE9D 100%);
✅ Copy success!

# 三、背景色（非常关键，决定高级感）

/* 页面大背景 */
--bg-color: #F5FBFA;

/* 卡片背景 */
--card-bg: #FFFFFF;

/* 浅绿色背景块 */
--bg-light-green: #EAFBF6;
✅ Copy success!

👉 原则：

不用纯白铺满
用一点点青绿色调，增强品牌统一

# 四、文字颜色（一定要分层）

/* 主标题 */
--text-primary: #1F2D3D;

/* 次标题 */
--text-secondary: #5A6C7D;

/* 弱提示 */
--text-placeholder: #A0AEC0;

/* 品牌强调文字 */
--text-brand: #1BB8AF;
✅ Copy success!

# 五、边框 / 分割线

--border-color: #E6F0EE;
✅ Copy success!

# 六、状态色（建议统一风格）

/* 成功 */
--success: #22C55E;

/* 警告 */
--warning: #F59E0B;

/* 错误 */
--error: #EF4444;
✅ Copy success!

# 七、按钮推荐写法（直接用）

.button-primary {
  background: linear-gradient(135deg, #1BB8AF 0%, #6EE7B7 100%);
  color: #FFFFFF;
  border-radius: 12rpx;
}

.button-ghost {
  background: #E8F8F7;
  color: #1BB8AF;
}
✅ Copy success!

# 八、给你一套完整视觉感觉（总结）

👉 风格关键词：

清新（浅绿）
科技（偏青）
轻量（低饱和背景）

👉 记忆点：

一看到这种青绿色渐变 = 青岛

# 九、额外建议（设计层关键点）

别只用颜色，还要配合：

圆角（12rpx ~ 20rpx）
阴影（轻一点）

box-shadow: 0 8rpx 24rpx rgba(27, 184, 175, 0.1);
✅ Copy success!

# 如果你想更进一步

我可以帮你直接做一套：

✅ 小程序 UI 设计稿（首页结构） ✅ tabbar 配色 ✅ 图标风格（青岛专属） ✅ 或者一套“高级一点 / 年轻一点 / AI感”的版本

你只要说一句： 👉 想要“偏年轻 / 偏商务 / 偏AI感”哪种风格，我直接给你升级一版完整视觉方案。

=============




✅ Copy success!

# 🍵 抹茶绿主题预览

# 🌿 主色展示

主色：#7FBF7F 深色：#5FA65F 浅色：#CFE9CF 背景：#F3FBF3

# 🧩 按钮效果

# 📦 卡片效果

这是一个抹茶绿风格的卡片，适合用在内容区、信息展示等场景。

# 🌈 渐变效果

← common_css 公共方法 🧩🧩AI claude Code →