Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for lab color #142

Merged
merged 10 commits into from
Nov 26, 2023
Merged

Add support for lab color #142

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
010a5f9
Rename color object properties to capital letters
elchininet Nov 24, 2023
f82af64
Change demo and documentation to reflect the change in color objects …
elchininet Nov 25, 2023
78e21ae
Add suport for CIE Lab color with a fake conversion for now
elchininet Nov 25, 2023
e3866cf
L*a*b conversion fixes, a new demo and some tests
elchininet Nov 25, 2023
445292c
Increase the coverage and fix bugs during the test coverage
elchininet Nov 25, 2023
e5aeb1b
Update documentation
elchininet Nov 26, 2023
9c9d980
Update CHANGELOG
elchininet Nov 26, 2023
26583cb
Grammar spelling corrections
elchininet Nov 26, 2023
1a0b6a9
Escape asterisks
elchininet Nov 26, 2023
3289308
Fix typo with percent
elchininet Nov 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .plop/regexps-strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,23 @@ module.exports = {
${SPACE}
\\)$
`,
CIELab: `
^lab${SPACE}\\(
${SPACE}
(?:
(${NUMBER_WITH_DECIMALS}%?)
${SPACE}
(-?${NUMBER_WITH_DECIMALS}%?)
${SPACE}
(-?${NUMBER_WITH_DECIMALS}%?)
(?:
${SLASH}
(${NUMBER_WITH_DECIMALS}%?)
)?
)
${SPACE}
\\)$
`,
CMYK: `
^(?:device-cmyk|cmyk)
${SPACE}
Expand Down
9 changes: 5 additions & 4 deletions .plop/regexps.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
// START REGEXPS
export const COLORREGS = {
[ColorModel.HEX] : {{ HEX }},
[ColorModel.RGB] : {{ RGB }},
[ColorModel.HSL] : {{ HSL }},
[ColorModel.CMYK] : {{ CMYK }}
[ColorModel.HEX] : {{ HEX }},
[ColorModel.RGB] : {{ RGB }},
[ColorModel.HSL] : {{ HSL }},
[ColorModel.CIELab] : {{ CIELab }},
[ColorModel.CMYK] : {{ CMYK }}
};

export const HSL_HUE = {{ HSL_HUE }};
Expand Down
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Changelog

## [4.0.0] - 2023-11-26

- [BREAKING CHANGE]: Properties of the HEX, HEXA, RGB, RGBA, HSL, HSLA, CMYK and CMYKA objects are now capitalized letters to make them more consistent with the rest of the properties and to add support for `Lab` colors with alpha (`L a b A`)
- Added support for CIE L\*a\*b colors conversion

## [3.0.2] - 2023-08-02

