{"id":22888064,"url":"https://github.com/myndex/colorparsley","last_synced_at":"2025-05-07T11:44:36.162Z","repository":{"id":38785997,"uuid":"438581155","full_name":"Myndex/colorparsley","owner":"Myndex","description":"A lightweight but versatile mini-lib to parse color strings, objects, or numbers, returning a simple rgba array, and related string utilities. This was developed as part of the basic APCA distro.","archived":false,"fork":false,"pushed_at":"2024-05-06T18:28:53.000Z","size":5415,"stargazers_count":19,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-04T15:02:53.461Z","etag":null,"topics":["color","colors","css","css4","displayp3","hex","hsl","hwb","javascript","parser","rgb","srgb","string-formatter","string-matching","string-parsing","string-pattern-matching"],"latest_commit_sha":null,"homepage":"https://myndex.github.io/colorparsley/ColorParsleyRegexChart.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Myndex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-15T10:05:36.000Z","updated_at":"2025-04-29T13:45:38.000Z","dependencies_parsed_at":"2024-06-18T20:07:07.753Z","dependency_job_id":"8518298a-bad8-4b46-8e03-ed5608be5d51","html_url":"https://github.com/Myndex/colorparsley","commit_stats":{"total_commits":41,"total_committers":4,"mean_commits":10.25,"dds":0.2682926829268293,"last_synced_commit":"d0e3ffc6ef81957424ff02174f9bae3243a61816"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"Myndex/apca-w3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myndex%2Fcolorparsley","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myndex%2Fcolorparsley/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myndex%2Fcolorparsley/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myndex%2Fcolorparsley/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Myndex","download_url":"https://codeload.github.com/Myndex/colorparsley/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252873929,"owners_count":21817708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","colors","css","css4","displayp3","hex","hsl","hwb","javascript","parser","rgb","srgb","string-formatter","string-matching","string-parsing","string-pattern-matching"],"created_at":"2024-12-13T20:46:52.982Z","updated_at":"2025-05-07T11:44:36.138Z","avatar_url":"https://github.com/Myndex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\n  \u003ca href=\"https://npmjs.org/package/colorparsley\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/colorparsley?color=3000c0\u0026icon=npm\" alt=\"version\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/Myndex/colorparsley/src/\"\u003e\n    \u003cimg src=\"https://badgen.net/badge/JS/Vanilla/889900\" alt=\"plain vanilla JS\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/Myndex/colorparsley/blob/master/LICENSE.md\"\u003e\n    \u003cimg src=\"https://badgen.net/badge/license/AGPL?icon=github\u0026color=BB5FD1\" alt=\"license\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Myndex/colorparsley\"\u003e\n    \u003cimg src=\"https://badgen.net/github/last-commit/Myndex/colorparsley/?icon=github\" alt=\"last commit\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://npmjs.org/package/colorparsley\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/dt/colorparsley?color=6000b0\u0026icon=npm\" alt=\"downloads\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://twitter.com/MyndexResearch\"\u003e\n    \u003cimg src=\"https://badgen.net/badge/@/MyndexResearch?icon=twitter\" alt=\"twitter\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\n\u003c/p\u003e\n\n# CoLoR🎨 PaRsLeY🌿\n\n\u003cimg src=\"images/colorparsleyLOGO.png\" alt=\"color parsley logo\" width=\"500\"\u003e\n\n\n## colorParsley()\n\n### A lightweight but versatile color parsing utility with no dependencies\n\n[Current Version:](./docs/versionHistory.md) **0.1.8**\n\n**NEW in 0.1.8: colorToHex and colorToRGB now round by default, and input strings using CSS color() have output array values multiplied by 255 for consistency with all other arrays..**\n**NEW in 0.1.7: output array will now *always* have an alpha value, with the default as 1 for inputs that lack an alpha. \"Failed\" parsings will return an alpha of 0.**\n\nColoR PaRsLeY is a spin off of the SAPC/APCA project. It is a lightweight but powerful tool for parsing color values out of various string types. It supports HEX, RGB INT, HTML \u0026 CSS Named Colors, and a variety of additional color models.\n\nColoR PaRsLeY returns a simple four element array of RGBA INT for HEX or RGB INT inputs, but longer arrays are available for the specialty category. \n\n## QuickStart\n\n_NPM Install:_   ` npm i colorparsley `\n\n\n### *Usage:*\n\"colorParsley()\" send it a string, it returns an rgba INT array:\n\n```javascript\n    let textColor = colorParsley('#111111');\n    let backgroundColor = colorParsley('rgb(123,23,233,1.0)');\n\n    console.log(textColor); // [17,17,17,1,true,'sRGB']\n    console.log(backgroundColor); // [123,23,233,1,true,'sRGB']\n    \n    // STRUCTURE\n    returnedArray = [R,G,B,A,isValidBool,colorspaceString]\n```\n\nThe following are the available input types for colorParsley(). **All are automatically recognized:**\n\n### INPUT as STRINGS:\n- **No Alpha**\n    - ` '#abc' ` or ` 'abc' ` (interpreted as ` 'aabbcc' `)\n    - ` '#abcdef' ` or ` 'abcdef' ` (hash is ignored)\n    - ` 'rgb(123, 45, 67)' ` or ` '123,45,67' `\n    - ` 'aquamarine' ` or ` 'magenta' ` (full CSS4 named colors list)\n    - ` 'color(srgb 0.765 0.89 0.556)' `\n- **With Alpha**\n    - ` '#abcf' ` or ` 'abcf' ` (interpreted as ` 'aabbccff' `)\n    - ` '#123456ff' ` or ` '123456ff' ` (hash is ignored)\n    - ` 'rgba(123, 45, 67, 1.0)' `\n    - ` 'color(srgb 0.765 0.89 0.556 / 1)' `\n- **Greyscale Shorthand**\n    - ` '#ab' ` or ` 'ab' ` (interpreted as if` 'ababab' `)\n    - ` '123,' `(interpreted as if` 'rgb(123, 123, 123)' `)\n    - ` '87%' `(interpreted as if ` 'rgb(87%, 87%, 87%)' = [221.85,221.85,221.85]`)\n\n### NEW:\n\n- CSS 4 compatible changes:\n    - INTs changed to NUMBER (i.e. 123 can now be 123.9586)\n    - Added support for `color(srgb 0.765 0.89 0.556 / 1)`\n- HSL and HWB now!\n    - `hsl(310,40%,60%, 1)` (alpha optional)\n- NEW export utilities for hex and rgb strings\n    - `colorToHex(colorParsley('rgb(170,187,204)'))` returns `abc`\n    - `colorToRGB(colorParsley('abc'))` returns `rgb(170,187,204)`\n- Better error handling—now errors return [0,0,0,'',false,'\u0026lt;error message\u0026gt;']\n- Send it an object containing {r: g: b:} or {red: green: blue:}\n- Send it a simple array [r,g,b,a]\n- Greyscale shortcuts!\n    - For HEX, just two digits: a7 means `#a7a7a7`\n    - For INT, 1-3 digits followed by a comma: 123, means `rgb(123,123,123)`\n    - For PCT, 1-3 digits followed by a `%`: 87% means `rgb(87%,87%,87%)`\n        - and is output as ` [221.85,221.85,221.85,'',...] `\n- \"More better\" regex validations and input type steering\n    - Each RGB value must be 0.0-255.0. Alpha is 0.0-1 or 0% to 100%\n    - Alpha values with percent symbol are converted to 0.0-1.0\n    - RGB Color values in percent are converted to 0.0-255.0    \n- regex parsing for lch, hsv, luv, etc.\n    - first 3-5 characters defines the color type\n    - minimal verification and maximum flexibility for different color space and color model types.\n    - Supports INT, float, and percentage with % symbol.\n    - All values with percent symbol are converted to 0.0-1.0\n    - NOTE: at this time, these are not processed into an rgba array and\n    - other than percentage, values are left as is, and\n    - the color type is returned as the sixth element in the array\n\n### Sending as a NUMBER:\n- **As hex**\n    - ` 0xabcdef `\n- **As integer**\n    - ` 11259375 `\n\nNo alpha parsing for _numbers_\n\n### RETURNS\n- All hex and rgb() inputs return a 6 element rgba NUMBER array\n    - `[255,255,255,1,true,'sRGB']`\n- A value input with a percentage symbol % is divided by 100.0\n- Values are assumed to be 8bit unless a decimal point is found.\n\n- The \"isValid\" boolean is the 5th element in the return array.\n- The 6th array element is colorspace or model (i.e. hsl) (default sRGB)\n    - `[255,255,255,1,true,'sRGB']`\n\n### Future\nPassthrough values to be added to the array to be returned. \n- An optional 7th array element is the gamma or TRC (default sRGB or per table)\n    - `[322,0.7,0.5,1,'hsv',2.2]`\n- An optional 8th array element is the bitdepth (default 8bit per channel)\n    - `[0.95,1.1,0.76,1,'RGB','1.0','32.0f','D65']`\n    - \n- An optional 9th array element is the whitepoint (default D65)\n    - `[123,123,123,1,'ProPhoto','1.8','D50']`\n\nThoughts? Discuss at the repo!\n\n-----\n## COMPANION CODE SNIPPET\nThe following code snippet is useful for auto-enter entry fields where you want instant response. This function cleans up entry keys as needed — adjust the keys to allow for your interface.\n\nHere the function just calls colorParsley(), but of course add whatever calls you need.\n\n```javascript\n    // Entry Key Cleanup for better UX with auto-enter\n    \n  function entryKeys(colorString,e) {\n    if (\n      (\n      (e.which \u003e= 48 \u0026\u0026 e.which \u003c= 57 \u0026\u0026 event.shiftKey == false) || // 0-9\n      (e.which \u003e= 65 \u0026\u0026 e.which \u003c= 90) ||  // a-z\n      (e.which \u003e= 96 \u0026\u0026 e.which \u003c= 105) // num keypad\n      ) ||\n      e.which === 13 || // enter\n      e.which === 9 || // tab key\n      e.which === 188 || // comma key\n      e.which === 194 || // comma num keypad key\n      //e.which === 8  || // backspace\n      //e.which === 17 || // ctrl\n      //e.which === 46 || // delete\n      //(e.which \u003e= 91 \u0026\u0026 e.which \u003c= 93) ||  // OS key\n      (e.which === 48 \u0026\u0026 event.shiftKey == true) // close parenthesis\n    ) {\n      let myNewColor = colorParsley(colorString);\n      showMeTheColor(myNewColor); // the function to do on entry.\n    }\n  }\n```\nThen in your input field, use ` onkeyup =` (or other appropriate event)\n\n```HTML\n    \u003cinput  id=\"inputColorString\"\n            type=\"text\"\n            onclick=\"this.select();\"\n            onkeyup=\"entryKeys(this.value,event);\"\u003e\n```\n\n### The NEW CoLoR PaRsLeY REGEX:\n\n\u003cimg width=\"800\" alt=\"the color parsley regex flowchart\" src=\"./images/colorParsleyRegexFlowchart.png\"\u003e\n\nRegex flow chart svg created at https://www.debuggex.com/\n\n\n### Reference code from CSS \n\n```javascript\n\n//* // hslToRgb() hwbToRgb() from CSS shown here only as a reference\n\n/////  ƒ  hslToRgb()  ///////////////////////////////////////////////////\n\n    //// Unused, built into the string parser, here for reference\nfunction hslToRgb (hue, sat, light) { // CSS4 reference implementation\n    hue = hue % 360;\n    if (hue \u003c 0) { hue += 360; }\n    sat /= 100.0;\n    light /= 100.0;\n    function f(n) {\n        let k = (n + hue/30) % 12;\n        let a = sat * Math.min(light, 1 - light);\n        return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n    }\n    return [f(0), f(8), f(4)]; // returns  0.0 - 1.0\n};\n\n\n/////  ƒ  hwbToRgb()  ///////////////////////////////////////////////////\n\n    //// Unused, built into the string parser, here for reference\nfunction hwbToRgb(hue, white, black) {  // CSS4 reference implementation\n    white /= 100.0;\n    black /= 100.0;\n    if (white + black \u003e= 1) {\n        let gray = white / (white + black);\n    return [gray, gray, gray];\n    }\n    let rgb = hslToRgb(hue, 100.0, 50.0);\n    for (let i = 0; i \u003c 3; i++) {\n        rgb[i] *= (1 - white - black);\n        rgb[i] += white;\n    }\n    return rgb; // returns  0.0 - 1.0\n};\n// */\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyndex%2Fcolorparsley","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyndex%2Fcolorparsley","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyndex%2Fcolorparsley/lists"}