0
# Color Schemes and Combinations
1

2
Methods for generating color schemes including complements, triads, tetrads, analogous colors, and monochromatic variations. These methods help create harmonious color palettes for design systems and user interfaces.
3

4
## Capabilities
5

6
### Complement Colors
7

8
#### Generate Complement
9

10
Returns the complement color (opposite on the color wheel).
11

12
```javascript { .api }
13
/**
14
 * Returns the complement color (180 degrees opposite)
15
 * @returns new tinycolor instance representing the complement
16
 */
17
complement(): tinycolor;
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
import tinycolor from "tinycolor2";
24

25
const red = tinycolor("red");
26
const complement = red.complement();
27

28
console.log(red.toHexString());        // "#ff0000"
29
console.log(complement.toHexString()); // "#00ffff" (cyan)
30

31
const blue = tinycolor("#0066cc");
32
const blueComplement = blue.complement();
33

34
console.log(blue.toHexString());           // "#0066cc"
35
console.log(blueComplement.toHexString()); // "#cc6600"
36

37
// Create complementary color pairs
38
function getComplementaryPair(color) {
39
  const base = tinycolor(color);
40
  return {
41
    primary: base.toHexString(),
42
    complement: base.complement().toHexString()
43
  };
44
}
45
```
46

47
### Split Complement Colors
48

49
#### Generate Split Complement
50

51
Returns an array containing the original color and its split complements.
52

53
```javascript { .api }
54
/**
55
 * Returns split complement colors (base + two colors adjacent to complement)
56
 * @returns array of 3 tinycolor instances [original, splitComp1, splitComp2]
57
 */
58
splitcomplement(): tinycolor[];
59
```
60

61
**Usage Examples:**
62

63
```javascript
64
const orange = tinycolor("#ff8000");
65
const splitComps = orange.splitcomplement();
66

67
console.log("Original:", splitComps[0].toHexString());    // "#ff8000"
68
console.log("Split 1:", splitComps[1].toHexString());     // "#0080ff"
69
console.log("Split 2:", splitComps[2].toHexString());     // "#8000ff"
70

71
// Use for triadic harmony with more subtle contrast
72
function createSplitComplementPalette(baseColor) {
73
  const colors = tinycolor(baseColor).splitcomplement();
74
  return {
75
    primary: colors[0].toHexString(),
76
    secondary: colors[1].toHexString(),
77
    tertiary: colors[2].toHexString()
78
  };
79
}
80
```
81

82
### Analogous Colors
83

84
#### Generate Analogous Colors
85

86
Returns an array of analogous colors (colors adjacent on the color wheel).
87

88
```javascript { .api }
89
/**
90
 * Returns analogous colors (adjacent colors on the color wheel)
91
 * @param results - Number of colors to return (default 6)
92
 * @param slices - Number of slices to divide the color wheel (default 30)
93
 * @returns array of tinycolor instances
94
 */
95
analogous(results?: number, slices?: number): tinycolor[];
96
```
97

98
**Usage Examples:**
99

100
```javascript
101
const green = tinycolor("#00ff00");
102

103
// Default analogous colors (6 colors)
104
const analogous = green.analogous();
105
console.log("Analogous colors:");
106
analogous.forEach((color, i) => {
107
  console.log(`${i}: ${color.toHexString()}`);
108
});
109

110
// Custom number of colors
111
const fiveAnalogous = green.analogous(5);
112
const tenAnalogous = green.analogous(10);
113

114
// Custom slicing for finer control
115
const fineAnalogous = green.analogous(6, 60); // 60 slices instead of default 30
116

117
// Create harmonious color palette
118
function createAnalogousPalette(baseColor, count = 5) {
119
  return tinycolor(baseColor)
120
    .analogous(count)
121
    .map(color => color.toHexString());
122
}
123

124
const bluePalette = createAnalogousPalette("#3498db", 7);
125
```
126

127
### Monochromatic Colors
128

129
#### Generate Monochromatic Variations
130

131
Returns an array of monochromatic variations (same hue, different saturation/lightness).
132

133
```javascript { .api }
134
/**
135
 * Returns monochromatic variations of the color
136
 * @param results - Number of variations to return (default 6)
137
 * @returns array of tinycolor instances with same hue
138
 */
139
monochromatic(results?: number): tinycolor[];
140
```
141

142
**Usage Examples:**
143

