Back to Details

color-tools

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Color Tools Skill

色彩工具技能

This skill helps you create accessible, harmonious color palettes and ensures your colors meet WCAG contrast requirements. I provide color calculations, palette generation, and accessibility validation.
该技能可帮助你创建兼具可访问性与和谐感的调色板，并确保你的色彩符合WCAG对比度要求。我能提供色彩计算、调色板生成及可访问性验证服务。

What I Can Do

我能做什么

Color Contrast Checking

色彩对比度检查

  • Calculate contrast ratios
  • Verify WCAG AA/AAA compliance
  • Suggest accessible alternatives
  • Check text/background combinations
  • 计算对比度比值
  • 验证WCAG AA/AAA合规性
  • 推荐可访问替代色
  • 检查文本/背景色彩组合

Palette Generation

调色板生成

  • Create tint/shade scales (50-900)
  • Generate color harmonies
  • Build complementary palettes
  • Design theme variations
  • 创建色调/色阶渐变（50-900）
  • 生成色彩和谐方案
  • 构建互补调色板
  • 设计主题变体

Color Conversions

色彩格式转换

  • HEX ↔ RGB ↔ HSL
  • Calculate opacity variations
  • Generate CSS custom properties
  • Create color tokens
  • HEX ↔ RGB ↔ HSL
  • 计算透明度变体
  • 生成CSS自定义属性
  • 创建色彩令牌

Accessibility Tools

可访问性工具

  • Find accessible color pairs
  • Suggest minimum contrast fixes
  • Validate interactive state colors
  • Check large text requirements
  • 查找可访问色彩配对
  • 推荐最低对比度修复方案
  • 验证交互状态色彩
  • 检查大文本对比度要求

WCAG Contrast Requirements

WCAG对比度要求

Minimum Ratios

最低比值

  • Normal text: 4.5:1 (AA), 7:1 (AAA)
  • Large text (18px+ or 14px+ bold): 3:1 (AA), 4.5:1 (AAA)
  • UI components: 3:1 (AA)
  • Graphical objects: 3:1 (AA)
  • 常规文本：4.5:1（AA级），7:1（AAA级）
  • 大文本（18px及以上或14px及以上粗体）：3:1（AA级），4.5:1（AAA级）
  • UI组件：3:1（AA级）
  • 图形对象：3:1（AA级）

Contrast Formula

对比度公式

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) Where L1 is lighter color luminance and L2 is darker
对比度比值 = (L1 + 0.05) / (L2 + 0.05) 其中L1为浅色的亮度值，L2为深色的亮度值

Example: Contrast Checking

示例：对比度检查

You: "Check if #3b82f6 on white background is accessible"
I'll provide:
Color: #3b82f6 (Blue)
Background: #ffffff (White)

Contrast Ratio: 4.52:1

WCAG Compliance:
✓ Normal text AA (4.5:1 required) - PASS
✗ Normal text AAA (7:1 required) - FAIL
✓ Large text AA (3:1 required) - PASS
✓ Large text AAA (4.5:1 required) - PASS
✓ UI Components (3:1 required) - PASS

Recommendation:
For AAA compliance with normal text, use #2563eb (darker blue)
New contrast: 7.02:1 - Passes all requirements
你：“检查白色背景上的#3b82f6是否符合可访问性要求”
我会返回：
Color: #3b82f6 (Blue)
Background: #ffffff (White)

Contrast Ratio: 4.52:1

WCAG Compliance:
✓ Normal text AA (4.5:1 required) - PASS
✗ Normal text AAA (7:1 required) - FAIL
✓ Large text AA (3:1 required) - PASS
✓ Large text AAA (4.5:1 required) - PASS
✓ UI Components (3:1 required) - PASS

Recommendation:
For AAA compliance with normal text, use #2563eb (darker blue)
New contrast: 7.02:1 - Passes all requirements

Palette Generation

调色板生成

Tint & Shade Scale

色调与色阶渐变

