{"id":13570102,"url":"https://github.com/PitPik/tinyColorPicker","last_synced_at":"2025-04-04T06:31:44.578Z","repository":{"id":26731508,"uuid":"30189077","full_name":"PitPik/tinyColorPicker","owner":"PitPik","description":"Tiny jQuery color picker for mobile and desktop with alpha channel","archived":false,"fork":false,"pushed_at":"2016-08-30T13:31:36.000Z","size":513,"stargazers_count":277,"open_issues_count":21,"forks_count":76,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-02T22:07:09.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.dematte.at/tinyColorPicker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Fatories/LALE","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PitPik.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}},"created_at":"2015-02-02T13:49:47.000Z","updated_at":"2025-03-12T12:29:55.000Z","dependencies_parsed_at":"2022-08-30T20:01:05.273Z","dependency_job_id":null,"html_url":"https://github.com/PitPik/tinyColorPicker","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyColorPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyColorPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyColorPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyColorPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PitPik","download_url":"https://codeload.github.com/PitPik/tinyColorPicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247134496,"owners_count":20889401,"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":[],"created_at":"2024-08-01T14:00:48.303Z","updated_at":"2025-04-04T06:31:44.537Z","avatar_url":"https://github.com/PitPik.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# tinyColorPicker and colors\n\nLooking for mobile first, tiny foot print, fast, scaleable, flexible, pluggable and a rich color model...\u003cbr\u003e\nThis small (5.07KB gZip, 11.39KB minified, no extra HTML, images or css needed) HSB colorpicker is based on a subset of [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from it's big brother [colorPicker](https://github.com/PitPik/colorPicker/) for a precise and rich color model, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins or extend the UI.\n\n##Demo\nSee **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)\n\n\u003cimg src=\"development/screen-shot-all.jpg\" /\u003e\n\nSupports WCAG 2.0 calculations for readability based on opacity levels of multiple layers.\u003cbr\u003e\nSupported color spaces are: rgb, hsv(b), hsl, HEX.\u003cbr\u003e\nCMYK, CMY, Lab and XYZ and more standards are supported if using [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from [github.com/PitPik/colorPicker](https://github.com/PitPik/colorPicker/)\n\n## Usage\n\n```javascript\n\u003cscript type=\"text/javascript\" src=\"jqColorPicker.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    $('.color').colorPicker(/* optinal options */); // that's it\n\u003c/script\u003e\n```\n```jqColorPicker.min.js``` holds all necessary data such as HTML, CSS and images in one file to run tinyColorPicker. So, it is not needed to include anything else than this single file.\u003cbr\u003e\nIf you need to debug things for development, you can also use ```colors.js```, the color calculation module, and ```jqColorPicker.js```, the UI and interaction module seperately.\n```javascript\n\u003cscript type=\"text/javascript\" src=\"colors.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"jqColorPicker.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    $('.color').colorPicker();\n\u003c/script\u003e\n```\n\n## AMD / CommonJS wrapper\ntinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)) in both, the minified version and the single fies (```colors.js``` and ```jqColorPicker.js```).\n\n```javascript\n// example for requirejs configuration\nrequirejs.config({\n    baseUrl: 'scripts',\n    paths: {\n        jquery: 'lib/jquery-2.2.1.min'\n    },\n    shim: {\n        'colorPicker': {\n            deps: [ 'jquery' ],\n            exports: 'jQuery.fn.colorPicker'\n        }\n    }\n});\n\n// then use tinyColorPicker in your module...\n(function (root, factory) {\n    if (typeof define === 'function' \u0026\u0026 define.amd) {\n        define(['jquery', 'jqColorPicker'], function (jQuery) {\n            return factory(root, jQuery);\n        });\n    } else {\n        factory(root, root.jQuery);\n    }\n}(this, function(window, $){\n    $('.color').colorPicker(options);\n}));\n```\n\n## Bower support\ntinyColorPicker can be received via bower:\n\n```javascript\nbower install tinyColorPicker\n```\n\n## jqColorPicker.js\n\n```jqColorPicker.js``` is a jQuery plugin including the UI, CSS and images and uses an instance of Colors (from ```colors.js```) for all the color calculations. It passes the options to that instance, so some values might be the same when inspecting...\n\n```javascript\n$('.color').colorPicker({\n    color: ..., // see Colors below...\n    customBG: '#FFF' // see Colors below...\n    animationSpeed: 150, // toggle animation speed\n    GPU: true, // use transform: translate3d or regular rendereing (top, left)\n    doRender: true | 'selector', // render color and bgColor of input field (on certain elements if selector)\n    opacity: true, // enable / disable alpha slider\n    buildCallback: function($elm) {\n         // 'this': colorPicker instance; // will be the same as in positionCallback() and renderCallback();\n         // $elm: the UI (\u003cdiv class=\"cp-color-picker\"\u003e\u003c/div\u003e)\n    },\n    renderCallback: function($elm, toggled) {\n        // 'this': current colorPicker instance; // instance has all kinds of information about colorPicker such as $UI including dimensions etc...\n        // $elm: the input field or other element that just toggled the colorPicker;\n        // toggle -\u003e 'true': just appeared; 'false': just closed; 'undefined': is rendering\n    },\n    positionCallback: function($elm) {\n        // 'this': current colorPicker instance;\n        // $elm: the input field or other element that just toggled the colorPicker;\n        // optionally...\n        return {top: y, left: x}; // positions colorPicker before appearing\n    },\n    css: '', // String: replaces existing css\n    cssAddon: '', // String: adds css to existing\n    margin: '', // positioning margin (can also be set in cssAddon)\n    scrollResize: true // toggle for repositioning colorPicker on window.resize/scroll\n    gap: 4 // gap to right and bottom edge of view port if repositioned to fit\n    dark: '#222' // default font color if background is light\n    light: '#DDD' // default font color if background is dark\n    preventFocus: false // prevents default on focus of input fields (e.g. no keyboard on mobile)\n    body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change),\n    forceAlpha: // force printing alpha channel (undefined = auto; false = never print alpha),\n    cssPrepend: // makes add CSS being added to the beginning of the \u003chead\u003e instead of to the end\n});\n```\nSee the following section or the demos on how the callbacks work and what you can do with them...\n\n#### Some tips\n\nThe positionCallback can be used to optionally position the colorPicker different from its default; in case you want it to also show above or to the left of the input field etc.\nThe callback will also be called on scroll.\nIf you return an object (```{left: x, top: y}``` to position the colorPicker) then those coordinates will be taken, otherwhise the function just executes (what you need to do: re-append for example) and it takes the internal algorithm to position the color picker. See ./demo/index.js for an example:\n\n```javascript\npositionCallback: function($elm) {\n    var $UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement\n        position = $elm.offset(), // $elm is the current trigger that opened the UI\n        gap = this.color.options.gap, // this.color.options stores all options\n        top = 0,\n        left = 0;\n\n    // $UI.appendTo('#somwhereElse');\n    // do here your calculations with top and left and then...\n    return { // the object will be used as in $('.something').css({...});\n        left: left,\n        top: top\n    }\n}\n```\nThis callback is also good if you need to append your colorPicker to a different container than document.body. This way you can then calculate the coordinates relative to the appended container...\n\n\nThe renderCallback can be used as openCallback and closeCallback:\n```javascript\nrenderCallback: function($elm, toggled) {\n    if (toggled === true) { // simple, lightweight check\n        // ... like an open callback\n    } else if (toggled === false) {\n        // ... like a close callback\n    } else {\n        // rendering...\n    }\n}\n```\nHere you can fire events if necessary or check for a className or data attribute on $elm to see if there is a hint for hiding the opacity slider:\n```javascript\nthis.$UI.find('.cp-alpha').toggle(!$elm.hasClass('no-alpha'));\n```\n\n## colors.js\n\nThis section only shows the options for color.js. They are picked up automatically if set in ```$('.color').colorPicker({/* options */});```\n\n```javascript\nColors({ // all options have a default value...\n    color: 'rgba(204, 82, 37, 0.8)', // initial color (#RGB, RGB, #RRGGBB, RRGGBB, rgb(r, g, b), ...)\n    grey: {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931\n    luminance: {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0\n    valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required\n    customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)\n    convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...\n});\n```\n\n## The color model, the methods and more\n\nAfter initializing Color or ColorPicker you'll get a clean but rhich model of the instance:\n\n```javascript\nmyColors: {\n    colors: { all kinds of color values...  see later},\n    options: { all the options you set or that are set as default... },\n    __proto__: { // all methods Color uses (See https://github.com/PitPik/colorPicker for details)\n        setColor: function(newCol, type, alpha) {},\n        setCustomBackground: function(col) {},\n        saveAsBackground: function() {},\n        // new method: converts current color to HTML-String like: rgba(123, 234, 0, 0.89)\n        // forceAlpha === true / false -\u003e alway / never print alpha, === undefined -\u003e auto\n        toString: function('rgb' || 'hsl' || 'hex' || '' -\u003e 'rgb', forceAlpha) {},\n    }\n}\n```\ncolors.js is a quite handy tool for color calculations/conversion (gray value, contrast and luminance, etc...). It can also calculate layer mixes between background and foreground colors and therefore make calculations about readability (WCAG 2.0 standard).\nIf you need more complex calculations or more color spaces, use the version from https://github.com/PitPik/colorPicker. It supports also cmy, cmyk, XYZ and Lab.\n```javascript\nmyColorPicker: {\n    $trigger: ... // jQuery object of active trigger or null if none active\n    $UI: ... // jQuery object of the colorPicker HTML element\n    color: { // instance of Color inside colorPicker\n        colors: { all kinds of color values... see later},\n        options: { all the options you set or that are set as default... },\n        __proto__: { all methods Color uses ... see above}\n    },\n    __proto__: { // all methods ColorPicker uses\n        render: function() {},\n        toggle: function(openClose) {} // openClose: true = open; false = close\n    }\n}\n```\n\n\n## The color model\n\n```javascript\nHEX: // current color as HEX (upper case, 6 digits)\nrgb: // current RGB color as normalized values (0 - 1)\n    r: // red\n    g: // green\n    b: // blue\nhsv: // current color values in normalized HSV (HSB) model\n    h: // hue\n    s: // saturation\n    v: // value (brightness)\nhsl: // current color values in normalized HSL model\n    h: // hue\n    s: // saturation\n    l: // lightness\nRND: // all above colors in their defined ranges\n    rgb: // current RGB color, rounded between 0 and 255\n        r: // red (0 - 255)\n        g: // green (0 - 255)\n        b: // blue (0 - 255)\n    hsv: // see above\n        h: // hue (0 - 360 degrees)\n        s: // saturation (0 - 100 %)\n        v: // value (brightness) (0 - 100 %)\n    hsl: // see above\n        h: // hue (0 - 360 degrees)\n        s: // saturation (0 - 100 %)\n        l: // lightness (0 - 100 %)\nbackground: // saved (background) color (saveAsBackground(){})\n    rgb: // color in RGB model\n        r: // red\n        g: // green\n        b: // blue\n    RGB: // RGB color, rounded between 0 and 255\n        r: // red (0 - 255)\n        g: // green (0 - 255)\n        b: // blue (0 - 255)\n    alpha: // alpha or opacity value (0 - 1)\n    equivalentGrey: // r = g = b = (0 - 255)\n    rgbaMixBlack: // saved (background) color mixed with solid black color\n        r: // red\n        g: // green\n        b: // blue\n        a: // resulting alpha or opacity value (0 - 1)\n        luminance: // luminance of resulting mix (0 - 1)\n    rgbaMixCustom: // saved (background) color mixed with custom (solid) color\n        r: // red\n        g: // green\n        b: // blue\n        a: // resulting alpha or opacity value (0 - 1)\n        luminance: // luminance of resulting mix (0 - 1)\n    rgbaMixWhite: // saved (background) color mixed with solid white color\n        r: // red\n        g: // green\n        b: // blue\n        a: // resulting alpha or opacity value (0 - 1)\n        luminance: // luminance of resulting mix (0 - 1)\nalpha: // alpha or opacity value (0 - 1) of current color\nequivalentGrey: // r = g = b = (0 - 1)\nHUELuminance: // luminance of hue (in full brightnes and saturation) (0 - 1)\nRGBLuminance: // luminance of the current color\nhueRGB: // rounded integer value of current color in rgb model with full saturation and brightness\n    r: // red (0 - 255)\n    g: // green (0 - 255)\n    b: // blue (0 - 255)\nsaveColor: // '' or 'web smart' or 'web save', if so.\nwebSave: // closest web-save color\n    r: // red (0 - 255)\n    g: // green (0 - 255)\n    b: // blue (0 - 255)\nwebSmart: // closest web-smart color\n    r: // red (0 - 255)\n    g: // green (0 - 255)\n    b: // blue (0 - 255)\nrgbaMixBG: // color mix result: current color above saved (background) color\n    r: // red (0 - 1)\n    g: // green (0 - 1)\n    b: // blue (0 - 1)\n    a: // resulting alpha or opacity value (0 - 1)\n    luminance: // luminance of resulting mix (0 - 1)\nrgbaMixBGMixCustom: // color mix result: current color above saved (background) color above solid custom color\n    r: // red (0 - 1)\n    g: // green (0 - 1)\n    b: // blue (0 - 1)\n    a: // resulting alpha or opacity value (0 - 1)\n    luminance: // luminance of resulting mix (0 - 1)\n    luminanceDelta: // luminance difference between current color and resulting saved-custom mix (0 - 1)\n    hueDelta: // hue difference between current color and resulting saved-custom mix (0 - 1)\n    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)\nrgbaMixBlack: // color mix result: current color above solid black\n    r: // red (0 - 1)\n    g: // green (0 - 1)\n    b: // blue (0 - 1)\n    a: // resulting alpha or opacity value (0 - 1)\n    luminance: // luminance of resulting mix (0 - 1)\n    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)\nrgbaMixWhite: // color mix result: current color above solid white\n    r: // red (0 - 1)\n    g: // green (0 - 1)\n    b: // blue (0 - 1)\n    a: // resulting alpha or opacity value (0 - 1)\n    luminance: // luminance of resulting mix (0 - 1)\n    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPitPik%2FtinyColorPicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPitPik%2FtinyColorPicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPitPik%2FtinyColorPicker/lists"}