{"id":13495572,"url":"https://github.com/scttcper/ngx-color","last_synced_at":"2025-05-14T12:12:05.675Z","repository":{"id":37251786,"uuid":"102819145","full_name":"scttcper/ngx-color","owner":"scttcper","description":"🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter \u0026 more","archived":false,"fork":false,"pushed_at":"2025-02-18T21:37:18.000Z","size":4690,"stargazers_count":439,"open_issues_count":26,"forks_count":57,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-13T03:38:16.498Z","etag":null,"topics":["angular","color-picker","typescript"],"latest_commit_sha":null,"homepage":"https://ngx-color.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scttcper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-09-08T04:54:49.000Z","updated_at":"2025-05-05T18:45:54.000Z","dependencies_parsed_at":"2024-01-16T09:53:57.247Z","dependency_job_id":"8a1f23d4-3aad-422a-8ac9-c7171e6a3c10","html_url":"https://github.com/scttcper/ngx-color","commit_stats":{"total_commits":426,"total_committers":17,"mean_commits":"25.058823529411764","dds":0.460093896713615,"last_synced_commit":"863577b340a2f8bdb2e721f436ae6a723f9a7655"},"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scttcper","download_url":"https://codeload.github.com/scttcper/ngx-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253870808,"owners_count":21976609,"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":["angular","color-picker","typescript"],"created_at":"2024-07-31T19:01:36.071Z","updated_at":"2025-05-14T12:12:05.627Z","avatar_url":"https://github.com/scttcper.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Third Party Components","Table of Contents"],"sub_categories":["Form Controls","Color Libraries"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/scttcper/ngx-color/master/misc/sketch-example.png\" width=\"225\" alt=\"Angular color sketch preview\"\u003e\n  \u003cbr\u003e\n  \u003ch1\u003eAngular Color\u003c/h1\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.org/package/ngx-color\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/ngx-color.svg\" alt=\"npm\"\u003e\n  \u003c/a\u003e \n  \u003ca href=\"https://codecov.io/github/scttcper/ngx-color\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/scttcper/ngx-color.svg\" alt=\"codecov\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nDEMO: https://ngx-color.vercel.app\n\n- [Component API](#component-api)\n  - [Color](#color)\n  - [onChange](#onchange)\n  - [onChangeComplete](#onchangecomplete)\n  - [Individual APIs](#individual-apis)\n    - [Alpha](#alpha)\n    - [Block](#block)\n    - [Chrome](#chrome)\n    - [Circle](#circle)\n    - [Compact](#compact)\n    - [Github](#github)\n    - [Hue](#hue)\n    - [Material](#material)\n    - [Photoshop](#photoshop)\n    - [Sketch](#sketch)\n    - [Slider](#slider)\n    - [Swatches](#swatches)\n    - [Twitter](#twitter)\n    - [Shade](#shade)\n\n## About\n\n- **13 Different Pickers** - Sketch, Photoshop, Chrome, Twitter and many more\n\n- **Make Your Own** - Use the building block components to make your own\n\n- This is a port of [react-color](https://github.com/casesandberg/react-color)\n  by casesandberg\n\n## Getting Started\n\n## Dependencies\n\nLatest version available for each version of Angular\n\n| ngx-color | Angular   |\n| --------- | --------- |\n| 4.1.1     | 8.x       |\n| 5.1.4     | 9.x       |\n| 6.2.0     | 10.x 11.x |\n| 7.3.3     | 12.x 13.x |\n| 8.0.3     | 14.x 15.x |\n| current   | \u003e= 16.x   |\n\n### Install\n\n```sh\nnpm install ngx-color --save\n```\n\n### Include Component\n\n##### import\n\n```ts\nimport { ColorSketchModule } from 'ngx-color/sketch';\n\n@NgModule({\n  imports: [\n    ColorSketchModule, // added to imports\n  ],\n})\nclass YourModule {}\n```\n\n##### use\n\n```html\n\u003ccolor-sketch [color]=\"state\" (onChangeComplete)=\"changeComplete($event)\"\u003e\u003c/color-sketch\u003e\n```\n\n### Others available\n\n```ts\nimport { ColorAlphaModule } from 'ngx-color/alpha'; // \u003ccolor-alpha-picker\u003e\u003c/color-alpha-picker\u003e\nimport { ColorBlockModule } from 'ngx-color/block'; // \u003ccolor-block\u003e\u003c/color-block\u003e\nimport { ColorChromeModule } from 'ngx-color/chrome'; // \u003ccolor-chrome\u003e\u003c/color-chrome\u003e\nimport { ColorCircleModule } from 'ngx-color/circle'; // \u003ccolor-circle\u003e\u003c/color-circle\u003e\nimport { ColorCompactModule } from 'ngx-color/compact'; // \u003ccolor-compact\u003e\u003c/color-compact\u003e\nimport { ColorGithubModule } from 'ngx-color/github'; // \u003ccolor-github\u003e\u003c/color-github\u003e\nimport { ColorHueModule } from 'ngx-color/hue'; // \u003ccolor-hue-picker\u003e\u003c/color-hue-picker\u003e\nimport { ColorMaterialModule } from 'ngx-color/material'; // \u003ccolor-material\u003e\u003c/color-material\u003e\nimport { ColorPhotoshopModule } from 'ngx-color/photoshop'; // \u003ccolor-photoshop\u003e\u003c/color-photoshop\u003e\nimport { ColorSketchModule } from 'ngx-color/sketch'; // \u003ccolor-sketch\u003e\u003c/color-sketch\u003e\nimport { ColorSliderModule } from 'ngx-color/slider'; // \u003ccolor-slider\u003e\u003c/color-slider\u003e\nimport { ColorSwatchesModule } from 'ngx-color/swatches'; // \u003ccolor-swatches\u003e\u003c/color-swatches\u003e\nimport { ColorTwitterModule } from 'ngx-color/twitter'; // \u003ccolor-twitter\u003e\u003c/color-twitter\u003e\nimport { ColorShadeModule } from 'ngx-color/shade'; // \u003ccolor-shade-picker\u003e\u003c/color-shade-picker\u003e\n```\n\n# Component API\n\n## Color\n\nColor controls what color is active on the color picker. You can use this to\ninitialize the color picker with a particular color, or to keep it in sync with\nthe state of a parent component.\n\nColor accepts either a string of a hex color `'#333'` or a object of rgb or hsl\nvalues `{ r: 51, g: 51, b: 51 }` or `{ h: 0, s: 0, l: .10 }`. Both rgb and hsl\nwill also take a `a: 1` value for alpha. You can also use `transparent`.\n\n```html\n\u003ccolor-sketch color=\"#fff\" (onChangeComplete)=\"handleChangeComplete($event)\"\u003e\u003c/color-sketch\u003e\n```\n\nIn this case, the color picker will initialize with the color `#fff`. When the\ncolor is changed, `handleChangeComplete` will fire and set the new color to\nstate.\n\n## onChange\n\nPass a function to call every time the color is changed. Use this to store the\ncolor in the state of a parent component or to make other transformations.\n\nKeep in mind this is called on drag events that can happen quite frequently. If\nyou just need to get the color once use `onChangeComplete`.\n\n```ts\nimport { Component } from '@angular/core';\nimport { ColorEvent } from 'ngx-color';\n\n@Component({\n  selector: 'selector-name',\n  template: ` \u003ccolor-sketch (onChange)=\"handleChange($event)\"\u003e\u003c/color-sketch\u003e `,\n})\nexport class NameComponent {\n  constructor() {}\n\n  handleChange($event: ColorEvent) {\n    console.log($event.color);\n    // color = {\n    //   hex: '#333',\n    //   rgb: {\n    //     r: 51,\n    //     g: 51,\n    //     b: 51,\n    //     a: 1,\n    //   },\n    //   hsl: {\n    //     h: 0,\n    //     s: 0,\n    //     l: .20,\n    //     a: 1,\n    //   },\n    // }\n  }\n}\n```\n\n## onChangeComplete\n\nPass a function to call once a color change is complete.\n\n## Individual APIs\n\nSome pickers have specific APIs that are unique to themselves:\n\n### Alpha\n\n- **width** - String | Number, Pixel value for picker width. Default `316px`\n- **height** - String | Number, Pixel value for picker height. Default `16px`\n- **direction** - String, `horizontal` or `vertical`. Default `horizontal`\n\n### Block\n\n- **width** - string | number, Pixel value for picker width. Default `170px`\n- **colors** - Array of Strings, Color squares to display. Default `['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']`\n- **triangle** - String, Either `hide` or `top`. Default `top`\n- **onSwatchHover** - (Output) An event handler for `onMouseOver` on the\n  `\u003cSwatch\u003e`s within this component. Gives the args `(color, event)`\n\n### Chrome\n\n- **disableAlpha** - Bool, Remove alpha slider and options from picker. Default\n  `false`\n\n### Circle\n\n- **width** - String | number, Pixel value for picker width. Default `252px`\n- **colors** - Array of Strings, Color squares to display. Default `[\"#f44336\", \"#e91e63\", \"#9c27b0\", \"#673ab7\", \"#3f51b5\", \"#2196f3\", \"#03a9f4\", \"#00bcd4\", \"#009688\", \"#4caf50\", \"#8bc34a\", \"#cddc39\", \"#ffeb3b\", \"#ffc107\", \"#ff9800\", \"#ff5722\", \"#795548\", \"#607d8b\"]`\n- **circleSize** - Number, Value for circle size. Default `28`\n- **circleSpacing** - Number, Value for spacing between circles. Default `14`\n- **onSwatchHover** - (Output) An event handler for `onMouseOver` on the\n  `\u003cSwatch\u003e`s within this component. Gives the args `(color, event)`\n\n### Compact\n\n- **colors** - Array of Strings, Color squares to display. Default `['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E']`\n- **onSwatchHover** - (Output) An event handler for `onMouseOver` on the\n  `\u003cSwatch\u003e`s within this component. Gives the args `(color, event)`\n\n### Github\n\n- **width** - string | number, Pixel value for picker width. Default `212px`\n- **colors** - Array of Strings, Color squares to display. Default `['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB']`\n- **triangle** - String, Either `hide`, `top-left` or `top-right`. Default\n  `top-left`\n- **onSwatchHover** - (Output) An event handler for `onMouseOver` on the\n  `\u003cSwatch\u003e`s within this component. Gives the args `(color, event)`\n\n### Hue\n\n- **width** - string | number, Pixel value for picker width. Default `316px`\n- **height** - string | number, Pixel value for picker height. Default `16px`\n- **direction** - String Enum, `horizontal` or `vertical`. Default `horizontal`\n\n### Material\n\nNone\n\n### Photoshop\n\n- **header** - String, Title text. Default `Color Picker`\n- **onAccept** - (Output), Callback for when accept is clicked.\n- **onCancel** - (Output), Callback for when cancel is clicked.\n\n### Sketch\n\n- **disableAlpha** - Bool, Remove alpha slider and options from picker. Default\n  `false`\n- **presetColors** - Array of Strings or Objects, Hex strings for default colors\n  at bottom of picker. Default `['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']`\n  \u003e **presetColors** may also be described as an array of objects with `color`\n  \u003e and `title` properties: `[{ color: '#f00', title: 'red' }]` or a combination\n  \u003e of both\n- **width** - Number, Width of picker. Default `200`\n- **onSwatchHover** - An event handler for `onMouseOver` on the `\u003cSwatch\u003e`s\n  within this component. Gives the args `(color, event)`\n\n### Slider\n\n- **pointer** - React Component, Custom pointer component\n\n### Swatches\n\n- **width** - string | number, Pixel value for picker width. Default `320`\n- **height** - string | number, Pixel value for picker height. Default `240`\n- **colors** - Array of Arrays of Strings, An array of color groups, each with\n  an array of colors\n- **onSwatchHover** - (Output) An event handler for `onMouseOver` on the\n  `\u003cSwatch\u003e`s within this component. Gives the args `(color, event)`\n\n### Twitter\n\n- **width** - string | number, Pixel value for picker width. Default `276px`\n- **colors** - Array of Strings, Color squares to display. Default `['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']`\n- **triangle** - String, Either `hide`, `top-left` or `top-right`. Default\n  `top-left`\n- **onSwatchHover** - (Output) An event handler for `onMouseOver` on the\n  `\u003cSwatch\u003e`s within this component. Gives the args `(color, event)`\n\n### Shade\n\n- **width** - String | Number, Pixel value for picker width. Default `316px`\n- **height** - String | Number, Pixel value for picker height. Default `16px`\n\n---\n\n\u003e GitHub [@scttcper](https://github.com/scttcper) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@scttcper](https://twitter.com/scttcper)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscttcper%2Fngx-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscttcper%2Fngx-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscttcper%2Fngx-color/lists"}