How to use d3-color - 10 common examples
To help you get started, we’ve selected a few d3-color examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github 
cRGB = d3Color.rgb('steelblue');
cRGB = d3Color.rgb('rgba(20, 100, 200, 0.5)');
cRGB = d3Color.rgb(c);
cRGB = cRGB.brighter();
cRGB = cRGB.brighter(0.2);
cRGB = cRGB.darker();
cRGB = cRGB.darker(0.2);
cRGB = cRGB.rgb();
displayable = cRGB.displayable();
cString = cRGB.toString();
console.log('Channels = (r : %d, g: %d, b: %d)', cRGB.r, cRGB.g, cRGB.b);
console.log('Opacity = %d', cRGB.opacity);
cHSL = d3Color.hsl(60, 1, 0.2);
cHSL = d3Color.hsl(60, 1, 0.2, 0.5);
cHSL = d3Color.hsl('steelblue');
cHSL = d3Color.hsl('rgba(20, 100, 200, 0.5)');
cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);
// Signature tests for Lab
let cLab: d3Color.LabColor;cRGB = d3Color.rgb(20, 100, 200, 0.5);
cRGB = d3Color.rgb('steelblue');
cRGB = d3Color.rgb('rgba(20, 100, 200, 0.5)');
cRGB = d3Color.rgb(c);
cRGB = cRGB.brighter();
cRGB = cRGB.brighter(0.2);
cRGB = cRGB.darker();
cRGB = cRGB.darker(0.2);
cRGB = cRGB.rgb();
displayable = cRGB.displayable();
cString = cRGB.toString();
console.log('Channels = (r : %d, g: %d, b: %d)', cRGB.r, cRGB.g, cRGB.b);
console.log('Opacity = %d', cRGB.opacity);
cHSL = d3Color.hsl(60, 1, 0.2);
cHSL = d3Color.hsl(60, 1, 0.2, 0.5);
cHSL = d3Color.hsl('steelblue');
cHSL = d3Color.hsl('rgba(20, 100, 200, 0.5)');
cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);
// Signature tests for Lab
let cLab: d3Color.LabColor;cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);
// Signature tests for HCL
let cHcl: d3Color.HCLColor;
cHcl = d3Color.hcl(120, 40, 50);
cHcl = d3Color.hcl(120, 40, 50, 0.5);
cHcl = d3Color.hcl('steelblue');
cHcl = d3Color.hcl('rgba(20, 100, 200, 0.5)');
cHcl = d3Color.hcl(c);
cHcl = cHcl.brighter();
cHcl = cHcl.brighter(0.2);
cHcl = cHcl.darker();
cHcl = cHcl.darker(0.2);
cRGB = cHcl.rgb();
displayable = cHcl.displayable();
cString = cHcl.toString();
console.log('Channels = (h : %d, c: %d, l: %d)', cHcl.h, cHcl.c, cHcl.l);
console.log('Opacity = %d', cHcl.opacity);
// Signature tests for Cubehelix
let cCubehelix: d3Color.CubehelixColor;
cCubehelix = d3Color.cubehelix(20, 100, 200);
cCubehelix = d3Color.cubehelix(20, 100, 200, 0.5);cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);
// Signature tests for Lab
let cLab: d3Color.LabColor;
cLab = d3Color.lab(120, 40, 50);
cLab = d3Color.lab(120, 40, 50, 0.5);
cLab = d3Color.lab('steelblue');
cLab = d3Color.lab('rgba(20, 100, 200, 0.5)');
cLab = d3Color.lab(c);
cLab = cLab.brighter();
cLab = cLab.brighter(0.2);
cLab = cLab.darker();
cLab = cLab.darker(0.2);
cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);
// Signature tests for HCLcHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);
// Signature tests for Lab
let cLab: d3Color.LabColor;
cLab = d3Color.lab(120, 40, 50);
cLab = d3Color.lab(120, 40, 50, 0.5);
cLab = d3Color.lab('steelblue');
cLab = d3Color.lab('rgba(20, 100, 200, 0.5)');
cLab = d3Color.lab(c);
cLab = cLab.brighter();
cLab = cLab.brighter(0.2);
cLab = cLab.darker();
cLab = cLab.darker(0.2);
cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);
// Signature tests for HCL
let cHcl: d3Color.HCLColor;cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);
// Signature tests for Lab
let cLab: d3Color.LabColor;
cLab = d3Color.lab(120, 40, 50);
cLab = d3Color.lab(120, 40, 50, 0.5);
cLab = d3Color.lab('steelblue');
cLab = d3Color.lab('rgba(20, 100, 200, 0.5)');
cLab = d3Color.lab(c);
cLab = cLab.brighter();
cLab = cLab.brighter(0.2);
cLab = cLab.darker();
cLab = cLab.darker(0.2);
cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);
// Signature tests for HCL
let cHcl: d3Color.HCLColor;cHcl = cHcl.brighter(0.2);
cHcl = cHcl.darker();
cHcl = cHcl.darker(0.2);
cRGB = cHcl.rgb();
displayable = cHcl.displayable();
cString = cHcl.toString();
console.log('Channels = (h : %d, c: %d, l: %d)', cHcl.h, cHcl.c, cHcl.l);
console.log('Opacity = %d', cHcl.opacity);
// Signature tests for Cubehelix
let cCubehelix: d3Color.CubehelixColor;
cCubehelix = d3Color.cubehelix(20, 100, 200);
cCubehelix = d3Color.cubehelix(20, 100, 200, 0.5);
cCubehelix = d3Color.cubehelix('steelblue');
cCubehelix = d3Color.cubehelix('rgba(20, 100, 200, 0.5)');
cCubehelix = d3Color.cubehelix(c);
cCubehelix = cCubehelix.brighter();
cCubehelix = cCubehelix.brighter(0.2);
cCubehelix = cCubehelix.darker();
cCubehelix = cCubehelix.darker(0.2);
cRGB = cCubehelix.rgb();
displayable = cCubehelix.displayable();
cString = cCubehelix.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cCubehelix.h, cCubehelix.s, cCubehelix.l);
console.log('Opacity = %d', cCubehelix.opacity);cHcl = cHcl.darker();
cHcl = cHcl.darker(0.2);
cRGB = cHcl.rgb();
displayable = cHcl.displayable();
cString = cHcl.toString();
console.log('Channels = (h : %d, c: %d, l: %d)', cHcl.h, cHcl.c, cHcl.l);
console.log('Opacity = %d', cHcl.opacity);
// Signature tests for Cubehelix
let cCubehelix: d3Color.CubehelixColor;
cCubehelix = d3Color.cubehelix(20, 100, 200);
cCubehelix = d3Color.cubehelix(20, 100, 200, 0.5);
cCubehelix = d3Color.cubehelix('steelblue');
cCubehelix = d3Color.cubehelix('rgba(20, 100, 200, 0.5)');
cCubehelix = d3Color.cubehelix(c);
cCubehelix = cCubehelix.brighter();
cCubehelix = cCubehelix.brighter(0.2);
cCubehelix = cCubehelix.darker();
cCubehelix = cCubehelix.darker(0.2);
cRGB = cCubehelix.rgb();
displayable = cCubehelix.displayable();
cString = cCubehelix.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cCubehelix.h, cCubehelix.s, cCubehelix.l);
console.log('Opacity = %d', cCubehelix.opacity);iString = d3Interpolate.interpolateRgb.gamma(2.2)('purple', 'orange');
// test interpolateRgbBasis(color) and interpolateRgbBasisClosed(color) signatures -------------------------
iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Color.rgb('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasisClosed(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);
// test interpolateHsl(a, b) and interpolateHslLong(a, b)----------------------------------------------------------------
iString = d3Interpolate.interpolateHsl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
iString = d3Interpolate.interpolateHslLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
// test interpolateLab(a, b) --------------------------------------------------------------------------------------------
iString = d3Interpolate.interpolateLab('seagreen', 'steelblue');
iString = d3Interpolate.interpolateLab(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateLab(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
// test interpolateHcl(a, b) and interpolateHclLong(a, b) ----------------------------------------------------------------
iString = d3Interpolate.interpolateHcl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHcl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHcl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
iString = d3Interpolate.interpolateHclLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHclLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));function color_(color, _) {
let f;
if (isFunction(color)) {
f = obj => rgb(color(obj, _));
f.dep = dependency(color);
} else {
// default to mid-grey
f = constant(rgb(color || '#888'));
}
return f;
}d3-color
Color spaces! RGB, HSL, Cubehelix, Lab and HCL (Lch).
