pigmentjs/dist/pigment.js

A zero-dependency colour organisation, creation and manipulation library built for web developers.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pigment = void 0;
var validations_1 = require("./validations");
var helpers_1 = require("./helpers");
var transformations_1 = require("./transformations");
var Pigment = /** @class */ (function () {
    function Pigment(hex) {
        this.hex = (0, validations_1.formatHex)((0, validations_1.validateHex)(hex || (0, helpers_1.randomHex)()));
        // Set these once, Pigment is immutable
        this.rgb = (0, transformations_1.rgb2array)((0, transformations_1.hex2rgb)(this.hex));
        this.irgb = (0, transformations_1.hex2rgb)(this.hex); // internal rgb to avoid breaking API changes
        this.rgbString = (0, transformations_1.rgb2string)(this.irgb);
        this.hsl = (0, transformations_1.hsl2array)((0, transformations_1.rgb2hsl)(this.irgb));
        this.ihsl = (0, transformations_1.rgb2hsl)(this.irgb); // internal hsl to avoid breaking API changes
        this.hue = this.ihsl.h;
        this.saturation = this.ihsl.s;
        this.lightness = this.ihsl.l;
        this.hslString = (0, transformations_1.hsl2string)(this.ihsl);
        this.relativeLuminance = (0, transformations_1.relativeLuminance)(this.irgb);
        this.textColourHex = this._textColourHex(this.relativeLuminance);
    }
    /**
     * Convert to HSL, rotate hue 180 degrees, convert
     * back to RGB and instantiate pigmentjs with hex
     */
    Pigment.prototype.complementary = function () {
        // eslint-disable-next-line prefer-const
        var _a = this.ihsl, h = _a.h, s = _a.s, l = _a.l;
        h += 180;
        if (h > 360) {
            h -= 360;
        }
        var hex = (0, transformations_1.rgb2hex)((0, transformations_1.hsl2rgb)({ h: h, s: s, l: l }));
        return new Pigment(hex);
    };
    /**
     * Convert to HSL, rotate hue 120 degrees (twice), convert
     * back to RGB and instantiate pigmentjs with hex
     */
    Pigment.prototype.triad = function () {
        // eslint-disable-next-line prefer-const
        var _a = this.ihsl, h = _a.h, s = _a.s, l = _a.l;
        h += 120;
        if (h > 360) {
            h -= 360;
        }
        var Pigment2 = new Pigment((0, transformations_1.rgb2hex)((0, transformations_1.hsl2rgb)({ h: h, s: s, l: l })));
        h += 120;
        if (h > 360) {
            h -= 360;
        }
        var Pigment3 = new Pigment((0, transformations_1.rgb2hex)((0, transformations_1.hsl2rgb)({ h: h, s: s, l: l })));
        return [this, Pigment2, Pigment3];
    };
    Pigment.prototype.monochrome = function (size) {
        var _this = this;
        var satUnit = 1 / (size + 1);
        var percentages = [];
        for (var steps = size; steps > 0; steps -= 1) {
            percentages.push(steps * satUnit);
        }
        percentages.sort(function (a, b) { return a - b; });
        return percentages.map(function (saturation) {
            saturation = saturation * 100;
            return new Pigment((0, transformations_1.rgb2hex)((0, transformations_1.hsl2rgb)({ h: _this.hue, s: saturation, l: _this.lightness })));
        });
    };
    Pigment.prototype.shades = function (size) {
        var _this = this;
        var shadeUnit = 1 / (size + 1);
        var percentages = [];
        for (var steps = size; steps > 0; steps -= 1) {
            percentages.push(steps * shadeUnit);
        }
        percentages.sort(function (a, b) { return a - b; });
        return percentages.map(function (shade) {
            var _a = _this.irgb, r = _a.r, g = _a.g, b = _a.b;
            return new Pigment((0, transformations_1.rgb2hex)({
                r: Math.round(r - r * shade),
                g: Math.round(g - g * shade),
                b: Math.round(b - b * shade),
            }));
        });
    };
    Pigment.prototype.tints = function (size) {
        var _this = this;
        var tintUnit = 1 / (size + 1);
        var percentages = [];
        for (var steps = size; steps > 0; steps -= 1) {
            percentages.push(steps * tintUnit);
        }
        percentages.sort(function (a, b) { return a - b; });
        return percentages.map(function (tint) {
            var _a = _this.irgb, r = _a.r, g = _a.g, b = _a.b;
            return new Pigment((0, transformations_1.rgb2hex)({
                r: Math.round(r + (255 - r) * tint),
                g: Math.round(g + (255 - g) * tint),
                b: Math.round(b + (255 - b) * tint),
            }));
        });
    };
    /**
     * Return either white or black depending on the relative luminance
     * of the primary colour. Can be used to ensure text is legible
     *
     * @returns {String} either '#FFFFFF' or '#000000'
     */
    Pigment.prototype._textColourHex = function (relativeLuminance) {
        return relativeLuminance < 0.5 ? "#FFFFFF" : "#000000";
    };
    return Pigment;
}());
exports.Pigment = Pigment;
exports.default = Pigment;
//# sourceMappingURL=pigment.js.map