Farbe: A Comprehensive Color Manipulation Library for JavaScript

1
import { Farbe } from '@olton/farbe';
2

3
// Create a new color instance
4
const color = new Farbe('#ff0000');  // Red
5

6
// Convert to different formats
7
console.log(color.rgb);  // RGB object: {r: 255, g: 0, b: 0}
8
console.log(color.hex);  // "#ff0000"
9
console.log(color.hsl);  // HSL object: {h: 0, s: 1, l: 0.5}
10

11
// Manipulate the color
12
color.lighten(20);       // Lighten by 20%
13
console.log(color.hex);  // "#ff1414"
14

15
color.toHSL();           // Convert to HSL format
16
color.saturate(10);      // Increase saturation by 10%

1
const color = new Farbe('#3498db');
2

3
// Convert to different formats
4
color.toRGB();    // Convert to RGB
5
color.toRGBA(0.5); // Convert to RGBA with 0.5 alpha
6
color.toHEX();    // Convert to HEX
7
color.toHSV();    // Convert to HSV
8
color.toHSL();    // Convert to HSL
9
color.toHSLA(0.8); // Convert to HSLA with 0.8 alpha
10
color.toCMYK();   // Convert to CMYK
11

12
// Get color in different formats without changing the internal representation
13
console.log(color.rgb);   // Get as RGB
14
console.log(color.rgba);  // Get as RGBA
15
console.log(color.hex);   // Get as HEX
16
console.log(color.hsv);   // Get as HSV
17
console.log(color.hsl);   // Get as HSL
18
console.log(color.hsla);  // Get as HSLA
19
console.log(color.cmyk);  // Get as CMYK

1
const color = new Farbe('#3498db');
2

3
// Basic manipulations
4
color.darken(20);      // Darken by 20%
5
color.lighten(10);     // Lighten by 10%
6
color.saturate(15);    // Increase saturation by 15%
7
color.desaturate(10);  // Decrease saturation by 10%
8
color.grayscale();     // Convert to grayscale
9
color.brighten(20);    // Brighten by 20%
10

11
// Hue manipulation
12
color.hueShift(30);    // Shift hue by 30 degrees
13
color.spin(90);        // Rotate hue by 90 degrees
14

15
// Channel manipulation
16
color.channel('red', 128);       // Set red channel to 128
17
color.channel('saturation', 0.8); // Set saturation to 0.8
18
color.channel('hue', 180);       // Set hue to 180

1
const color = new Farbe('#3498db');
2

3
// Generate different color schemes
4
const monoScheme = color.getScheme('mono', 'hex');
5
const complementaryScheme = color.getScheme('complement', 'rgb');
6
const triadicScheme = color.getScheme('triad', 'hsl');
7
const analogousScheme = color.getScheme('analog', 'hex');
8
const splitComplementaryScheme = color.getScheme('split', 'rgb');
9
const tetradicScheme = color.getScheme('tetra', 'hex');
10
const squareScheme = color.getScheme('square', 'hsl');
11

12
// Material design color palette
13
const materialPalette = color.getScheme('material', 'hex');

1
const color = new Farbe('#ff0000');  // Red
2

3
// Mix with blue (50% mix)
4
color.mix('#0000ff', 50);  // Results in purple (#800080)
5

6
// Add colors
7
color.add('#00ff00');  // Add green
8

9
// Multiply colors
10
color.multiply('#0000ff');  // Multiply with blue

1
const color = new Farbe('#3498db');
2

3
// Check if color is dark or light
4
if (color.isDark()) {
5
  // Use light text on dark background
6
} else {
7
  // Use dark text on light background
8
}
9

10
// Compare colors
11
const isEqual = color.equal('#3498db');  // true

1
const color = new Farbe();
2

3
// Generate a random color
4
color.random();  // Random HEX color
5

6
// Generate a random color in a specific format
7
color.random('rgb');  // Random RGB color
8
color.random('hsv', 0.5);  // Random HSV color with 0.5 alpha

1
const color = new Farbe('#123456');
2

3
// Convert to web-safe color
4
color.toWebsafe();  // Results in #003366

1
const color = new Farbe('#3498db', {
2
  alpha: 0.5,        // Default alpha value for RGBA/HSLA
3
  angle: 45,         // Default angle for hue shifting
4
  distance: 10,      // Distance for color schemes
5
  step: 0.2,         // Step size for color schemes
6
  tint1: 0.9,        // Tint factor 1 for monochromatic schemes
7
  tint2: 0.5,        // Tint factor 2 for monochromatic schemes
8
  shade1: 0.7,       // Shade factor 1 for monochromatic schemes
9
  shade2: 0.4,       // Shade factor 2 for monochromatic schemes
10
});

1
const result = new Farbe('#3498db')
2
  .toHSL()
3
  .saturate(20)
4
  .lighten(10)
5
  .hueShift(30)
6
  .toRGB()
7
  .toString();