css
/* Generate 50-900 scale from base color */
:root {
  /* Base color: #3b82f6 */

  --color-blue-50: #eff6ff;   /* 90% lighter */
  --color-blue-100: #dbeafe;  /* 80% lighter */
  --color-blue-200: #bfdbfe;  /* 60% lighter */
  --color-blue-300: #93c5fd;  /* 40% lighter */
  --color-blue-400: #60a5fa;  /* 20% lighter */
  --color-blue-500: #3b82f6;  /* Base */
  --color-blue-600: #2563eb;  /* 20% darker */
  --color-blue-700: #1d4ed8;  /* 40% darker */
  --color-blue-800: #1e40af;  /* 60% darker */
  --color-blue-900: #1e3a8a;  /* 80% darker */
}

/* Usage guide:
 * 50-100: Backgrounds, subtle highlights
 * 200-300: Hover states, borders
 * 400-600: Primary UI, text on light backgrounds
 * 700-900: Text, emphasis, dark themes
 */
css
/* Generate 50-900 scale from base color */
:root {
  /* Base color: #3b82f6 */

  --color-blue-50: #eff6ff;   /* 90% lighter */
  --color-blue-100: #dbeafe;  /* 80% lighter */
  --color-blue-200: #bfdbfe;  /* 60% lighter */
  --color-blue-300: #93c5fd;  /* 40% lighter */
  --color-blue-400: #60a5fa;  /* 20% lighter */
  --color-blue-500: #3b82f6;  /* Base */
  --color-blue-600: #2563eb;  /* 20% darker */
  --color-blue-700: #1d4ed8;  /* 40% darker */
  --color-blue-800: #1e40af;  /* 60% darker */
  --color-blue-900: #1e3a8a;  /* 80% darker */
}

/* Usage guide:
 * 50-100: Backgrounds, subtle highlights
 * 200-300: Hover states, borders
 * 400-600: Primary UI, text on light backgrounds
 * 700-900: Text, emphasis, dark themes
 */

Color Harmonies

色彩和谐方案

Complementary Colors

互补色

css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-complement: #f6823b;   /* Orange (30°) - opposite */
}
css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-complement: #f6823b;   /* Orange (30°) - opposite */
}

Analogous Colors

邻近色

css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-analogous-1: #3bf6db;  /* Cyan (180°) */
  --color-analogous-2: #823bf6;  /* Purple (270°) */
}
css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-analogous-1: #3bf6db;  /* Cyan (180°) */
  --color-analogous-2: #823bf6;  /* Purple (270°) */
}

Triadic Colors

三角色

css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-triadic-1: #f6db3b;    /* Yellow (90°) */
  --color-triadic-2: #db3bf6;    /* Magenta (330°) */
}
css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-triadic-1: #f6db3b;    /* Yellow (90°) */
  --color-triadic-2: #db3bf6;    /* Magenta (330°) */
}

Split-Complementary

分裂互补色

css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-split-1: #f6db3b;      /* Yellow-Orange (45°) */
  --color-split-2: #f6493b;      /* Red-Orange (15°) */
}
css
/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-split-1: #f6db3b;      /* Yellow-Orange (45°) */
  --color-split-2: #f6493b;      /* Red-Orange (15°) */
}

Accessible Color Palettes

可访问性调色板

Light Theme

浅色主题

