@trishchuk/coolors-mcp 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/.github/workflows/ci.yml +23 -20
  2. package/.github/workflows/deploy-docs.yml +6 -3
  3. package/.github/workflows/release.yml +11 -9
  4. package/README.md +123 -14
  5. package/dist/bin/server.js +997 -256
  6. package/dist/bin/server.js.map +1 -1
  7. package/dist/{chunk-P3ARRKLS.js → chunk-HOMDMKUY.js} +3 -1
  8. package/dist/{chunk-P3ARRKLS.js.map → chunk-HOMDMKUY.js.map} +1 -1
  9. package/dist/{chunk-IQ7NN26V.js → chunk-LHW2ZTOU.js} +14 -2
  10. package/dist/chunk-LHW2ZTOU.js.map +1 -0
  11. package/dist/color/index.js +1 -1
  12. package/dist/coolors-mcp.d.ts +4 -4
  13. package/dist/coolors-mcp.js +1 -1
  14. package/eslint.config.ts +13 -0
  15. package/jsr.json +1 -1
  16. package/package.json +16 -12
  17. package/src/bin/server.ts +13 -1
  18. package/src/color/__tests__/extract-colors.test.ts +20 -30
  19. package/src/color/apca.ts +105 -0
  20. package/src/color/color-blindness.ts +109 -0
  21. package/src/coolors-mcp.ts +1 -1
  22. package/src/session.ts +10 -2
  23. package/src/theme/matcher.ts +1 -1
  24. package/src/theme/refactor.ts +1 -1
  25. package/src/theme/types.ts +3 -0
  26. package/src/tools/__tests__/cohesion.test.ts +97 -0
  27. package/src/tools/__tests__/color-blindness.test.ts +45 -0
  28. package/src/tools/__tests__/color-conversion.test.ts +38 -0
  29. package/src/tools/__tests__/contrast-checker.test.ts +56 -0
  30. package/src/tools/__tests__/palette-export.test.ts +54 -0
  31. package/src/tools/adjust-color.tool.ts +80 -0
  32. package/src/tools/cohesion.tools.ts +380 -0
  33. package/src/tools/color-blindness.tool.ts +168 -0
  34. package/src/tools/color-conversion.tool.ts +1 -1
  35. package/src/tools/contrast-checker.tool.ts +53 -14
  36. package/src/tools/dislike-analyzer.tool.ts +41 -54
  37. package/src/tools/image-extraction.tools.ts +62 -115
  38. package/src/tools/index.ts +15 -2
  39. package/src/tools/palette-export.tool.ts +174 -0
  40. package/src/tools/palette-with-locks.tool.ts +8 -6
  41. package/src/types.ts +2 -3
  42. package/tsconfig.json +12 -2
  43. package/vitest.config.js +1 -3
  44. package/.claude/settings.local.json +0 -35
  45. package/.env +0 -2
  46. package/.mcp.json +0 -12
  47. package/CLAUDE.md +0 -201
  48. package/DOCUMENTATION.md +0 -274
  49. package/GEMINI.md +0 -54
  50. package/TOOLS_UK.md +0 -233
  51. package/demo/content_based_color.png +0 -0
  52. package/demo/music-player.html +0 -621
  53. package/demo/podcast-player.html +0 -903
  54. package/dist/chunk-IQ7NN26V.js.map +0 -1
  55. package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js +0 -111
  56. package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js.map +0 -7
  57. package/docs/.vitepress/cache/deps/_metadata.json +0 -127
  58. package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js +0 -12
  59. package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js.map +0 -7
  60. package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js +0 -13614
  61. package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js.map +0 -7
  62. package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js +0 -10698
  63. package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js.map +0 -7
  64. package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js +0 -5609
  65. package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js.map +0 -7
  66. package/docs/.vitepress/cache/deps/cytoscape.js +0 -36234
  67. package/docs/.vitepress/cache/deps/cytoscape.js.map +0 -7
  68. package/docs/.vitepress/cache/deps/dayjs.js +0 -507
  69. package/docs/.vitepress/cache/deps/dayjs.js.map +0 -7
  70. package/docs/.vitepress/cache/deps/debug.js +0 -512
  71. package/docs/.vitepress/cache/deps/debug.js.map +0 -7
  72. package/docs/.vitepress/cache/deps/package.json +0 -3
  73. package/docs/.vitepress/cache/deps/prismjs.js +0 -1638
  74. package/docs/.vitepress/cache/deps/prismjs.js.map +0 -7
  75. package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js +0 -235
  76. package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js.map +0 -7
  77. package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js +0 -173
  78. package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js.map +0 -7
  79. package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js +0 -27
  80. package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js.map +0 -7
  81. package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js +0 -72
  82. package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js.map +0 -7
  83. package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js +0 -56
  84. package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js.map +0 -7
  85. package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js +0 -107
  86. package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js.map +0 -7
  87. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -5074
  88. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  89. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -584
  90. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  91. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1483
  92. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
  93. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +0 -1779
  94. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +0 -7
  95. package/docs/.vitepress/cache/deps/vitepress___minisearch.js +0 -2023
  96. package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +0 -7
  97. package/docs/.vitepress/cache/deps/vue.js +0 -344
  98. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  99. package/examples/theme-matching.md +0 -113
  100. package/mcp-config.json +0 -8
  101. package/note.md +0 -34
  102. package/research_results.md +0 -53
  103. package/src/tools/colors.ts +0 -31
  104. package/src/tools/registry.ts +0 -142
  105. package/src/tools/simple-tools.ts +0 -37
