346 lines
18 KiB
JavaScript
346 lines
18 KiB
JavaScript
/**
|
||
* 画个标 · 技能库：配色类（color）
|
||
* 注册：HGB_Skills.register([...])
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
const U = HGB_Skills.utils;
|
||
const { lum, contrast } = U;
|
||
|
||
HGB_Skills.register([
|
||
{
|
||
id: 'contrast-check',
|
||
name: '对比度校验',
|
||
category: 'color',
|
||
emoji: '🎨',
|
||
scene: '配色合规检查（WCAG 2.1 AA）',
|
||
summary: '计算主色与背景的对比度并对照 WCAG AA（正文 ≥4.5:1，大文本/UI ≥3:1），深色主色配深色背景时给出调亮建议。',
|
||
params: [
|
||
{ name: 'foreground', type: 'string', required: true, desc: '前景色（主色）HEX' },
|
||
{ name: 'background', type: 'string', required: true, desc: '背景色 HEX' }
|
||
],
|
||
source: 'GitHub: stagius/flowize DESIGN_SYSTEM.md（WCAG AA 体系）',
|
||
run: function (args) {
|
||
const fg = args.foreground || '#1B4F72';
|
||
const bg = args.background || '#FFFFFF';
|
||
const ratio = contrast(fg, bg);
|
||
return {
|
||
foreground: fg, background: bg, ratio,
|
||
passLarge: ratio >= 3, passText: ratio >= 4.5,
|
||
verdict: ratio >= 4.5 ? 'AA 达标（正文可用）' : (ratio >= 3 ? '仅限大文本/UI' : '不达标，建议加深前景或调亮背景')
|
||
};
|
||
},
|
||
test: function () {
|
||
return {
|
||
light: this.run({ foreground: '#1B4F72', background: '#FFFFFF' }),
|
||
dark: this.run({ foreground: '#0F172A', background: '#0F172A' })
|
||
};
|
||
}
|
||
},
|
||
{
|
||
id: 'color-harmony',
|
||
name: '行业配色推荐',
|
||
category: 'color',
|
||
emoji: '🌈',
|
||
scene: '按行业与品牌气质推荐和谐配色',
|
||
summary: '从行业推荐配色与全局配色库中筛选贴合品牌描述的方案，返回主色/辅色/点缀色与适用场景。',
|
||
params: [
|
||
{ name: 'industry', type: 'string', required: true, desc: '行业 id（edu/food/health/tech/sport/finance）' },
|
||
{ name: 'desc', type: 'string', required: false, desc: '品牌描述（可含色系偏好）' }
|
||
],
|
||
source: 'GitHub: design-resources-for-developers（配色资源索引）+ 自研行业库',
|
||
run: function (args) {
|
||
const ind = HGB_Industries.find(x => x.id === args.industry) || HGB_Industries[0];
|
||
const desc = String(args.desc || '');
|
||
const pool = [...(ind.palettes || []), ...HGB_Palettes];
|
||
const keywordMap = [
|
||
{ kw: ['蓝', '科技', '理性'], field: 'colors', idx: 0, hint: '科技蓝系' },
|
||
{ kw: ['橙', '暖', '美食'], field: 'colors', idx: 0, hint: '温暖暖色系' },
|
||
{ kw: ['绿', '健康', '自然'], field: 'colors', idx: 0, hint: '清新绿系' }
|
||
];
|
||
const matched = [];
|
||
for (const m of keywordMap) {
|
||
if (m.kw.some(k => desc.includes(k))) {
|
||
const pal = pool.find(p => p.colors && p.colors[0] && lum(p.colors[0]) > 0.05) || pool[0];
|
||
if (pal && !matched.includes(pal.name)) matched.push(pal.name + '（' + m.hint + '）');
|
||
}
|
||
}
|
||
return {
|
||
industry: ind.name,
|
||
desc: desc || '（无偏好）',
|
||
recommend: pool.slice(0, 3).map(p => p.name),
|
||
match: matched
|
||
};
|
||
},
|
||
test: function () {
|
||
return this.run({ industry: 'food', desc: '温暖治愈的橙色系烘焙品牌' });
|
||
}
|
||
},
|
||
{
|
||
id: 'palette-build',
|
||
name: '品牌色板生成',
|
||
category: 'color',
|
||
emoji: '🖌️',
|
||
scene: '从品牌描述生成主/辅/点缀三级色板',
|
||
summary: '解析品牌描述中的色系关键词，从配色库提取一套 主色+辅色+点缀色 的完整色板，并附明暗度与搭配说明。',
|
||
params: [
|
||
{ name: 'desc', type: 'string', required: true, desc: '品牌描述（含色系/气质偏好）' },
|
||
{ name: 'industry', type: 'string', required: false, desc: '行业 id' }
|
||
],
|
||
source: '自研（基于行业色板 + 关键词色系匹配）',
|
||
run: function (args) {
|
||
const desc = String(args.desc || '');
|
||
const ind = HGB_Industries.find(x => x.id === args.industry);
|
||
const pool = [...(ind ? ind.palettes || [] : []), ...HGB_Palettes];
|
||
const toneMap = [
|
||
{ kw: ['蓝', '科技', '理性', '沉稳'], idx: 0 },
|
||
{ kw: ['橙', '暖', '美食', '活力'], idx: 0 },
|
||
{ kw: ['绿', '健康', '自然', '环保'], idx: 0 },
|
||
{ kw: ['红', '热烈', '喜庆', '激情'], idx: 0 },
|
||
{ kw: ['紫', '优雅', '神秘', '高端'], idx: 0 },
|
||
{ kw: ['金', '贵气', '奢华', '复古'], idx: 0 }
|
||
];
|
||
let pal = null;
|
||
for (const t of toneMap) {
|
||
if (t.kw.some(k => desc.includes(k))) {
|
||
pal = pool.find(p => p.colors && p.colors.length >= 3);
|
||
if (pal) break;
|
||
}
|
||
}
|
||
pal = pal || pool.find(p => p.colors && p.colors.length >= 3) || pool[0] || { colors: ['#1B4F72', '#2E86C1', '#F5B041'] };
|
||
const c = pal.colors;
|
||
const palette = { primary: c[0], secondary: c[1] || c[0], accent: c[2] || c[1] || c[0] };
|
||
const bright = lum(palette.primary) > 0.5;
|
||
return {
|
||
desc: desc || '（无偏好）',
|
||
palette,
|
||
contrast: Math.round(contrast(palette.primary, '#FFFFFF') * 100) / 100,
|
||
usage: `${palette.primary} 主色（品牌核心）/ ${palette.secondary} 辅色（次层级）/ ${palette.accent} 点缀色（CTA/高亮）`,
|
||
tone: bright ? '亮色系' : '深色系',
|
||
note: bright ? '建议搭配深色文字保证对比度' : '建议搭配浅色背景凸显品牌色'
|
||
};
|
||
},
|
||
test: function () {
|
||
return this.run({ desc: '科技感十足的蓝色软件品牌' });
|
||
}
|
||
},
|
||
{
|
||
id: 'gradient-suggest',
|
||
name: '渐变搭配建议',
|
||
category: 'color',
|
||
emoji: '🌅',
|
||
scene: '品牌色渐变色相搭配推荐',
|
||
summary: '基于品牌主色推荐和谐渐变色相（同色系渐变/互补渐变/邻近渐变三类），并给出渐变方向与使用场景。',
|
||
params: [
|
||
{ name: 'color', type: 'string', required: true, desc: '主色 HEX' }
|
||
],
|
||
source: '自研（基于色相环渐变理论）',
|
||
run: function (args) {
|
||
const color = String(args.color || '#1B4F72').replace('#', '');
|
||
if (color.length !== 6) return { error: '需提供 6 位 HEX 色值' };
|
||
const r = parseInt(color.slice(0, 2), 16), g = parseInt(color.slice(2, 4), 16), b = parseInt(color.slice(4, 6), 16);
|
||
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||
const l = (max + min) / 2 / 255;
|
||
let h = 0;
|
||
if (max !== min) {
|
||
const d = max - min;
|
||
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
|
||
else if (max === g) h = ((b - r) / d + 2) * 60;
|
||
else h = ((r - g) / d + 4) * 60;
|
||
}
|
||
const variants = [
|
||
{ name: '同色系渐变', hue: h, note: '由深到浅同色相，稳重安全，适合企业品牌' },
|
||
{ name: '互补渐变', hue: (h + 180) % 360, note: '与主色互补，视觉冲击强，适合活动/电商' },
|
||
{ name: '邻近渐变', hue: (h + 30) % 360, note: '邻近色相过渡自然，柔和现代，适合科技品牌' }
|
||
];
|
||
return { color: '#' + color, hue: Math.round(h), lightness: Math.round(l * 100) + '%', variants };
|
||
},
|
||
test: function () {
|
||
return this.run({ color: '#1B4F72' });
|
||
}
|
||
},
|
||
{
|
||
id: 'color-blind-check',
|
||
name: '色盲友好检查',
|
||
category: 'color',
|
||
emoji: '🧑🦱',
|
||
scene: '红绿色盲场景下的主色与背景可区分度检查',
|
||
summary: '基于常见红绿色盲（约 8% 男性）感知模型，检查前景与背景是否同属红绿系且对比不足，给出改蓝/紫或加大明度差的建议。',
|
||
params: [
|
||
{ name: 'plan', type: 'object', required: true, desc: '方案对象 {bg, elements}' }
|
||
],
|
||
source: '自研（红绿色盲感知启发式）',
|
||
run: function (args) {
|
||
const plan = args.plan || {};
|
||
const bg = plan.bg || '#FFFFFF';
|
||
const els = plan.elements || [];
|
||
const icon = els.find(el => el.type === 'icon' && el.iconId && !['ring', 'deco-bar'].includes(el.iconId));
|
||
const fg = (icon && icon.stroke) || '#333333';
|
||
const hueOf = (hex) => {
|
||
const c = String(hex || '#FFF').replace('#', '');
|
||
if (c.length !== 6) return -1;
|
||
const r = parseInt(c.slice(0, 2), 16) / 255, g = parseInt(c.slice(2, 4), 16) / 255, b = parseInt(c.slice(4, 6), 16) / 255;
|
||
const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
|
||
if (d === 0) return -1;
|
||
let h;
|
||
if (max === r) h = ((g - b) / d) % 6;
|
||
else if (max === g) h = (b - r) / d + 2;
|
||
else h = (r - g) / d + 4;
|
||
return ((h * 60) % 360 + 360) % 360;
|
||
};
|
||
const inRG = (h) => h >= 0 && (h <= 60 || (h >= 75 && h <= 170) || h >= 320); // 红/橙/绿近似区
|
||
const h1 = hueOf(fg), h2 = hueOf(bg);
|
||
const bothRG = inRG(h1) && inRG(h2);
|
||
const ratio = contrast(fg, bg);
|
||
const risky = bothRG && ratio < 3;
|
||
return {
|
||
pass: !risky,
|
||
foreground: fg, background: bg,
|
||
fgFamily: h1 < 0 ? '中性色' : (inRG(h1) ? '红绿系' : '非红绿系'),
|
||
contrast: ratio,
|
||
verdict: risky ? '前景与背景同属红绿系且对比不足（' + ratio + ':1），红绿色盲人群难以区分' : (bothRG ? '虽同为红绿系，但明度对比足够（' + ratio + ':1）' : '前景非红绿系或与背景区分良好'),
|
||
suggest: risky ? '点缀/主色建议改用蓝/紫色系，或加大明度差至 3:1 以上' : '无需调整'
|
||
};
|
||
},
|
||
test: function () {
|
||
const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '色盲测试' });
|
||
return { safe: this.run({ plan: { bg: '#FFFFFF', elements: [{ type: 'icon', iconId: 'x', stroke: '#1B4F72' }] } }).pass, risky: this.run({ plan: { bg: '#2E7D32', elements: [{ type: 'icon', iconId: 'x', stroke: '#B71C1C' }] } }).pass };
|
||
}
|
||
},
|
||
{
|
||
id: 'color-psychology',
|
||
name: '色彩心理学推荐',
|
||
category: 'color',
|
||
emoji: '🧠',
|
||
scene: '按行业与情感目标推荐品牌色彩心理学配色',
|
||
summary: '借鉴色彩心理学情感色系（红=热情/蓝=专业/绿=自然/金=高端等），按行业推荐最能传达品牌情感的主色与情感标签。',
|
||
params: [
|
||
{ name: 'industry', type: 'string', required: false, desc: '行业 id' }
|
||
],
|
||
source: 'GitHub: color-psychology 色彩心理学资料 + 自研行业映射',
|
||
run: function (args) {
|
||
const ind = HGB_Industries.find(x => x.id === args.industry) || HGB_Industries[0];
|
||
const map = {
|
||
edu: [{ color: '#2F5FE3', emotion: '专业与信赖', hex: '蓝色' }],
|
||
food: [{ color: '#E8590C', emotion: '食欲与热情', hex: '橙色' }],
|
||
health: [{ color: '#2FA36B', emotion: '健康与治愈', hex: '绿色' }],
|
||
tech: [{ color: '#1F7A8C', emotion: '创新与科技', hex: '青蓝' }],
|
||
sport: [{ color: '#E63946', emotion: '活力与冲击', hex: '红色' }],
|
||
finance: [{ color: '#1B4F72', emotion: '稳重与财富', hex: '深蓝' }]
|
||
};
|
||
const hit = map[ind.id] || [{ color: '#5B21B6', emotion: '创意与神秘', hex: '紫色' }];
|
||
return {
|
||
industry: ind.name,
|
||
primary: hit[0].color, emotion: hit[0].emotion, family: hit[0].hex,
|
||
note: '「主色 + 中性灰 + 少量点缀色」的三角配色最稳妥，避免满屏高饱和'
|
||
};
|
||
},
|
||
test: function () {
|
||
return { food: this.run({ industry: 'food' }).primary, tech: this.run({ industry: 'tech' }).emotion };
|
||
}
|
||
},
|
||
{
|
||
id: 'monochrome-check',
|
||
name: '单色灰度适配',
|
||
category: 'color',
|
||
emoji: '⬛',
|
||
scene: 'LOGO 转为单色（黑白/传真/印章）后的辨识度检查',
|
||
summary: '用亮度对比判断主体与背景在灰度下是否仍可辨识：单色印刷、传真、水印场景需要足够的明暗对比。',
|
||
params: [
|
||
{ name: 'plan', type: 'object', required: true, desc: '方案对象 {elements, bg}' }
|
||
],
|
||
source: '自研（灰度对比度规则）',
|
||
run: function (args) {
|
||
const plan = args.plan || {};
|
||
const bg = plan.bg || '#FFFFFF';
|
||
const els = plan.elements || [];
|
||
const fgEl = els.find(el => (el.type === 'icon' && el.iconId && !['ring', 'deco-bar'].includes(el.iconId)) || (el.type === 'text'));
|
||
const fg = (fgEl && (fgEl.stroke || fgEl.fill)) || '#333333';
|
||
const c = contrast(fg, bg);
|
||
const pass = c >= 3;
|
||
return {
|
||
pass, contrast: c,
|
||
grayLum: Math.round(lum(fg) * 100) + '%',
|
||
verdict: pass ? '灰度对比度 ' + c + '：1，单色场景可辨识' : '灰度对比度 ' + c + '：1，单色场景易糊，建议加大明暗差',
|
||
suggest: pass ? '无需调整' : '主体与背景明暗相近，单色印刷时建议加深主体或换浅色背景'
|
||
};
|
||
},
|
||
test: function () {
|
||
return { dark: this.run({ plan: { bg: '#FFFFFF', elements: [{ type: 'icon', iconId: 'x', stroke: '#111111' }] } }).pass, light: this.run({ plan: { bg: '#FFFFFF', elements: [{ type: 'icon', iconId: 'x', stroke: '#EEEEEE' }] } }).pass };
|
||
}
|
||
},
|
||
{
|
||
id: 'wcag-contrast',
|
||
name: 'WCAG 无障碍对比度',
|
||
category: 'color',
|
||
emoji: '♿',
|
||
scene: '品牌色与背景的 WCAG 无障碍对比度评级',
|
||
summary: '计算前景/背景颜色的 WCAG 对比度并评级：普通文本需 ≥4.5:1（AA）、大字号 ≥3:1，AAA 需 7:1/4.5:1，输出达标级别与调色方向。',
|
||
params: [
|
||
{ name: 'fg', type: 'string', required: true, desc: '前景色（#RRGGBB）' },
|
||
{ name: 'bg', type: 'string', required: true, desc: '背景色（#RRGGBB）' },
|
||
{ name: 'size', type: 'string', required: false, desc: 'text 普通文本 / large 大字号（≥24px 或 18.66px 加粗）' }
|
||
],
|
||
source: 'W3C WCAG 2.1 对比度规范 + 自研评级',
|
||
run: function (args) {
|
||
const fg = args.fg || '#333333', bg = args.bg || '#FFFFFF';
|
||
const c = contrast(fg, bg);
|
||
const large = args.size === 'large';
|
||
const need = large ? { aa: 3, aaa: 4.5 } : { aa: 4.5, aaa: 7 };
|
||
const level = c >= need.aaa ? 'AAA' : (c >= need.aa ? 'AA' : '不达标');
|
||
const pass = c >= need.aa;
|
||
return {
|
||
pass, ratio: c, level, large,
|
||
verdict: '对比度 ' + c + ':1，' + (large ? '大字号' : '普通文本') + ' 达' + level + (pass ? '' : '，未达 AA（需 ' + need.aa + ':1）'),
|
||
suggest: pass ? '对比度符合 WCAG，无障碍友好' : '建议加深前景或提亮背景，拉开明暗差（当前 ' + c + ':1）'
|
||
};
|
||
},
|
||
test: function () {
|
||
return { good: this.run({ fg: '#111111', bg: '#FFFFFF' }).level, bad: this.run({ fg: '#CCCCCC', bg: '#FFFFFF' }).pass, large: this.run({ fg: '#777777', bg: '#FFFFFF', size: 'large' }).pass };
|
||
}
|
||
},
|
||
{
|
||
id: 'neutral-palette',
|
||
name: '中性色系统',
|
||
category: 'color',
|
||
emoji: '⬜',
|
||
scene: '为 LOGO/VI 推荐黑白灰中性色系统（单色/双色场景）',
|
||
summary: '基于品牌主色亮度生成配套中性灰阶（黑/深灰/中灰/浅灰/白），并给出双色与单色场景的搭档建议：主色 + 中性色构成极简双色系统，单色印刷仍保留明暗层次。',
|
||
params: [
|
||
{ name: 'color', type: 'string', required: false, desc: '品牌主色 HEX（默认 #1B4F72）' },
|
||
{ name: 'usage', type: 'string', required: false, desc: 'mono 单色 / duo 双色 / full 完整系统（默认 duo）' }
|
||
],
|
||
source: '自研（中性色阶 + 明度对比规范）',
|
||
run: function (args) {
|
||
const c = String(args.color || '#1B4F72').replace('#', '');
|
||
const base = /^[0-9a-fA-F]{6}$/.test(c) ? c : '1B4F72';
|
||
const usage = String(args.usage || 'duo');
|
||
const l = lum('#' + base);
|
||
const scale = [
|
||
{ name: '纯黑', hex: '#000000' },
|
||
{ name: '深灰', hex: '#333333' },
|
||
{ name: '中灰', hex: '#757575' },
|
||
{ name: '浅灰', hex: '#E0E0E0' },
|
||
{ name: '纯白', hex: '#FFFFFF' }
|
||
];
|
||
const mates = scale.filter(s => contrast(s.hex, '#' + base) >= 3);
|
||
const duo = mates.length ? mates : scale;
|
||
const primary = '#' + base;
|
||
return {
|
||
primary, tone: l > 0.5 ? '亮色系' : '深色系',
|
||
scale,
|
||
duo: { primary, neutral: duo[0].hex, note: '主色 + 「' + duo[0].name + '」构成双色系统，单色印刷/传真场景主体依然清晰' },
|
||
mono: { note: '单色场景用纯黑/纯白表现明暗层次，主色转灰度时保留 ≥3:1 明暗差（配合「单色灰度适配」技能复核）' },
|
||
full: { note: '完整系统 = 主色 + 5 级灰阶 + 黑/白：灰阶用于次层级信息，主色仅作强调，避免满屏高饱和' },
|
||
usage: usage === 'mono' ? '单色' : (usage === 'duo' ? '双色' : '完整系统'),
|
||
tip: '中性色是品牌色的「背景板」：浅灰作底色、深灰作正文、黑/白作极简标识，主色只出现在关键图形上'
|
||
};
|
||
},
|
||
test: function () {
|
||
const r = this.run({ color: '#1B4F72', usage: 'duo' });
|
||
return { scale: r.scale.length, duo: r.duo.neutral, mono: r.mono.note !== '' };
|
||
}
|
||
}
|
||
]);
|
||
})();
|