css
:root {
  /* Backgrounds - Lightest colors */
  --color-bg: #ffffff;           /* Pure white */
  --color-bg-secondary: #f9fafb; /* Near white */
  --color-bg-tertiary: #f3f4f6;  /* Light gray */

  /* Text - Darkest colors (AAA contrast) */
  --color-text-primary: #111827;   /* 16.04:1 */
  --color-text-secondary: #4b5563; /* 8.49:1 */
  --color-text-tertiary: #6b7280;  /* 5.77:1 */

  /* Primary color (accessible) */
  --color-primary: #2563eb;      /* 7.02:1 on white */
  --color-primary-hover: #1d4ed8; /* 9.52:1 on white */

  /* Interactive states */
  --color-link: #2563eb;         /* 7.02:1 */
  --color-link-hover: #1d4ed8;   /* 9.52:1 */
  --color-link-visited: #7c3aed; /* 7.09:1 */

  /* Status colors (all AAA compliant) */
  --color-success: #047857;      /* 7.36:1 */
  --color-warning: #b45309;      /* 7.01:1 */
  --color-error: #dc2626;        /* 7.29:1 */
}
css
:root {
  /* Backgrounds - Lightest colors */
  --color-bg: #ffffff;           /* Pure white */
  --color-bg-secondary: #f9fafb; /* Near white */
  --color-bg-tertiary: #f3f4f6;  /* Light gray */

  /* Text - Darkest colors (AAA contrast) */
  --color-text-primary: #111827;   /* 16.04:1 */
  --color-text-secondary: #4b5563; /* 8.49:1 */
  --color-text-tertiary: #6b7280;  /* 5.77:1 */

  /* Primary color (accessible) */
  --color-primary: #2563eb;      /* 7.02:1 on white */
  --color-primary-hover: #1d4ed8; /* 9.52:1 on white */

  /* Interactive states */
  --color-link: #2563eb;         /* 7.02:1 */
  --color-link-hover: #1d4ed8;   /* 9.52:1 */
  --color-link-visited: #7c3aed; /* 7.09:1 */

  /* Status colors (all AAA compliant) */
  --color-success: #047857;      /* 7.36:1 */
  --color-warning: #b45309;      /* 7.01:1 */
  --color-error: #dc2626;        /* 7.29:1 */
}

Dark Theme

深色主题

css
[data-theme="dark"] {
  /* Backgrounds - Darkest colors */
  --color-bg: #111827;           /* Very dark gray */
  --color-bg-secondary: #1f2937; /* Dark gray */
  --color-bg-tertiary: #374151;  /* Medium-dark gray */

  /* Text - Lightest colors (AAA contrast) */
  --color-text-primary: #f9fafb;   /* 14.73:1 */
  --color-text-secondary: #d1d5db; /* 10.31:1 */
  --color-text-tertiary: #9ca3af;  /* 6.16:1 */

  /* Primary color (lighter for dark mode) */
  --color-primary: #60a5fa;      /* 7.38:1 on dark bg */
  --color-primary-hover: #93c5fd; /* 10.73:1 on dark bg */

  /* Status colors (adjusted for dark mode) */
  --color-success: #34d399;      /* 7.53:1 */
  --color-warning: #fbbf24;      /* 13.44:1 */
  --color-error: #f87171;        /* 7.03:1 */
}
css
[data-theme="dark"] {
  /* Backgrounds - Darkest colors */
  --color-bg: #111827;           /* Very dark gray */
  --color-bg-secondary: #1f2937; /* Dark gray */
  --color-bg-tertiary: #374151;  /* Medium-dark gray */

  /* Text - Lightest colors (AAA contrast) */
  --color-text-primary: #f9fafb;   /* 14.73:1 */
  --color-text-secondary: #d1d5db; /* 10.31:1 */
  --color-text-tertiary: #9ca3af;  /* 6.16:1 */

  /* Primary color (lighter for dark mode) */
  --color-primary: #60a5fa;      /* 7.38:1 on dark bg */
  --color-primary-hover: #93c5fd; /* 10.73:1 on dark bg */

  /* Status colors (adjusted for dark mode) */
  --color-success: #34d399;      /* 7.53:1 */
  --color-warning: #fbbf24;      /* 13.44:1 */
  --color-error: #f87171;        /* 7.03:1 */
}

Color Conversion Examples

色彩格式转换示例

HEX to RGB

HEX转RGB

#3b82f6 → rgb(59, 130, 246)

Calculation:
R: 3b (hex) = 59 (decimal)
G: 82 (hex) = 130 (decimal)
B: f6 (hex) = 246 (decimal)
#3b82f6 → rgb(59, 130, 246)

Calculation:
R: 3b (hex) = 59 (decimal)
G: 82 (hex) = 130 (decimal)
B: f6 (hex) = 246 (decimal)

RGB to HSL

RGB转HSL

rgb(59, 130, 246) → hsl(217, 91%, 60%)

Calculation:
H: 217° (hue)
S: 91% (saturation)
L: 60% (lightness)
rgb(59, 130, 246) → hsl(217, 91%, 60%)

Calculation:
H: 217° (hue)
S: 91% (saturation)
L: 60% (lightness)