@@ -9,7 +9,7 @@ import {
9
9
  rgbToHsl,
10
10
  rgbToLab,
11
11
  } from "../color/index.js";
12
- import { HSL, RGB } from "../color/types.js";
12
+ import { RGB } from "../color/types.js";
13
13
 
14
14
  export const paletteWithLocksTool = {
15
15
  description:
@@ -64,7 +64,9 @@ export const paletteWithLocksTool = {
64
64
 
65
65
  let minDistance = Infinity;
66
66
  for (const locked of parsedLocked) {
67
- const dist = colorDistance(candidate, locked, "deltaE2000");
67
+ const dist = colorDistance(candidate, locked, {
68
+ metric: "deltaE2000",
69
+ });
68
70
  if (dist < minDistance) minDistance = dist;
69
71
  }
70
72
 
@@ -135,17 +137,15 @@ export const paletteWithLocksTool = {
135
137
  case "harmony": {
136
138
  // Generate harmonious colors based on locked colors
137
139
  const baseHsl = rgbToHsl(parsedLocked[0]);
138
- const hueStep = 360 / totalColors;
139
140
 
140
141
  for (let i = 0; i < remainingSlots; i++) {
141
- let newHue = baseHsl.h;
142
142
  let attempts = 0;
143
143
  let bestColor: null | RGB = null;
144
144
  let maxMinDistance = 0;
145
145
 
146
146
  // Try different hues to find one that's not too close to locked colors
147
147
  while (attempts < 36) {
148
- newHue = (baseHsl.h + attempts * 10) % 360;
148
+ const newHue = (baseHsl.h + attempts * 10) % 360;
149
149
  const candidate = hslToRgb({
150
150
  h: newHue,
151
151
  l: baseHsl.l + (Math.random() - 0.5) * 20,
@@ -155,7 +155,9 @@ export const paletteWithLocksTool = {
155
155
  // Check minimum distance to all locked colors
156
156
  let minDistance = Infinity;
157
157
  for (const locked of parsedLocked) {
158
- const dist = colorDistance(candidate, locked, "deltaE2000");
158
+ const dist = colorDistance(candidate, locked, {
159
+ metric: "deltaE2000",
160
+ });
159
161
  if (dist < minDistance) minDistance = dist;
160
162
  }
161
163
 
package/src/types.ts CHANGED
@@ -36,8 +36,8 @@ export type Context<T extends CoolorsMCPSessionAuth> = {
36
36
  };
37
37
 
38
38
  export type CoolorsMCPEvents = {
39
- connect: (event: { session: any }) => void;
40
- disconnect: (event: { session: any }) => void;
39
+ connect: (event: { session: unknown }) => void;
40
+ disconnect: (event: { session: unknown }) => void;
41
41
  };
42
42
 
43
43
  export type CoolorsMCPSessionAuth = Record<string, unknown> | undefined;
@@ -164,7 +164,6 @@ export type Tool<
164
164
  | ResourceLink
165
165
  | string
166
166
  | TextContent
167
- | void
168
167
  >;
169
168
  name: string;
170
169
  parameters?: Params;
package/tsconfig.json CHANGED
@@ -1,8 +1,18 @@
1
1
  {
2
2
  "extends": "@tsconfig/node22/tsconfig.json",
3
3
  "compilerOptions": {
4
+ "ignoreDeprecations": "6.0",
4
5
  "noEmit": true,
5
6
  "noUnusedLocals": true,
6
- "noUnusedParameters": true
7
- }
7
+ "noUnusedParameters": true,
8
+ "types": ["node"]
9
+ },
10
+ "exclude": [
11
+ "dist",
12
+ "node_modules",
13
+ "src/examples",
14
+ "**/__tests__/**",
15
+ "**/*.test.ts",
16
+ "**/*_test.ts"
17
+ ]
8
18
  }
package/vitest.config.js CHANGED
@@ -2,9 +2,7 @@ import { defineConfig } from "vitest/config";
2
2
 
3
3
  export default defineConfig({
4
4
  test: {
5
- poolOptions: {
6
- forks: { execArgv: ["--experimental-eventsource"] },
7
- },
5
+ forks: { execArgv: ["--experimental-eventsource"] },
8
6
  exclude: [
9
7
  "**/node_modules/**",
10
8
  "**/dist/**",
@@ -1,35 +0,0 @@
1
- {
2
- "permissions": {
3
- "allow": [
4
- "Bash(grep:*)",
5
- "Bash(npm test)",
6
- "Bash(npm test:*)",
7
- "Bash(npm run build:*)",
8
- "Bash(node:*)",
9
- "Bash(npm run:*)",
10
- "mcp__coolors__convert_color",
11
- "mcp__coolors__generate_material_theme",
12
- "mcp__coolors__generate_palette",
13
- "mcp__gemini-cli__ask-gemini",
14
- "Bash(open /Users/taras/www/MCP/coolors-mcp/demo/music-player.html)",
15
- "Bash(open /Users/taras/www/MCP/coolors-mcp/demo/podcast-player.html)",
16
- "mcp__coolors__generate_theme_css",
17
- "mcp__coolors__refactor_css_with_theme",
18
- "Bash(npx vitest run:*)",
19
- "WebSearch",
20
- "Bash(for i in {1..5})",
21
- "Bash(do echo \"Run $i:\")",
22
- "Bash(done)",
23
- "Bash(npx prettier:*)",
24
- "Bash(find:*)",
25
- "Bash(npm install:*)",
26
- "Bash(npx tsx:*)",
27
- "Bash(git pull:*)",
28
- "Bash(git config:*)",
29
- "Bash(npm:*)"
30
- ],
31
- "deny": [],
32
- "ask": []
33
- },
34
- "enabledMcpjsonServers": ["gemini-cli", "codex-cli", "coolors"]
35
- }
package/.env DELETED
@@ -1,2 +0,0 @@
1
-
2
- GOOGLE_CLOUD_PROJECT=sincere-signal-457111-q3
package/.mcp.json DELETED
@@ -1,12 +0,0 @@
1
- {
2
- "mcpServers": {
3
- "gemini-cli": {
4
- "command": "npx",
5
- "args": ["-y", "gemini-mcp-tool"]
6
- },
7
- "coolors": {
8
- "command": "node",
9
- "args": ["/Users/taras/www/MCP/coolors-mcp/dist/bin/server.js"]
10
- }
11
- }
12
- }
package/CLAUDE.md DELETED
@@ -1,201 +0,0 @@
1
- # CLAUDE.md
2
-
3
- This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4
-
5
- ## Project Overview
6
-
7
- This is a Coolors MCP (Model Context Protocol) server that provides advanced color utilities, Material Design 3 theme generation, and CSS theme matching capabilities. It's built on a custom TypeScript MCP framework.
8
-
9
- ## Core Commands
10
-
11
- ### Development & Testing
12
-
13
- ```bash
14
- # Install dependencies
15
- npm install
16
-
17
- # Build the project
18
- npm run build
19
-
20
- # Run all tests
21
- npm test
22
-
23
- # Run a single test file
24
- npx vitest run src/color/__tests__/conversions.test.ts
25
-
26
- # Format code
27
- npm run format
28
-
29
- # Lint and type check
30
- npm run lint
31
- ```
32
-
33
- ### Running the MCP Server
34
-
35
- ```bash
36
- # Run the built server directly
37
- node dist/bin/server.js
38
-
39
- # Run with TypeScript (development)
40
- npx tsx src/bin/server.ts
41
-
42
- # Test with MCP CLI
43
- npx fastmcp dev src/bin/server.ts
44
-
45
- # Inspect with MCP Inspector
46
- npx fastmcp inspect src/bin/server.ts
47
- ```
48
-
49
- ## Architecture & Code Organization
50
-
51
- ### MCP Server Structure
52
-
53
- The project follows a clean separation pattern where tools are extracted into individual files rather than being defined inline:
54
-
55
- - **`src/bin/server.ts`** (47 lines) - Clean entry point that registers all tools
56
- - **`src/tools/`** - Individual tool implementations following a consistent pattern
57
- - **`src/CoolorsMCP.ts`** - Core MCP server class that manages tools and sessions
58
- - **`src/session.ts`** - Handles individual client connections and tool execution
59
-
60
- ### Color System Architecture
61
-
62
- #### Multi-Layer Color Space Support
63
-
64
- 1. **Basic Color Spaces** (`src/color/conversions.ts`):
65
- - RGB, HSL, HSV, XYZ, LAB
66
- - All conversions go through RGB as the central format
67
-
68
- 2. **HCT Color Space** (`src/color/hct/`):
69
- - Google's perceptually uniform color space (Hue, Chroma, Tone)
70
- - Superior for UI applications vs traditional LAB
71
- - Tone differences guarantee WCAG contrast ratios (40 = 3:1, 50 = 4.5:1)
72
-
73
- 3. **Material Design Integration** (`src/color/hct/tonal-palette.ts`):
74
- - CorePalette generates primary, secondary, tertiary, error, neutral palettes
75
- - Standard Material tones: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]
76
-
77
- 4. **Image Color Extraction** (`src/color/quantize/`, `src/color/score/`):
78
- - Celebi quantizer combines Wu and WSMeans algorithms
79
- - Score module ranks colors by UI suitability
80
- - Dislike analyzer prevents selection of universally disliked colors
81
-
82
- ### Theme Matching System
83
-
84
- The theme matching system (`src/theme/`) uses a sophisticated multi-factor approach:
85
-
86
- 1. **Parser** (`src/theme/parser.ts`): Extracts CSS variables and detects semantic roles
87
- 2. **Matcher** (`src/theme/matcher.ts`): Multi-factor scoring algorithm:
88
- - Perceptual distance (60%) - HCT-based color similarity
89
- - Semantic context (20%) - Role appropriateness (primary, surface, etc.)
90
- - Accessibility (20%) - Contrast ratio considerations
91
-
92
- 3. **Refactor** (`src/theme/refactor.ts`): Automated CSS refactoring with confidence scores
93
-
94
- ### Tool Registration Pattern
95
-
96
- Tools follow a consistent structure:
97
-
98
- ```typescript
99
- export const toolName = {
100
- name: "tool_name",
101
- description: "Tool description",
102
- parameters: z.object({
103
- /* schema */
104
- }),
105
- execute: async (args) => {
106
- /* implementation */
107
- },
108
- };
109
- ```
110
-
111
- Tools are registered in `src/bin/server.ts`:
112
-
113
- ```typescript
114
- server.addTool(tools.toolName);
115
- ```
116
-
117
- ## Key Technical Decisions
118
-
119
- ### HCT vs LAB Color Space
120
-
121
- The project uses HCT instead of LAB for perceptual color operations because:
122
-
123
- - HCT is specifically designed for UI applications
124
- - Tone component directly correlates with contrast ratios
125
- - Better semantic understanding of color relationships
126
- - Used in production by Material Design and Android
127
-
128
- ### Distance Metrics
129
-
130
- - **Delta E 2000**: Default for general color comparison
131
- - **HCT Distance**: Used for theme matching with weighted components (tone weighted 2x)
132
- - **Euclidean**: Available for simple RGB comparisons
133
-
134
- ### Theme Variable Detection
135
-
136
- The parser automatically detects semantic roles from CSS variable names:
137
-
138
- - `--color-primary-*` → primary role
139
- - `--color-surface-*` → surface role
140
- - `--*-border-*` or `--*-outline-*` → outline role
141
-
142
- ## Testing Approach
143
-
144
- Tests are organized by module:
145
-
146
- - `src/color/__tests__/` - Color conversion and metric tests
147
- - `src/theme/__tests__/` - Theme matching and refactoring tests
148
-
149
- The `researcher/` directory is excluded from tests (in `.gitignore` and `vitest.config.js`).
150
-
151
- ## Material Color Utilities Integration
152
-
153
- The project incorporates algorithms from Google's Material Color Utilities:
154
-
155
- - **Quantization**: Celebi algorithm (Wu + WSMeans) for image color extraction
156
- - **Scoring**: Evaluating colors for UI suitability (target chroma ~48)
157
- - **Harmonization**: Adjusting colors to work together
158
- - **Dynamic Schemes**: Generating accessible color schemes
159
- - **Dislike Analysis**: Detecting and fixing universally disliked colors (dark yellow-greens)
160
-
161
- ## MCP Tools Available
162
-
163
- ### Color Tools
164
-
165
- - `convert_color` - Convert between hex, rgb, hsl, lab, hct
166
- - `color_distance` - Calculate perceptual distance
167
- - `check_contrast` - WCAG contrast checking
168
- - `generate_palette` - Create color palettes (monochromatic, analogous, etc.)
169
-
170
- ### Material Design Tools
171
-
172
- - `generate_material_theme` - Full Material Design 3 theme
173
- - `harmonize_colors` - Harmonize multiple colors
174
- - `generate_tonal_palette` - Material tonal palette
175
-
176
- ### Theme Matching Tools
177
-
178
- - `match_theme_color` - Find closest theme variable
179
- - `refactor_css_with_theme` - Automated CSS refactoring
180
- - `match_theme_colors_batch` - Batch color matching
181
- - `generate_theme_css` - Generate CSS custom properties
182
-
183
- ### Image Extraction Tools
184
-
185
- - `extract_image_colors` - Extract dominant colors from images using Celebi quantization
186
- - `generate_theme_from_image` - Generate Material Design theme from image colors
187
-
188
- ### Dislike Analysis Tools
189
-
190
- - `analyze_color_likability` - Check if colors are universally disliked (bile zone)
191
- - `fix_disliked_colors_batch` - Fix multiple disliked colors automatically
192
-
193
- ## Ukrainian Language Context
194
-
195
- The user often communicates in Ukrainian. Key terms encountered:
196
-
197
- - "кольори" = colors
198
- - "ядро" = core
199
- - "утиліти" = utilities
200
- - "перетворення" = conversion
201
- - "змінні" = variables
package/DOCUMENTATION.md DELETED
@@ -1,274 +0,0 @@
1
- # Документація Coolors MCP
2
-
3
- ## Вступ
4
-
5
- Coolors MCP — це потужний інструмент командного рядка (CLI), призначений для розробників і дизайнерів, що надає широкий
6
- спектр функціональних можливостей для роботи з кольорами, створення тем і рефакторингу CSS. Проект побудований на
7
- TypeScript і використовує Model Context Protocol (MCP) для інтеграції з іншими інструментами розробки та AI-агентами.
8
-
9
- Основні можливості включають:
10
-
11
- - **Операції з кольорами**: Конвертація, обчислення відстані, перевірка контрастності.
12
- - **Генерація тем**: Створення тем Material Design 3, тональних палітр і гармонізація кольорів.
13
- - **Тематизація на основі зображень**: Видобування кольорів із зображень для створення динамічних тем.
14
- - **Рефакторинг CSS**: Автоматизація процесу переходу від жорстко закодованих значень кольорів до змінних теми.
15
- - **Аналіз кольорів**: Інструменти для виявлення та виправлення психологічно непривабливих кольорів.
16
-
17
- Ця документація описує доступні інструменти, їхні параметри та сфери застосування.
18
-
19
- ## Інструменти для роботи з кольорами
20
-
21
- Ці інструменти надають базові функції для маніпулювання та конвертації кольорів.
22
-
23
- ### `convert_color`
24
-
25
- Конвертує колір між різними форматами.
26
-
27
- - **Опис**: Цей інструмент дозволяє перетворювати кольори з одного формату в інший.
28
- - **Параметри**:
29
- - `color` (string): Колір для конвертації (може бути в форматі hex, rgb або hsl).
30
- - `to` (enum): Цільовий формат. Можливі значення: `"hex"`, `"rgb"`, `"hsl"`, `"lab"`, `"hct"`.
31
- - **Сфери застосування**:
32
- - Швидка конвертація кольорів для використання в CSS, графічних редакторах або інших інструментах.
33
- - Перетворення кольорів для відповідності вимогам різних бібліотек або API.
34
- - **Приклад**:
35
- ```bash
36
- coolors-mcp convert_color --color "#ff0000" --to "rgb"
37
- # Output: rgb(255, 0, 0)
38
- ```
39
-
40
- ### `color_distance`
41
-
42
- Обчислює перцептивну відстань між двома кольорами.
43
-
44
- - **Опис**: Використовує алгоритм Delta E 2000 для точного визначення візуальної різниці між кольорами, що корисно для
45
- оцінки схожості відтінків.
46
- - **Параметри**:
47
- - `color1` (string): Перший колір.
48
- - `color2` (string): Другий колір.
49
- - `metric` (enum, optional): Метрика для обчислення відстані. За замовчуванням `"deltaE2000"`.
50
- - **Сфери застосування**:
51
- - Оцінка того, наскільки схожими є два кольори для користувача.
52
- - Визначення, чи можна замінити один колір іншим без суттєвої візуальної різниці.
53
- - Групування схожих кольорів у палітрі.
54
- - **Приклад**:
55
- ```bash
56
- coolors-mcp color_distance --color1 "#ff0000" --color2 "#fe0000"
57
- # Output: Distance between #ff0000 and #fe0000: 0.26
58
- ```
59
-
60
- ### `check_contrast`
61
-
62
- Перевіряє коефіцієнт контрастності WCAG між двома кольорами.
63
-
64
- - **Опис**: Допомагає забезпечити доступність веб-контенту, перевіряючи, чи відповідає контрастність між текстом і фоном
65
- стандартам WCAG AA та AAA.
66
- - **Параметри**:
67
- - `foreground` (string): Колір тексту.
68
- - `background` (string): Колір фону.
69
- - **Сфери застосування**:
70
- - Перевірка доступності веб-сайтів та додатків.
71
- - Автоматизація тестування дизайну на відповідність стандартам WCAG.
72
- - **Приклад**:
73
- ```bash
74
- coolors-mcp check_contrast --foreground "#ffffff" --background "#000000"
75
- # Output:
76
- # Contrast Ratio: 21.00:1
77
- # WCAG AA: ✓ Pass (normal text)
78
- # WCAG AA: ✓ Pass (large text)
79
- # WCAG AAA: ✓ Pass (normal text)
80
- # WCAG AAA: ✓ Pass (large text)
81
- ```
82
-
83
- ### `palette_generator`
84
-
85
- Генерує колірні палітри на основі базового кольору.
86
-
87
- - **Опис**: Створює гармонійні колірні схеми, такі як монохроматичні, аналогічні, комплементарні та інші.
88
- - **Параметри**:
89
- - `baseColor` (string): Базовий колір для генерації палітри.
90
- - `type` (enum, optional): Тип палітри. Можливі значення: `"monochromatic"`, `"analogous"`, `"complementary"`,
91
- `"triadic"`, `"tetradic"`. За замовчуванням `"monochromatic"`.
92
- - `count` (number, optional): Кількість кольорів у палітрі. За замовчуванням `5`.
93
- - **Сфери застосування**:
94
- - Швидке створення колірних схем для дизайну.
95
- - Пошук натхнення для нових палітр.
96
- - Генерація варіацій кольорів для UI-елементів.
97
- - **Приклад**:
98
- ```bash
99
- coolors-mcp palette_generator --baseColor "#3498db" --type "analogous"
100
- # Output:
101
- # Generated analogous palette:
102
- # 1. #34d8db
103
- # 2. #34b8db
104
- # 3. #3498db
105
- # 4. #3478db
106
- # 5. #3458db
107
- ```
108
-
109
- ## Інструменти для аналізу кольорів
110
-
111
- Ці інструменти допомагають аналізувати та виправляти кольори з точки зору їхнього сприйняття.
112
-
113
- ### `analyze_color_likability`
114
-
115
- Аналізує, чи є колір універсально непривабливим.
116
-
117
- - **Опис**: Виявляє темно-жовто-зелені відтінки, які асоціюються з біологічними відходами, і пропонує виправлену версію.
118
- - **Параметри**:
119
- - `color` (string): Колір для аналізу.
120
- - `autoFix` (boolean, optional): Автоматично повертати виправлену версію, якщо колір непривабливий. За замовчуванням
121
- `true`.
122
- - **Сфери застосування**:
123
- - Уникнення використання кольорів, які можуть викликати негативні асоціації у користувачів.
124
- - Покращення естетики дизайну шляхом автоматичної корекції "проблемних" кольорів.
125
- - **Приклад**:
126
- ```bash
127
- coolors-mcp analyze_color_likability --color "#5a6e00"
128
- ```
129
-
130
- ### `fix_disliked_colors_batch`
131
-
132
- Аналізує та виправляє кілька непривабливих кольорів одночасно.
133
-
134
- - **Опис**: Дозволяє пакетно обробляти список кольорів, автоматично виправляючи ті, що є універсально непривабливими.
135
- - **Параметри**:
136
- - `colors` (array): Масив кольорів для аналізу.
137
- - `includeAnalysis` (boolean, optional): Включати детальний аналіз для кожного кольору. За замовчуванням `false`.
138
- - **Сфери застосування**:
139
- - Перевірка та виправлення всієї палітри проекту.
140
- - Забезпечення того, що жоден із кольорів у дизайн-системі не є непривабливим.
141
- - **Приклад**:
142
- ```bash
143
- coolors-mcp fix_disliked_colors_batch --colors '["#5a6e00", "#00ff00"]'
144
- ```
145
-
146
- ## Інструменти для роботи з темами Material Design
147
-
148
- Ці інструменти призначені для створення та керування колірними темами за принципами Material Design 3.
149
-
150
- ### `generate_material_theme`
151
-
152
- Генерує повну колірну тему Material Design 3 з вихідного кольору.
153
-
154
- - **Опис**: Створює світлу та темну версії теми, включаючи всі ключові кольори (primary, secondary, tertiary, error,
155
- background, surface тощо).
156
- - **Параметри**:
157
- - `sourceColor` (string): Вихідний колір для генерації теми.
158
- - `includeCustomColors` (boolean, optional): Включати палітри користувацьких кольорів. За замовчуванням `false`.
159
- - **Сфери застосування**:
160
- - Швидке створення повноцінної теми для веб-сайту або додатка.
161
- - Забезпечення узгодженості кольорів у всьому інтерфейсі.
162
- - **Приклад**:
163
- ```bash
164
- coolors-mcp generate_material_theme --sourceColor "#6750a4"
165
- ```
166
-
167
- ### `harmonize_colors`
168
-
169
- Гармонізує кольори для кращої сумісності за допомогою алгоритмів Material Design.
170
-
171
- - **Опис**: Допомагає кольорам краще поєднуватися один з одним, що корисно при комбінуванні кольорів з різних джерел.
172
- - **Параметри**:
173
- - `colors` (array): Масив кольорів для гармонізації.
174
- - `method` (enum, optional): Метод гармонізації. Можливі значення: `"blend"`, `"harmonize"`, `"temperature"`. За
175
- замовчуванням `"harmonize"`.
176
- - `factor` (number, optional): Сила гармонізації (0-1). За замовчуванням `0.5`.
177
- - **Сфери застосування**:
178
- - Покращення візуальної гармонії між різними елементами інтерфейсу.
179
- - Адаптація існуючої палітри до принципів Material Design.
180
-
181
- ### `generate_tonal_palette`
182
-
183
- Генерує тональну палітру Material Design з кольору.
184
-
185
- - **Опис**: Створює набір відтінків одного кольору з різною світлотою, що є основою для створення динамічних тем у
186
- Material Design 3.
187
- - **Параметри**:
188
- - `color` (string): Базовий колір для палітри.
189
- - `tones` (array, optional): Масив значень тонів для генерації (за замовчуванням стандартні тони Material Design).
190
- - **Сфери застосування**:
191
- - Створення узгоджених відтінків для станів елементів (hover, focus, disabled).
192
- - Розробка гнучких колірних систем.
193
-
194
- ## Інструменти для видобування кольорів із зображень
195
-
196
- Ці інструменти дозволяють створювати колірні схеми на основі вмісту зображень.
197
-
198
- ### `extract_image_colors`
199
-
200
- Видобуває домінуючі кольори із зображення.
201
-
202
- - **Опис**: Аналізує зображення та повертає палітру найбільш значущих кольорів.
203
- - **Параметри**:
204
- - `imageData` (object): Дані зображення з RGBA-значеннями.
205
- - `maxColors` (number, optional): Максимальна кількість кольорів для видобування. За замовчуванням `5`.
206
- - `quality` (enum, optional): Якість видобування: `"low"`, `"medium"`, `"high"`. За замовчуванням `"medium"`.
207
- - **Сфери застосування**:
208
- - Створення динамічних тем, що адаптуються до контенту.
209
- - Генерація палітр на основі фотографій або ілюстрацій.
210
-
211
- ### `generate_theme_from_image`
212
-
213
- Генерує повну тему Material Design 3 із зображення.
214
-
215
- - **Опис**: Автоматично створює узгоджену колірну тему на основі домінуючих кольорів зображення.
216
- - **Параметри**:
217
- - `imageData` (object): Дані зображення з RGBA-значеннями.
218
- - `isDark` (boolean, optional): Генерувати темну тему. За замовчуванням `false`.
219
- - **Сфери застосування**:
220
- - Створення персоналізованих інтерфейсів, що відповідають шпалерам користувача або іншим зображенням.
221
- - Швидка розробка тем для мультимедійних додатків.
222
-
223
- ## Інструменти для зіставлення з темою
224
-
225
- Ці інструменти допомагають інтегрувати існуючий CSS з дизайн-системою на основі змінних.
226
-
227
- ### `match_theme_color`
228
-
229
- Знаходить найближчу відповідну змінну теми для заданого кольору.
230
-
231
- - **Опис**: Допомагає замінити жорстко закодовані кольори на семантичні змінні з теми.
232
- - **Параметри**:
233
- - `color` (string): Колір для зіставлення.
234
- - `themeCSS` (string): CSS, що містить змінні теми.
235
- - `context` (enum, optional): Контекст використання для кращого зіставлення.
236
- - **Сфери застосування**:
237
- - Рефакторинг CSS та міграція на дизайн-систему.
238
- - Забезпечення узгодженості кольорів у великих проектах.
239
-
240
- ### `refactor_css_with_theme`
241
-
242
- Рефакторить CSS для використання змінних теми замість жорстко закодованих кольорів.
243
-
244
- - **Опис**: Автоматично аналізує CSS, знаходить жорстко закодовані кольори, зіставляє їх зі змінними теми та замінює їх.
245
- - **Параметри**:
246
- - `css` (string): Вміст CSS для рефакторингу.
247
- - `themeCSS` (string): CSS, що містить змінні теми.
248
- - `minConfidence` (number, optional): Мінімальна впевненість для заміни.
249
- - **Сфери застосування**:
250
- - Масштабний рефакторинг застарілого CSS.
251
- - Прискорення впровадження дизайн-системи.
252
-
253
- ### `match_theme_colors_batch`
254
-
255
- Знаходить відповідності в темі для кількох кольорів одночасно.
256
-
257
- - **Опис**: Дозволяє пакетно обробляти список кольорів для зіставлення зі змінними теми.
258
- - **Параметри**:
259
- - `colors` (array): Масив кольорів для зіставлення.
260
- - `themeCSS` (string): CSS, що містить змінні теми.
261
- - **Сфери застосування**:
262
- - Аналіз палітри існуючого проекту перед рефакторингом.
263
-
264
- ### `generate_theme_css`
265
-
266
- Генерує CSS-змінні для повної теми з вихідного кольору.
267
-
268
- - **Опис**: Створює готовий до використання CSS-файл з усіма тональними палітрами та семантичними зіставленнями.
269
- - **Параметри**:
270
- - `sourceColor` (string): Вихідний колір для генерації теми.
271
- - `prefix` (string, optional): Префікс для CSS-змінних.
272
- - **Сфери застосування**:
273
- - Швидке створення CSS-файлу теми для нового проекту.
274
- - Генерація основи для кастомізації дизайн-системи.