- Specify types for the ESM bundle
Expand Down
379 changes: 225 additions & 154 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/web/colortranslator.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,user-scalable=yes"/><title>ColorTranslator demo</title><meta name="description" content="A JavaScript library, written in TypeScript, to convert among different color models"/><link rel="icon" href="favicon.png"><script defer="defer" src="scripts/bundle.js"></script><link href="styles/styles.css" rel="stylesheet"></head><body><header class="separator"><a href="https://github.com/elchininet/ColorTranslator" target="_blank" rel="noopener noreferrer"><img class="logo" src="images/logo_white.svg"/></a></header><div class="github-buttons"><a class="github-button" href="https://github.com/elchininet/ColorTranslator/archive/master.zip" data-icon="octicon-cloud-download" data-size="large" aria-label="Download elchininet/ColorTranslator on GitHub">Download</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator/fork" data-icon="octicon-repo-forked" data-size="large" aria-label="Fork elchininet/ColorTranslator on GitHub">Fork</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator" data-icon="octicon-star" data-size="large" aria-label="Star elchininet/ColorTranslator on GitHub">Star</a></div><h3>Modifing color saturation and luminance</h3><div id="demo1" role="presentation" class="demo demo-square separator"></div><h3>Modifing color hue</h3><div id="demo2" role="presentation" class="demo demo-square-half separator"></div><h3>Wiphala modifying color hue</h3><div id="demo3" role="presentation" class="demo demo-square separator"></div><h3>Desaturating primary colors</h3><div id="demo4" role="presentation" class="demo demo-square separator"></div><h3>Blending between two colors</h3><div id="demo5" role="presentation" class="demo demo-square separator"></div><h3>Shades and tints of a color</h3><div id="demo6" role="presentation" class="demo demo-square separator"></div><h3>Mixing colors in additive mode</h3><div id="demo7" role="presentation" class="demo demo-square separator"></div><h3>Mixing colors in subtractive mode</h3><div id="demo8" role="presentation" class="demo demo-square separator"></div><h3>Additive Color Harmonies</h3><div id="demo9" role="presentation" class="demo demo-square separator"></div><h3>Subtractive Color Harmonies</h3><div id="demo10" role="presentation" class="demo demo-square separator"></div><script async defer="defer" src="https://buttons.github.io/buttons.js"></script></body></html>
<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,user-scalable=yes"/><title>ColorTranslator demo</title><meta name="description" content="A JavaScript library, written in TypeScript, to convert among different color models"/><link rel="icon" href="favicon.png"><script defer="defer" src="scripts/bundle.js"></script><link href="styles/styles.css" rel="stylesheet"></head><body><header class="separator"><a href="https://github.com/elchininet/ColorTranslator" target="_blank" rel="noopener noreferrer"><img class="logo" src="images/logo_white.svg"/></a></header><div class="github-buttons"><a class="github-button" href="https://github.com/elchininet/ColorTranslator/archive/master.zip" data-icon="octicon-cloud-download" data-size="large" aria-label="Download elchininet/ColorTranslator on GitHub">Download</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator/fork" data-icon="octicon-repo-forked" data-size="large" aria-label="Fork elchininet/ColorTranslator on GitHub">Fork</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator" data-icon="octicon-star" data-size="large" aria-label="Star elchininet/ColorTranslator on GitHub">Star</a></div><h3>Modifing color saturation and luminance</h3><div id="demo1" role="presentation" class="demo demo-square separator"></div><h3>Modifing color hue</h3><div id="demo2" role="presentation" class="demo demo-square-half separator"></div><h3>Wiphala modifying color hue</h3><div id="demo3" role="presentation" class="demo demo-square separator"></div><h3>Screen color equivalences</h3><div id="demo4" role="presentation" class="demo demo-square separator"></div><h3>Desaturating primary colors and CMYK conversion</h3><div id="demo5" role="presentation" class="demo demo-square separator"></div><h3>Blending between two colors</h3><div id="demo6" role="presentation" class="demo demo-square separator"></div><h3>Shades and tints of a color</h3><div id="demo7" role="presentation" class="demo demo-square separator"></div><h3>Mixing colors in additive mode</h3><div id="demo8" role="presentation" class="demo demo-square separator"></div><h3>Mixing colors in subtractive mode</h3><div id="demo9" role="presentation" class="demo demo-square separator"></div><h3>Additive Color Harmonies</h3><div id="demo10" role="presentation" class="demo demo-square separator"></div><h3>Subtractive Color Harmonies</h3><div id="demo11" role="presentation" class="demo demo-square separator"></div><script async defer="defer" src="https://buttons.github.io/buttons.js"></script></body></html>
2 changes: 1 addition & 1 deletion docs/scripts/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 7 additions & 5 deletions docs/styles/styles.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"index.js"
],
"scripts": {
"test:ts": "tsc --noEmit",
"test": "jest --verbose",
"lint": "eslint \"src/**/*.{js,ts}\" \"tests/**/*.ts\"",
"clean": "./scripts/clean.sh",
Expand Down
1 change: 1 addition & 0 deletions plopfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ module.exports = (plop) => {
HEX: toRegExp(COLOR_REGEXP_STRINGS.HEX, true),
RGB: toRegExp(COLOR_REGEXP_STRINGS.RGB),
HSL: toRegExp(COLOR_REGEXP_STRINGS.HSL),
CIELab: toRegExp(COLOR_REGEXP_STRINGS.CIELab),
CMYK: toRegExp(COLOR_REGEXP_STRINGS.CMYK),
HSL_HUE
},
Expand Down
17 changes: 10 additions & 7 deletions src/@demo/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,26 +54,29 @@ <h3>Modifing color hue</h3>
<h3>Wiphala modifying color hue</h3>
<div id="demo3" role="presentation" class="demo demo-square separator"></div>

<h3>Desaturating primary colors</h3>
<h3>Screen color equivalences</h3>
<div id="demo4" role="presentation" class="demo demo-square separator"></div>

<h3>Blending between two colors</h3>
<h3>Desaturating primary colors and CMYK conversion</h3>
<div id="demo5" role="presentation" class="demo demo-square separator"></div>

<h3>Shades and tints of a color</h3>
<h3>Blending between two colors</h3>
<div id="demo6" role="presentation" class="demo demo-square separator"></div>

<h3>Shades and tints of a color</h3>
<div id="demo7" role="presentation" class="demo demo-square separator"></div>

<h3>Mixing colors in additive mode</h3>
<div id="demo7" role="presentation" class="demo demo-square separator"></div>
<div id="demo8" role="presentation" class="demo demo-square separator"></div>

<h3>Mixing colors in subtractive mode</h3>
<div id="demo8" role="presentation" class="demo demo-square separator"></div>
<div id="demo9" role="presentation" class="demo demo-square separator"></div>

<h3>Additive Color Harmonies</h3>
<div id="demo9" role="presentation" class="demo demo-square separator"></div>
<div id="demo10" role="presentation" class="demo demo-square separator"></div>

<h3>Subtractive Color Harmonies</h3>
<div id="demo10" role="presentation" class="demo demo-square separator"></div>
<div id="demo11" role="presentation" class="demo demo-square separator"></div>

<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
Expand Down
2 changes: 2 additions & 0 deletions src/@demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import demo7 from './demo7';
import demo8 from './demo8';
import demo9 from './demo9';
import demo10 from './demo10';
import demo11 from './demo11';

const functioToString = (fn) => {
const article = document.createElement('article');
Expand All @@ -36,6 +37,7 @@ const demos = new Map([
['demo8', demo8],
['demo9', demo9],
['demo10', demo10],
['demo11', demo11],
]);

document.addEventListener('DOMContentLoaded', () => {
Expand Down
6 changes: 3 additions & 3 deletions src/@demo/demo10/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import './styles.scss';

export default (ColorTranslator, { Harmony, Mix }) => {
export default (ColorTranslator, { Harmony }) => {

const container = document.createElement('div');

Expand Down Expand Up @@ -29,10 +29,10 @@ export default (ColorTranslator, { Harmony, Mix }) => {
const harmony = createElement('harmony', wrapper);
createElement('label', wrapper).innerText = item.label;

fetch('images/wheel-subtractive.svg')
fetch('images/wheel-additive.svg')
.then(result => result.text())
.then((svgCode) => {
const harmonyColors = ColorTranslator.getHarmony(baseColor, item.value, Mix.SUBTRACTIVE);
const harmonyColors = ColorTranslator.getHarmony(baseColor, item.value);
const selector = 'path' + harmonyColors.map((color) => `:not([fill="${color}"])`).join('');
wheel.innerHTML = svgCode;
harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);
Expand Down
48 changes: 48 additions & 0 deletions src/@demo/demo11/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import './styles.scss';

export default (ColorTranslator, { Harmony, Mix }) => {

const container = document.createElement('div');

const harmonies = [
{ label: 'Complementary', value: Harmony.COMPLEMENTARY },
{ label: 'Split Complementary', value: Harmony.SPLIT_COMPLEMENTARY },
{ label: 'Analogous', value: Harmony.ANALOGOUS },
{ label: 'Triadic', value: Harmony.TRIADIC },
{ label: 'Tetradic', value: Harmony.TETRADIC },
{ label: 'Square', value: Harmony.SQUARE }
];

const baseColor = '#F00';

const createElement = (className, parent) => {
const div = document.createElement('div');
div.classList.add(className);
parent.appendChild(div);
return div;
};

const createHarmony = (item) => {

const wrapper = createElement('wrapper', container);
const wheel = createElement('wheel', wrapper);
const harmony = createElement('harmony', wrapper);
createElement('label', wrapper).innerText = item.label;

fetch('images/wheel-subtractive.svg')
.then(result => result.text())
.then((svgCode) => {
const harmonyColors = ColorTranslator.getHarmony(baseColor, item.value, Mix.SUBTRACTIVE);
const selector = 'path' + harmonyColors.map((color) => `:not([fill="${color}"])`).join('');
wheel.innerHTML = svgCode;
harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);
wheel.querySelectorAll(selector).forEach((path) => path.setAttribute('fill-opacity', '0.25'));
});

};

harmonies.forEach((item) => createHarmony(item));

return container;

};
35 changes: 35 additions & 0 deletions src/@demo/demo11/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
$color: #333;

#demo11 {
.demo-wrapper > div {
display: flex;
flex-wrap: wrap;
}
.wrapper {
width: 33.33%;
}
.harmony {
display: flex;
height: 25px;
justify-content: center;
@media screen and (max-width: 768px) {
height: 15px;
}
}
.label {
color: #FFF;
font-size: 12px;
padding-top: 10px;
text-align: center;
}
.box {
height: 25px;
outline: 2px solid #000;
width: 25px;
@media screen and (max-width: 768px) {
height: 15px;
outline-width: 1px;
width: 15px;
}
}
}
2 changes: 1 addition & 1 deletion src/@demo/demo2/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import './styles.scss';
export default (ColorTranslator) => {

const container = document.createElement('div');
const color = new ColorTranslator({ r: 255, g: 0, b: 0 });
const color = new ColorTranslator({ R: 255, G: 0, B: 0 });
const hue = [0, 30, 60, 120, 240, 280, 320, 0];
let rainbow;

Expand Down
4 changes: 2 additions & 2 deletions src/@demo/demo3/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import './styles.scss';
export default (ColorTranslator) => {

const container = document.createElement('div');
const hsl = { h: 0, s: '90%', l: '50%' };
const hsl = { H: 0, S: '90%', L: '50%' };
const hue = [undefined, 55, 30, 0, 290, 220, 130];
const total = hue.length;

Expand All @@ -15,7 +15,7 @@ export default (ColorTranslator) => {
if (index >= total) {
index -= total;
}
hsl.h = hue[index];
hsl.H = hue[index];
const rgb = hue[index] === undefined
? '#FFF'
: ColorTranslator.toHEX(hsl);
Expand Down
Loading