├── .github └── CODEOWNERS ├── .prettierrc.json ├── .prettierignore ├── package.json ├── .gitignore ├── .vscode └── settings.json ├── readme.md ├── index.js └── yarn.lock /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @james-gates-0212 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "arrowParens": "always", 4 | "printWidth": 60, 5 | "trailingComma": "all" 6 | } 7 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts 2 | .DS_Store 3 | .env 4 | .gitignore 5 | .prettierignore 6 | build 7 | dist 8 | frontend 9 | node_modules 10 | 11 | # Ignore files 12 | *.gif 13 | *.ico 14 | *.jpeg 15 | *.jpg 16 | *.lock 17 | *.png 18 | *.svg 19 | *.txt 20 | *.woff 21 | *.woff2 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "convert-color", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "poprunner88", 10 | "license": "ISC", 11 | "dependencies": { 12 | "color": "^4.2.3", 13 | "fs": "^0.0.1-security", 14 | "path": "^0.12.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | node_modules/ 6 | node_modules/ 7 | /data 8 | dist/ 9 | 10 | *.sh 11 | 12 | # testing 13 | /coverage 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "titleBar.activeForeground": "#FFF", 4 | "titleBar.inactiveForeground": "#000000CC", 5 | "titleBar.activeBackground": "#1662C4", 6 | "titleBar.inactiveBackground": "#1A73E899" 7 | }, 8 | "editor.defaultFormatter": "esbenp.prettier-vscode", 9 | "editor.formatOnSave": true, 10 | "[javascript]": { 11 | "editor.defaultFormatter": "esbenp.prettier-vscode", 12 | "editor.formatOnSave": true 13 | }, 14 | "[json]": { 15 | "editor.defaultFormatter": "esbenp.prettier-vscode", 16 | "editor.formatOnSave": true 17 | }, 18 | "editor.tabSize": 2 19 | } 20 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fjames-gates-0212%2Fconvert-color) 2 | ![GitHub forks](https://img.shields.io/github/forks/james-gates-0212/convert-color?style=flat) 3 | ![GitHub Discussions](https://img.shields.io/github/discussions/james-gates-0212/convert-color) 4 | ![GitHub Issues](https://img.shields.io/github/issues/james-gates-0212/convert-color) 5 | ![GitHub License](https://img.shields.io/github/license/james-gates-0212/convert-color) 6 | ![GitHub Repo stars](https://img.shields.io/github/stars/james-gates-0212/convert-color?style=flat) 7 | ![GitHub top language](https://img.shields.io/github/languages/top/james-gates-0212/convert-color) 8 | ![GitHub repo file or directory count](https://img.shields.io/github/directory-file-count/james-gates-0212/convert-color) 9 | ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/james-gates-0212/convert-color) 10 | ![GitHub repo size](https://img.shields.io/github/repo-size/james-gates-0212/convert-color) 11 | ![GitHub Release](https://img.shields.io/github/v/release/james-gates-0212/convert-color) 12 | ![GitHub Tag](https://img.shields.io/github/v/tag/james-gates-0212/convert-color) 13 | 14 | # Convert Color 15 | 16 | When it comes to converting colors based on the difference between two sample colors, there are a few approaches you can take. One common method is to calculate the color difference using various color models like RGB, or HSL. Once you have the color difference value, you can then apply it to your target color to achieve the desired result. 17 | 18 | ## Run 19 | 20 | ```bash 21 | yarn 22 | node index.js 23 | ``` 24 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const color = require('color'); 2 | const fs = require('fs'); 3 | const path = require('path'); 4 | 5 | const channels = { 6 | saturationl: 100, 7 | lightness: 100, 8 | alpha: 1, 9 | }; 10 | 11 | const sourceColor = color('#8a49a8'); 12 | const targetColor = color('#344767'); 13 | 14 | const targetHue = targetColor.hue(); 15 | 16 | const calcDiffEachChannel = () => { 17 | const diff = {}; 18 | for (const channel of Object.keys(channels)) { 19 | diff[channel] = 20 | targetColor[channel]() - sourceColor[channel](); 21 | } 22 | return diff; 23 | }; 24 | 25 | const diff = calcDiffEachChannel(); 26 | 27 | console.log('difference', diff); 28 | 29 | const patterns = [ 30 | /(#[\da-f]{6})/gi, 31 | /(#[\da-f]{8})/gi, 32 | /(rgb\([\d]+,[ ]*[\d]+,[ ]*[\d]+\))/gi, 33 | /(rgba\([\d]+,[ ]*[\d]+,[ ]*[\d]+,[ ]*[\d]*[\.]?[\d]*\))/gi, 34 | ]; 35 | 36 | function fromDir(startPath, filter) { 37 | if (!fs.existsSync(startPath)) { 38 | console.log('no dir ', startPath); 39 | return; 40 | } 41 | 42 | var files = fs.readdirSync(startPath); 43 | for (var i = 0; i < files.length; i++) { 44 | var filename = path.join(startPath, files[i]); 45 | var stat = fs.lstatSync(filename); 46 | if (stat.isDirectory()) { 47 | fromDir(filename, filter); 48 | } else if (filename.endsWith(filter)) { 49 | var buffer = fs.readFileSync(filename); 50 | var content = buffer.toString(); 51 | var replaced = 0; 52 | const convertColor = (colorString) => { 53 | let newColor = color(colorString.toLowerCase()).hue( 54 | targetHue, 55 | ); 56 | for (const channel of Object.keys(channels)) { 57 | let newChannelValue = 58 | newColor[channel]() + diff[channel]; 59 | if (newChannelValue > channels[channel]) { 60 | newChannelValue = channels[channel]; 61 | } 62 | if (newChannelValue < 0) { 63 | newChannelValue = 0; 64 | } 65 | newColor = newColor[channel](newChannelValue); 66 | } 67 | // newColor = color(colorString.toLowerCase()); 68 | const replacer = 69 | newColor.alpha() === 1 70 | ? newColor.hex() 71 | : newColor.rgb(); 72 | replaced++; 73 | return replacer; 74 | }; 75 | for (const pattern of patterns) { 76 | content = content.replace(pattern, convertColor); 77 | } 78 | fs.writeFileSync(filename, content); 79 | if (replaced) { 80 | console.log('-- found: ', filename); 81 | console.log(`>>>`, replaced, `replaced.`); 82 | } 83 | } 84 | } 85 | } 86 | 87 | const exts = ['.js', '.jsx', '.scss', '.svg']; 88 | const paths = ['../react-portfolio/src/']; 89 | 90 | for (const path of paths) { 91 | for (const ext of exts) { 92 | fromDir(path, ext); 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | color-convert@^2.0.1: 6 | version "2.0.1" 7 | resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" 8 | integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== 9 | dependencies: 10 | color-name "~1.1.4" 11 | 12 | color-name@^1.0.0, color-name@~1.1.4: 13 | version "1.1.4" 14 | resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" 15 | integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== 16 | 17 | color-string@^1.9.0: 18 | version "1.9.1" 19 | resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" 20 | integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== 21 | dependencies: 22 | color-name "^1.0.0" 23 | simple-swizzle "^0.2.2" 24 | 25 | color@^4.2.3: 26 | version "4.2.3" 27 | resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" 28 | integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== 29 | dependencies: 30 | color-convert "^2.0.1" 31 | color-string "^1.9.0" 32 | 33 | fs@^0.0.1-security: 34 | version "0.0.1-security" 35 | resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4" 36 | integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w== 37 | 38 | inherits@2.0.3: 39 | version "2.0.3" 40 | resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" 41 | integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw== 42 | 43 | is-arrayish@^0.3.1: 44 | version "0.3.2" 45 | resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" 46 | integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== 47 | 48 | path@^0.12.7: 49 | version "0.12.7" 50 | resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" 51 | integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q== 52 | dependencies: 53 | process "^0.11.1" 54 | util "^0.10.3" 55 | 56 | process@^0.11.1: 57 | version "0.11.10" 58 | resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" 59 | integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== 60 | 61 | simple-swizzle@^0.2.2: 62 | version "0.2.2" 63 | resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" 64 | integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== 65 | dependencies: 66 | is-arrayish "^0.3.1" 67 | 68 | util@^0.10.3: 69 | version "0.10.4" 70 | resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901" 71 | integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A== 72 | dependencies: 73 | inherits "2.0.3" 74 | --------------------------------------------------------------------------------