Skip to content

Commit

Permalink
feat: 0.2.0 : most functions are here
Browse files Browse the repository at this point in the history 
TODO :
- Add cbf parameter where needed
- Update the Vue component to serve as a showcase
- Add the main entrypoint palex() which can call all the others
- Create documentation
  • Loading branch information
@EDM115
EDM115 committed Feb 14, 2024
1 parent 3e71b05 commit 94c98e5
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 55 deletions.
86 changes: 81 additions & 5 deletions dist/palex.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,8 @@ function adjustForColorBlindness(palette) {
});
return finalPalette;
}
function simulateColorBlindness(colorHex) {
var normalColor = chroma(colorHex).hex();
function simulateColorBlindness(color) {
var normalColor = chroma(color).hex();
var cb = [normalColor];
var protanopia = blinder.protanopia(normalColor);
var deuteranopia = blinder.deuteranopia(normalColor);
Expand All @@ -190,9 +190,10 @@ function simulateColorBlindness(colorHex) {
cb.push(protanopia, deuteranopia, tritanopia, achromatopsia);
return cb;
}
function beautifyPalette(colors) {
var bezier = chroma.bezier(colors);
var bezierColors = bezier.scale().correctLightness().colors(colors.length);
function beautifyPalette(palette) {
palette = sanitizeInput(palette, 'hex');
var bezier = chroma.bezier(palette);
var bezierColors = bezier.scale().correctLightness().colors(palette.length);
return bezierColors;
}
function getGoldenColor(color) {
Expand All @@ -209,13 +210,88 @@ function generateGreyscale(start, end, steps) {
}
return greyscale;
}
function generateHues(palette, numColors) {
palette = sanitizeInput(palette, 'hex');
var colors = [];
var hues = [];
var length = Math.floor(numColors / palette.length);
palette.forEach(function (baseColor) {
hues.push(generateHuesFromColor(baseColor, length + 1));
});
var _loop2 = function _loop2(i) {
hues.forEach(function (hue) {
colors.push(hue[i]);
});
};
for (var i = 0; i < length + 1; i++) {
_loop2(i);
}
colors = _toConsumableArray(new Set(colors));
if (colors.length > numColors) {
colors = colors.slice(0, numColors);
}
return colors;
}
function generateHuesFromColor(color, numColors) {
var baseColor = chroma(color);
var colors = [baseColor.hex()];
for (var i = 1; i < numColors; i++) {
var _color = baseColor.set('hsl.l', '*' + (1 + i / numColors)).saturate(1);
colors.push(_color.hex());
}
return colors;
}
function generateComplementaries(palette, numColors) {
palette = sanitizeInput(palette, 'hex');
var colors = [];
var generatedColors = [];
var length = Math.floor(numColors / palette.length);
palette.forEach(function (baseColor) {
generatedColors.push(generatePaletteFromColor(baseColor, length + 1));
});
var _loop3 = function _loop3(i) {
generatedColors.forEach(function (color) {
colors.push(color[i]);
});
};
for (var i = 0; i < length + 1; i++) {
_loop3(i);
}
colors = _toConsumableArray(new Set(colors));
if (colors.length > size) {
colors = colors.slice(0, numColors);
}
return colors;
}
function generatePaletteFromColor(color, numColors) {
var baseColor = chroma(color);
var colors = [baseColor.hex()];
var complementaryColor = baseColor.set('hsl.h', '+180');
colors.push(complementaryColor.hex());
for (var i = 1; i <= Math.floor((numColors - 2) / 2); i++) {
var analogousColor1 = baseColor.set('hsl.h', "+".concat(i * 30));
var analogousColor2 = baseColor.set('hsl.h', "-".concat(i * 30));
colors.push(analogousColor1.hex(), analogousColor2.hex());
}
if (colors.length < numColors) {
var triadicColor1 = baseColor.set('hsl.h', '+120');
var triadicColor2 = baseColor.set('hsl.h', '-120');
colors.push(triadicColor1.hex(), triadicColor2.hex());
}
colors = colors.slice(0, numColors);
return colors;
}

exports.blinder = blinder;
exports.chroma = chroma;
exports.adjustForColorBlindness = adjustForColorBlindness;
exports.beautifyPalette = beautifyPalette;
exports.generateComplementaries = generateComplementaries;
exports.generateGreyscale = generateGreyscale;
exports.generateHues = generateHues;
exports.generateHuesFromColor = generateHuesFromColor;
exports.generatePaletteFromBrewer = generatePaletteFromBrewer;
exports.generatePaletteFromColor = generatePaletteFromColor;
exports.getGoldenColor = getGoldenColor;
exports.sanitizeInput = sanitizeInput;
exports.simulateColorBlindness = simulateColorBlindness;
84 changes: 78 additions & 6 deletions dist/palex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,8 @@ function adjustForColorBlindness(palette) {
});
return finalPalette;
}
function simulateColorBlindness(colorHex) {
var normalColor = chroma(colorHex).hex();
function simulateColorBlindness(color) {
var normalColor = chroma(color).hex();
var cb = [normalColor];
var protanopia = blinder.protanopia(normalColor);
var deuteranopia = blinder.deuteranopia(normalColor);
Expand All @@ -190,9 +190,10 @@ function simulateColorBlindness(colorHex) {
cb.push(protanopia, deuteranopia, tritanopia, achromatopsia);
return cb;
}
function beautifyPalette(colors) {
var bezier = chroma.bezier(colors);
var bezierColors = bezier.scale().correctLightness().colors(colors.length);
function beautifyPalette(palette) {
palette = sanitizeInput(palette, 'hex');
var bezier = chroma.bezier(palette);
var bezierColors = bezier.scale().correctLightness().colors(palette.length);
return bezierColors;
}
function getGoldenColor(color) {
Expand All @@ -209,5 +210,76 @@ function generateGreyscale(start, end, steps) {
}
return greyscale;
}
function generateHues(palette, numColors) {
palette = sanitizeInput(palette, 'hex');
var colors = [];
var hues = [];
var length = Math.floor(numColors / palette.length);
palette.forEach(function (baseColor) {
hues.push(generateHuesFromColor(baseColor, length + 1));
});
var _loop2 = function _loop2(i) {
hues.forEach(function (hue) {
colors.push(hue[i]);
});
};
for (var i = 0; i < length + 1; i++) {
_loop2(i);
}
colors = _toConsumableArray(new Set(colors));
if (colors.length > numColors) {
colors = colors.slice(0, numColors);
}
return colors;
}
function generateHuesFromColor(color, numColors) {
var baseColor = chroma(color);
var colors = [baseColor.hex()];
for (var i = 1; i < numColors; i++) {
var _color = baseColor.set('hsl.l', '*' + (1 + i / numColors)).saturate(1);
colors.push(_color.hex());
}
return colors;
}
function generateComplementaries(palette, numColors) {
palette = sanitizeInput(palette, 'hex');
var colors = [];
var generatedColors = [];
var length = Math.floor(numColors / palette.length);
palette.forEach(function (baseColor) {
generatedColors.push(generatePaletteFromColor(baseColor, length + 1));
});
var _loop3 = function _loop3(i) {
generatedColors.forEach(function (color) {
colors.push(color[i]);
});
};
for (var i = 0; i < length + 1; i++) {
_loop3(i);
}
colors = _toConsumableArray(new Set(colors));
if (colors.length > size) {
colors = colors.slice(0, numColors);
}
return colors;
}
function generatePaletteFromColor(color, numColors) {
var baseColor = chroma(color);
var colors = [baseColor.hex()];
var complementaryColor = baseColor.set('hsl.h', '+180');
colors.push(complementaryColor.hex());
for (var i = 1; i <= Math.floor((numColors - 2) / 2); i++) {
var analogousColor1 = baseColor.set('hsl.h', "+".concat(i * 30));
var analogousColor2 = baseColor.set('hsl.h', "-".concat(i * 30));
colors.push(analogousColor1.hex(), analogousColor2.hex());
}
if (colors.length < numColors) {
var triadicColor1 = baseColor.set('hsl.h', '+120');
var triadicColor2 = baseColor.set('hsl.h', '-120');
colors.push(triadicColor1.hex(), triadicColor2.hex());
}
colors = colors.slice(0, numColors);
return colors;
}

export { adjustForColorBlindness, beautifyPalette, generateGreyscale, generatePaletteFromBrewer, getGoldenColor, sanitizeInput, simulateColorBlindness };
export { adjustForColorBlindness, beautifyPalette, generateComplementaries, generateGreyscale, generateHues, generateHuesFromColor, generatePaletteFromBrewer, generatePaletteFromColor, getGoldenColor, sanitizeInput, simulateColorBlindness };
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "palex",
"version": "0.1.0",
"version": "0.2.0",
"description": "Simple package to help you create color palettes",
"author": "EDM115 <[email protected]> (https://edm115.dev)",
"homepage": "https://github.com/EDM115/palex",
Expand Down
92 changes: 49 additions & 43 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,8 +146,8 @@ function adjustForColorBlindness(palette) {
return finalPalette
}

function simulateColorBlindness(colorHex) {
const normalColor = chroma(colorHex).hex()
function simulateColorBlindness(color) {
const normalColor = chroma(color).hex()
const cb = [normalColor]

const protanopia = blinder.protanopia(normalColor)
Expand All @@ -159,9 +159,10 @@ function simulateColorBlindness(colorHex) {
return cb
}

function beautifyPalette(colors) {
const bezier = chroma.bezier(colors)
const bezierColors = bezier.scale().correctLightness().colors(colors.length)
function beautifyPalette(palette) {
palette = sanitizeInput(palette, 'hex')
const bezier = chroma.bezier(palette)
const bezierColors = bezier.scale().correctLightness().colors(palette.length)

return bezierColors
}
Expand All @@ -182,49 +183,29 @@ function generateGreyscale(start, end, steps) {
return greyscale
}

function generateDynamicPalette(baseColors, paletteType, size) {
function generateHues(palette, numColors) {
palette = sanitizeInput(palette, 'hex')
let colors = []
if (paletteType === 'hues') {
const hues = []
const length = Math.floor(size / baseColors.length)
baseColors.forEach(baseColor => {
hues.push(generateHuesFromColor(baseColor, length + 1))
})
for (let i = 0; i < length + 1; i++) {
hues.forEach(hue => {
colors.push(hue[i])
})
}
} else if (paletteType === 'complementary') {
const generatedColors = []
const length = Math.floor(size / baseColors.length)
baseColors.forEach(baseColor => {
generatedColors.push(generatePaletteFromColor(baseColor, length + 1))
const hues = []
const length = Math.floor(numColors / palette.length)
palette.forEach(baseColor => {
hues.push(generateHuesFromColor(baseColor, length + 1))
})
for (let i = 0; i < length + 1; i++) {
hues.forEach(hue => {
colors.push(hue[i])
})
for (let i = 0; i < length + 1; i++) {
generatedColors.forEach(color => {
colors.push(color[i])
})
}
}

colors = [...new Set(colors)]
if (colors.length > size) {
colors = colors.slice(0, size)
} else {
const numGreyscaleColors = size - colors.length
const start = 0
const end = numGreyscaleColors - 1
const steps = numGreyscaleColors
const greyscaleColors = generateGreyscale(start, end, steps)
colors = colors.concat(greyscaleColors)
if (colors.length > numColors) {
colors = colors.slice(0, numColors)
}

return colors
}

function generateHuesFromColor(colorHex, numColors = 10) {
const baseColor = chroma(colorHex)
function generateHuesFromColor(color, numColors) {
const baseColor = chroma(color)
let colors = [baseColor.hex()]
for (let i = 1; i < numColors; i++) {
const color = baseColor.set('hsl.l', '*' + (1 + i / numColors)).saturate(1)
Expand All @@ -234,8 +215,29 @@ function generateHuesFromColor(colorHex, numColors = 10) {
return colors
}

function generatePaletteFromColor(colorHex, numColors = 10) {
const baseColor = chroma(colorHex)
function generateComplementaries(palette, numColors) {
palette = sanitizeInput(palette, 'hex')
let colors = []
const generatedColors = []
const length = Math.floor(numColors / palette.length)
palette.forEach(baseColor => {
generatedColors.push(generatePaletteFromColor(baseColor, length + 1))
});
for (let i = 0; i < length + 1; i++) {
generatedColors.forEach(color => {
colors.push(color[i])
})
}

colors = [...new Set(colors)]
if (colors.length > size) {
colors = colors.slice(0, numColors)
}
return colors
}

function generatePaletteFromColor(color, numColors) {
const baseColor = chroma(color)
let colors = [baseColor.hex()]

const complementaryColor = baseColor.set('hsl.h', '+180')
Expand Down Expand Up @@ -267,5 +269,9 @@ export {
simulateColorBlindness,
beautifyPalette,
getGoldenColor,
generateGreyscale
generateGreyscale,
generateHues,
generateHuesFromColor,
generateComplementaries,
generatePaletteFromColor
}

0 comments on commit 94c98e5

Please sign in to comment.