mcpField
T
tinted-neutrals

tinted-neutrals

github.com/basiclines设计与 UI1640 次安装32 周前更新
代码仓库

关于 tinted-neutrals

tinted-neutrals 是一份使用 Rampa 生成品牌色调中性色调色板的设计技能，适合需要让灰色与品牌色协调的设计系统。它说明了色彩 tint、混合模式和强度的设置方法。

主要功能

  1. 01从品牌色生成去饱和中性色
  2. 02为调色板叠加品牌色 tint
  3. 03调节 tint 强度与混合模式
  4. 04以 CSS 格式输出色阶

适用场景

  1. 01为设计系统创建品牌协调的灰色
  2. 02生成偏暖或偏冷的中性色
  3. 03比较不同 tint 强度的色板

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/basiclines/rampa-studio --skill tinted-neutrals

安装后在 Claude Code 中输入/tinted-neutrals确认已加载。

详细介绍

染色中性色

创建带有品牌色彩微妙色调的中性色板。用与设计系统协调的暖色或冷色中性色，取代纯灰色。

适用场景

  • “创建与我的品牌相配的灰色”
  • “我想要暖色／冷色中性色”
  • “让我的灰色不那么单调”
  • “用品牌色为中性色板染色”

安装

npx @basiclines/rampa

配方

1. 纯中性色（降低品牌色饱和度）

从基于品牌色相、但饱和度大幅降低的中性色开始：

rampa -C "<brand-color>" -L 98:5 -S 3:8 --size=10 -O css --name=neutral
2. 染色中性色

将品牌色作为微妙的叠加色调：

rampa -C "<brand-color>" -L 98:5 -S 3:8 --tint-color="<brand-color>" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=neutral-tinted

要点：--tint-color 使用相同的品牌色，无需硬编码值！

色调强度选项

微妙色调（5-8%）

几乎察觉不到，但会增添暖意或冷感：

--tint-opacity=6 --tint-blend=overlay
中等色调（10-15%）

色调明显，但仍保持中性：

--tint-opacity=12 --tint-blend=overlay
强烈色调（18-25%）

显然带有颜色的中性色：

--tint-opacity=20 --tint-blend=soft-light

混合模式选项

模式效果
overlay色调均衡，适合作为默认选项
soft-light更柔和、更微妙
multiply更暗、更浓郁的色调
screen更明亮、更轻盈的色调
color应用色相，但不改变亮度

完整示例

品牌色为 #7c3aed（紫色）：

# Pure neutral (cool-ish from purple hue)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --size=10 -O css --name=gray

# Tinted neutral (purple tint)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=gray-tinted

# Compare: extra warm variant
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=15 --tint-blend=soft-light --size=10 -O css --name=gray-warm

输出结构

:root {
  /* Pure neutral */
  --gray-0: #fafafa;
  --gray-1: #f4f4f5;
  --gray-9: #18181b;

  /* Tinted neutral */
  --gray-tinted-0: #faf8fc;
  --gray-tinted-1: #f3f0f7;
  --gray-tinted-9: #1a1720;
}

提示

  1. 始终使用品牌色作为色调来源，切勿硬编码灰色
  2. overlay 混合模式适用于大多数情况
  3. 若要“仍然感觉中性”，请将不透明度保持在 15% 以下
  4. 在浅色和深色背景上都进行测试
  5. 染色中性色能让白色文字在深色背景上更醒目

评论

支持 Markdown