144
```javascript
145
const purple = tinycolor("#8e44ad");
146

147
// Default monochromatic variations (6 colors)
148
const mono = purple.monochromatic();
149
console.log("Monochromatic variations:");
150
mono.forEach((color, i) => {
151
  console.log(`${i}: ${color.toHexString()}`);
152
});
153

154
// Custom number of variations
155
const monoFive = purple.monochromatic(5);
156
const monoTen = purple.monochromatic(10);
157

158
// Create tonal palette for UI design
159
function createTonalPalette(baseColor, count = 8) {
160
  const variations = tinycolor(baseColor).monochromatic(count);
161
  
162
  // Sort by lightness for organized palette
163
  variations.sort((a, b) => b.getLuminance() - a.getLuminance());
164
  
165
  return variations.map(color => color.toHexString());
166
}
167

168
const grayScale = createTonalPalette("#666666", 10);
169
```
170

171
### Triadic Colors
172

173
#### Generate Triad
174

175
Returns a triad color scheme (3 evenly spaced colors on the color wheel).
176

177
```javascript { .api }
178
/**
179
 * Returns triad colors (3 colors evenly spaced on color wheel)
180
 * @returns array of 3 tinycolor instances [original, +120°, +240°]
181
 */
182
triad(): tinycolor[];
183
```
184

185
**Usage Examples:**
186

187
```javascript
188
const red = tinycolor("#ff0000");
189
const triad = red.triad();
190

191
console.log("Triad colors:");
192
console.log("Primary:", triad[0].toHexString());   // "#ff0000" (red)
193
console.log("Secondary:", triad[1].toHexString()); // "#00ff00" (green)
194
console.log("Tertiary:", triad[2].toHexString());  // "#0000ff" (blue)
195

196
// Create balanced color scheme
197
function createTriadicScheme(baseColor) {
198
  const colors = tinycolor(baseColor).triad();
199
  return {
200
    primary: colors[0].toHexString(),
201
    secondary: colors[1].toHexString(),
202
    tertiary: colors[2].toHexString(),
203
    // Add tinted versions
204
    primaryLight: colors[0].lighten(20).toHexString(),
205
    secondaryLight: colors[1].lighten(20).toHexString(),
206
    tertiaryLight: colors[2].lighten(20).toHexString()
207
  };
208
}
209
```
210

211
### Tetradic Colors
212

213
#### Generate Tetrad
214

215
Returns a tetrad color scheme (4 colors forming a rectangle on the color wheel).
216

217
```javascript { .api }
218
/**
219
 * Returns tetrad colors (4 colors forming rectangle on color wheel)
220
 * @returns array of 4 tinycolor instances
221
 */
222
tetrad(): tinycolor[];
223
```
224

225
**Usage Examples:**
226

227
```javascript
228
const orange = tinycolor("#ff8000");
229
const tetrad = orange.tetrad();
230

231
console.log("Tetrad colors:");
232
tetrad.forEach((color, i) => {
233
  console.log(`Color ${i + 1}: ${color.toHexString()}`);
234
});
235

236
// Create rich 4-color palette
237
function createTetradScheme(baseColor) {
238
  const colors = tinycolor(baseColor).tetrad();
239
  return {
240
    primary: colors[0].toHexString(),
241
    secondary: colors[1].toHexString(),
242
    tertiary: colors[2].toHexString(),
243
    quaternary: colors[3].toHexString()
244
  };
245
}
246

247
// Use for complex designs requiring 4 distinct colors
248
const complexPalette = createTetradScheme("#e74c3c");
249
```
250

251
## Advanced Color Scheme Examples
252

253
### Comprehensive Palette Generator
254

255
```javascript
256
function generateCompletePalette(baseColor) {
257
  const base = tinycolor(baseColor);
258
  
259
  return {
260
    // Base color
261
    base: base.toHexString(),
262
    
263
    // Monochromatic (tonal variations)
264
    monochromatic: base.monochromatic(5).map(c => c.toHexString()),
265
    
266
    // Analogous (harmonious)
267
    analogous: base.analogous(5).map(c => c.toHexString()),
268
    
269
    // Complementary
270
    complement: base.complement().toHexString(),
271
    
272
    // Split complementary
273
    splitComplement: base.splitcomplement().map(c => c.toHexString()),
274
    
275
    // Triadic
276
    triad: base.triad().map(c => c.toHexString()),
277
    
278
    // Tetradic
279
    tetrad: base.tetrad().map(c => c.toHexString()),
280
    
281
    // Variations
282
    variations: {
283
      light: base.lighten(20).toHexString(),
284
      dark: base.darken(20).toHexString(),
285
      muted: base.desaturate(30).toHexString(),
286
      vibrant: base.saturate(20).toHexString()
287
    }
288
  };
289
}
290

291
const palette = generateCompletePalette("#3498db");
292
```
293