Adding Opacity

添加透明度

css
/* HEX with alpha */
--color-primary: #3b82f6;
--color-primary-10: #3b82f61a; /* 10% opacity */
--color-primary-50: #3b82f680; /* 50% opacity */

/* RGB with alpha */
--color-primary-rgb: 59, 130, 246;
--color-primary-10: rgba(var(--color-primary-rgb), 0.1);
--color-primary-50: rgba(var(--color-primary-rgb), 0.5);

/* HSL with alpha */
--color-primary: hsl(217, 91%, 60%);
--color-primary-10: hsl(217, 91%, 60%, 0.1);
--color-primary-50: hsl(217, 91%, 60%, 0.5);
css
/* HEX with alpha */
--color-primary: #3b82f6;
--color-primary-10: #3b82f61a; /* 10% opacity */
--color-primary-50: #3b82f680; /* 50% opacity */

/* RGB with alpha */
--color-primary-rgb: 59, 130, 246;
--color-primary-10: rgba(var(--color-primary-rgb), 0.1);
--color-primary-50: rgba(var(--color-primary-rgb), 0.5);

/* HSL with alpha */
--color-primary: hsl(217, 91%, 60%);
--color-primary-10: hsl(217, 91%, 60%, 0.1);
--color-primary-50: hsl(217, 91%, 60%, 0.5);

Color Token System

色彩令牌系统

Complete Token Architecture

完整令牌架构

css
:root {
  /* 1. Global tokens - Raw colors */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-gray-50: #f9fafb;
  --color-gray-900: #111827;

  /* 2. Semantic tokens - Purpose */
  --color-primary: var(--color-blue-600);
  --color-text-primary: var(--color-gray-900);
  --color-surface: var(--color-gray-50);

  /* 3. Component tokens - Specific */
  --button-bg-primary: var(--color-primary);
  --button-text-primary: white;
  --card-bg: var(--color-surface);
}
css
:root {
  /* 1. Global tokens - Raw colors */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-gray-50: #f9fafb;
  --color-gray-900: #111827;

  /* 2. Semantic tokens - Purpose */
  --color-primary: var(--color-blue-600);
  --color-text-primary: var(--color-gray-900);
  --color-surface: var(--color-gray-50);

  /* 3. Component tokens - Specific */
  --button-bg-primary: var(--color-primary);
  --button-text-primary: white;
  --card-bg: var(--color-surface);
}

Checking Interactive States

检查交互状态

Button States Example

按钮状态示例

css
.button-primary {
  /* Default state */
  background: #2563eb;  /* 7.02:1 on white */
  color: white;

  /* Hover state */
  &:hover {
    background: #1d4ed8; /* 9.52:1 on white */
  }

  /* Focus state */
  &:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    /* Outline must have 3:1 contrast with adjacent colors */
  }

  /* Active/pressed state */
  &:active {
    background: #1e40af; /* 11.19:1 on white */
  }

  /* Disabled state */
  &:disabled {
    background: #93c5fd; /* 3.24:1 - may fail for text */
    color: #6b7280;     /* Reduced contrast acceptable when disabled */
    opacity: 0.6;
  }
}
css
.button-primary {
  /* Default state */
  background: #2563eb;  /* 7.02:1 on white */
  color: white;

  /* Hover state */
  &:hover {
    background: #1d4ed8; /* 9.52:1 on white */
  }

  /* Focus state */
  &:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    /* Outline must have 3:1 contrast with adjacent colors */
  }

  /* Active/pressed state */
  &:active {
    background: #1e40af; /* 11.19:1 on white */
  }

  /* Disabled state */
  &:disabled {
    background: #93c5fd; /* 3.24:1 - may fail for text */
    color: #6b7280;     /* Reduced contrast acceptable when disabled */
    opacity: 0.6;
  }
}

Color Accessibility Tips

色彩可访问性技巧

✓ Good Practices

