in packages/utilities/fast-colors/src/color-palette.ts [112:214]
public generatePaletteColorScale(): ColorScale {
// Even when config.baseScalePosition is specified, using 0.5 for the baseColor
// in the baseScale gives better results. Otherwise very off-center palettes
// tend to go completely grey at the end furthest from the specified base color.
const baseColorHSL: ColorHSL = rgbToHSL(this.config.baseColor);
const baseScale: ColorScale = new ColorScale([
{ position: 0, color: this.config.scaleColorLight },
{ position: 0.5, color: this.config.baseColor },
{ position: 1, color: this.config.scaleColorDark },
]);
const trimmedScale: ColorScale = baseScale.trim(
this.config.clipLight,
1 - this.config.clipDark
);
const trimmedLight: ColorRGBA64 = trimmedScale.getColor(0);
const trimmedDark: ColorRGBA64 = trimmedScale.getColor(1);
let adjustedLight: ColorRGBA64 = trimmedLight;
let adjustedDark: ColorRGBA64 = trimmedDark;
if (baseColorHSL.s >= this.config.saturationAdjustmentCutoff) {
adjustedLight = saturateViaLCH(adjustedLight, this.config.saturationLight);
adjustedDark = saturateViaLCH(adjustedDark, this.config.saturationDark);
}
if (this.config.multiplyLight !== 0) {
const multiply: ColorRGBA64 = blendMultiply(
this.config.baseColor,
adjustedLight
);
adjustedLight = interpolateByColorSpace(
this.config.multiplyLight,
this.config.interpolationMode,
adjustedLight,
multiply
);
}
if (this.config.multiplyDark !== 0) {
const multiply: ColorRGBA64 = blendMultiply(
this.config.baseColor,
adjustedDark
);
adjustedDark = interpolateByColorSpace(
this.config.multiplyDark,
this.config.interpolationMode,
adjustedDark,
multiply
);
}
if (this.config.overlayLight !== 0) {
const overlay: ColorRGBA64 = blendOverlay(
this.config.baseColor,
adjustedLight
);
adjustedLight = interpolateByColorSpace(
this.config.overlayLight,
this.config.interpolationMode,
adjustedLight,
overlay
);
}
if (this.config.overlayDark !== 0) {
const overlay: ColorRGBA64 = blendOverlay(
this.config.baseColor,
adjustedDark
);
adjustedDark = interpolateByColorSpace(
this.config.overlayDark,
this.config.interpolationMode,
adjustedDark,
overlay
);
}
if (this.config.baseScalePosition) {
if (this.config.baseScalePosition <= 0) {
return new ColorScale([
{ position: 0, color: this.config.baseColor },
{ position: 1, color: adjustedDark.clamp() },
]);
} else if (this.config.baseScalePosition >= 1) {
return new ColorScale([
{ position: 0, color: adjustedLight.clamp() },
{ position: 1, color: this.config.baseColor },
]);
}
return new ColorScale([
{ position: 0, color: adjustedLight.clamp() },
{
position: this.config.baseScalePosition,
color: this.config.baseColor,
},
{ position: 1, color: adjustedDark.clamp() },
]);
}
return new ColorScale([
{ position: 0, color: adjustedLight.clamp() },
{ position: 0.5, color: this.config.baseColor },
{ position: 1, color: adjustedDark.clamp() },
]);
}