294
### Material Design Color Schemes
295

296
```javascript
297
function createMaterialPalette(primaryColor) {
298
  const primary = tinycolor(primaryColor);
299
  
300
  // Generate material design-like color variations
301
  const palette = {
302
    50: primary.clone().lighten(45).desaturate(50).toHexString(),
303
    100: primary.clone().lighten(40).desaturate(30).toHexString(),
304
    200: primary.clone().lighten(30).desaturate(20).toHexString(),
305
    300: primary.clone().lighten(20).desaturate(10).toHexString(),
306
    400: primary.clone().lighten(10).toHexString(),
307
    500: primary.toHexString(), // Base color
308
    600: primary.clone().darken(10).toHexString(),
309
    700: primary.clone().darken(20).toHexString(),
310
    800: primary.clone().darken(30).toHexString(),
311
    900: primary.clone().darken(40).toHexString(),
312
    
313
    // Accent colors
314
    A100: primary.clone().lighten(30).saturate(30).toHexString(),
315
    A200: primary.clone().lighten(10).saturate(20).toHexString(),  
316
    A400: primary.clone().saturate(20).toHexString(),
317
    A700: primary.clone().darken(10).saturate(20).toHexString()
318
  };
319
  
320
  return palette;
321
}
322
```
323

324
### Theme Generator
325

326
```javascript
327
function createThemeFromBase(baseColor, options = {}) {
328
  const {
329
    includeAnalogous = true,
330
    includeComplementary = true,
331
    includeMonochromatic = true,
332
    accentCount = 2
333
  } = options;
334
  
335
  const base = tinycolor(baseColor);
336
  const theme = {
337
    primary: {
338
      main: base.toHexString(),
339
      light: base.lighten(20).toHexString(),
340
      dark: base.darken(20).toHexString()
341
    }
342
  };
343
  
344
  if (includeComplementary) {
345
    const complement = base.complement();
346
    theme.secondary = {
347
      main: complement.toHexString(),
348
      light: complement.lighten(20).toHexString(),
349
      dark: complement.darken(20).toHexString()
350
    };
351
  }
352
  
353
  if (includeAnalogous) {
354
    const analogous = base.analogous(accentCount + 1).slice(1); // Exclude base
355
    theme.accents = analogous.map(color => ({
356
      main: color.toHexString(),
357
      light: color.lighten(15).toHexString(),
358
      dark: color.darken(15).toHexString()
359
    }));
360
  }
361
  
362
  if (includeMonochromatic) {
363
    const mono = base.monochromatic(5);
364
    theme.grays = mono.map(color => color.toHexString());
365
  }
366
  
367
  return theme;
368
}
369

370
// Usage
371
const blueTheme = createThemeFromBase("#2196F3", {
372
  includeAnalogous: true,
373
  includeComplementary: true,
374
  accentCount: 3
375
});
376
```
377

378
### Color Harmony Validation
379

380
```javascript
381
function analyzeColorHarmony(colors) {
382
  const tinyColors = colors.map(c => tinycolor(c));
383
  const analysis = {
384
    isMonochromatic: false,
385
    isAnalogous: false,
386
    isComplementary: false,
387
    isTriadic: false,
388
    isTetradic: false
389
  };
390
  
391
  if (tinyColors.length === 2) {
392
    // Check if complementary (hue difference ~180°)
393
    const hue1 = tinyColors[0].toHsl().h;
394
    const hue2 = tinyColors[1].toHsl().h;
395
    const hueDiff = Math.abs(hue1 - hue2);
396
    analysis.isComplementary = Math.abs(hueDiff - 180) < 15;
397
  }
398
  
399
  if (tinyColors.length === 3) {
400
    // Check if triadic (hue differences ~120°)
401
    const hues = tinyColors.map(c => c.toHsl().h);
402
    // Implementation for triadic check...
403
  }
404
  
405
  // Check if monochromatic (same hue, different saturation/lightness)
406
  const hues = tinyColors.map(c => c.toHsl().h);
407
  const uniqueHues = [...new Set(hues.map(h => Math.round(h / 5) * 5))]; // Group similar hues
408
  analysis.isMonochromatic = uniqueHues.length <= 1;
409
  
410
  return analysis;
411
}
412
```