Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const rightColors = chroma
.bezier(basePalette.slice(2, 5))
.scale()
.mode("lab")
.correctLightness(true);
const result: string[] = [];
for (let i = 0; i < steps; i++) {
// Calculate the position of the step as a value between 0 and 1.
// If it's below 0.5 use the left color scale, otherwise use right scale.
const t = i / (steps - 1);
result.push(t < 0.5 ? leftColors(t * 2).hex() : rightColors(t * 2 - 1).hex());
}
return result;
} else {
return chroma
.bezier(basePalette)
.scale()
.correctLightness(true)
.colors(steps);
}
};
private generateColorPalette = (basePalette: string[], diverging?: boolean, steps = this.state.steps) => {
if (diverging) {
// Split the basePalette into left and right, including the middle color in both.
// Create individual bezier scales for each side. We'll choose which to use later.
const leftColors = chroma
.bezier(basePalette.slice(0, 3))
.scale()
.mode("lab")
.correctLightness(true);
const rightColors = chroma
.bezier(basePalette.slice(2, 5))
.scale()
.mode("lab")
.correctLightness(true);
const result: string[] = [];
for (let i = 0; i < steps; i++) {
// Calculate the position of the step as a value between 0 and 1.
// If it's below 0.5 use the left color scale, otherwise use right scale.
const t = i / (steps - 1);
result.push(t < 0.5 ? leftColors(t * 2).hex() : rightColors(t * 2 - 1).hex());
private getColorScale(colors: string, bezier: boolean, lightness: boolean): string[] {
const cleanColors = clean(colors);
const scale = bezier ? chroma.bezier(cleanColors.slice(0, 5)).scale() : chroma.scale(cleanColors);
return scale.mode('lab').correctLightness(lightness).colors(this.steps);
function clean(s: string): string[] {
return s.trim().replace(/(, *| +)/g, ',').replace(/['"]/g, '').split(',');
}
}
}
import chroma from 'chroma-js'
export const COLORMAPS = [
{ text: 'Transparency', value: 'transparency' },
{
text: 'Jet',
value: chroma.scale([[0, 0, 131], [0, 60, 170], [5, 255, 255], [255, 255, 0], [250, 0, 0], [128, 0, 0]])
},
{
text: 'Hot',
value: chroma.bezier([[0, 0, 0], [230, 0, 0], [255, 210, 0], [255, 255, 255]])
},
{
text: 'Viridis',
value: chroma.scale([
[68, 1, 84],
[71, 44, 122],
[59, 81, 139],
[44, 113, 142],
[33, 144, 141],
[39, 173, 129],
[92, 200, 99],
[170, 220, 50],
[253, 231, 37]
])
},
{
function createSteps(colors, steps) {
return colors.length
? chroma
.scale(bezier && colors.length > 1 ? chroma.bezier(colors) : colors)
.correctLightness(correctLightness)
.colors(steps)
: [];
}
function getColorScale(colors: string, bezier: boolean, lightness: boolean) {
const cleanColors = clean(colors);
const scale = bezier ? chroma.bezier(cleanColors.slice(0, 5)).scale() : chroma.scale(cleanColors);
return scale.mode('lab').correctLightness(lightness);
}