✓ 良好实践

  • Test all text/background combinations
  • Check hover and focus states
  • Verify status colors (success, warning, error)
  • Don't rely on color alone (use icons/text too)
  • Test with color blindness simulators
  • Provide high contrast mode
  • Use semantic color names
  • 测试所有文本/背景色彩组合
  • 检查悬停和焦点状态
  • 验证状态色彩（成功、警告、错误）
  • 不单独依赖色彩传递信息（搭配图标/文本）
  • 使用色盲模拟器测试
  • 提供高对比度模式
  • 使用语义化色彩名称

❌ Common Mistakes

❌ 常见错误

  • Light gray text on white (#999 on #fff = 2.85:1 - fails)
  • Relying only on color for information
  • Insufficient contrast in disabled states
  • Forgetting to test dark mode
  • Not checking focus indicators
  • Ignoring links and interactive elements
  • 白色背景上的浅灰色文本（#999在#fff上对比度为2.85:1 - 不达标）
  • 仅依赖色彩传递信息
  • 禁用状态对比度不足
  • 忘记测试深色主题
  • 未检查焦点指示器
  • 忽略链接和交互元素

Example Usage

使用示例

You: "Create an accessible blue palette for a light theme"
I'll provide:
css
:root {
  /* Blue palette - All colors tested for accessibility */

  /* Primary actions - AAA compliant on white */
  --color-primary: #1d4ed8;      /* 9.52:1 */
  --color-primary-hover: #1e40af; /* 11.19:1 */

  /* Backgrounds */
  --color-primary-bg: #eff6ff;   /* Subtle background */
  --color-primary-border: #93c5fd; /* 3.24:1 - good for borders */

  /* Text on primary buttons */
  --color-primary-text: #ffffff; /* 9.52:1 on #1d4ed8 */

  /* Links */
  --color-link: #2563eb;         /* 7.02:1 - AAA for large text */
  --color-link-hover: #1d4ed8;   /* 9.52:1 - AAA */
  --color-link-visited: #7c3aed; /* 7.09:1 - AAA */

  /* Status indicators */
  --color-info: #0284c7;         /* 7.24:1 */
  --color-info-bg: #e0f2fe;      /* Background for info messages */
}

/* Usage example */
.button-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.button-primary:hover {
  background: var(--color-primary-hover);
}

.link {
  color: var(--color-link);
}

.link:hover {
  color: var(--color-link-hover);
}
你：“为浅色主题创建一个符合可访问性要求的蓝色调色板”
我会返回：
css
:root {
  /* Blue palette - All colors tested for accessibility */

  /* Primary actions - AAA compliant on white */
  --color-primary: #1d4ed8;      /* 9.52:1 */
  --color-primary-hover: #1e40af; /* 11.19:1 */

  /* Backgrounds */
  --color-primary-bg: #eff6ff;   /* Subtle background */
  --color-primary-border: #93c5fd; /* 3.24:1 - good for borders */

  /* Text on primary buttons */
  --color-primary-text: #ffffff; /* 9.52:1 on #1d4ed8 */

  /* Links */
  --color-link: #2563eb;         /* 7.02:1 - AAA for large text */
  --color-link-hover: #1d4ed8;   /* 9.52:1 - AAA */
  --color-link-visited: #7c3aed; /* 7.09:1 - AAA */

  /* Status indicators */
  --color-info: #0284c7;         /* 7.24:1 */
  --color-info-bg: #e0f2fe;      /* Background for info messages */
}

/* Usage example */
.button-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.button-primary:hover {
  background: var(--color-primary-hover);
}

.link {
  color: var(--color-link);
}

.link:hover {
  color: var(--color-link-hover);
}

Just Ask!

随时提问！

Tell me what you need:
  • "Check contrast for #3b82f6 on white"
  • "Generate a blue color palette"
  • "Create accessible dark theme colors"
  • "Find a complementary color for #2563eb"
  • "Make this color more accessible"
  • "Convert #3b82f6 to RGB and HSL"
I'll help you create accessible, beautiful color systems!
告诉我你的需求：
  • “检查白色背景上#3b82f6的对比度”
  • “生成蓝色调色板”
  • “创建符合可访问性要求的深色主题色彩”
  • “为#2563eb找互补色”
  • “让这个色彩更具可访问性”
  • “将#3b82f6转换为RGB和HSL格式”
我会帮你创建兼具可访问性与美观性的色彩系统！