\n\n \n \n \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 | >= 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\n```\n\n### Others available\n\n```ts\nimport { ColorAlphaModule } from 'ngx-color/alpha'; // \nimport { ColorBlockModule } from 'ngx-color/block'; // \nimport { ColorChromeModule } from 'ngx-color/chrome'; // \nimport { ColorCircleModule } from 'ngx-color/circle'; // \nimport { ColorCompactModule } from 'ngx-color/compact'; // \nimport { ColorGithubModule } from 'ngx-color/github'; // \nimport { ColorHueModule } from 'ngx-color/hue'; // \nimport { ColorMaterialModule } from 'ngx-color/material'; // \nimport { ColorPhotoshopModule } from 'ngx-color/photoshop'; // \nimport { ColorSketchModule } from 'ngx-color/sketch'; // \nimport { ColorSliderModule } from 'ngx-color/slider'; // \nimport { ColorSwatchesModule } from 'ngx-color/swatches'; // \nimport { ColorTwitterModule } from 'ngx-color/twitter'; // \nimport { ColorShadeModule } from 'ngx-color/shade'; // \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\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: ` `,\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 ``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 ``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 ``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 ``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 > **presetColors** may also be described as an array of objects with `color`\n > and `title` properties: `[{ color: '#f00', title: 'red' }]` or a combination\n > of both\n- **width** - Number, Width of picker. Default `200`\n- **onSwatchHover** - An event handler for `onMouseOver` on the ``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 ``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 ``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> GitHub [@scttcper](https://github.com/scttcper) · \n> Twitter [@scttcper](https://twitter.com/scttcper)\n","readmeFilename":"README.md"}
![\"Angular](\"https://raw.githubusercontent.com/scttcper/ngx-color/master/misc/sketch-example.png\")
\n ![\"npm\"](\"https://badge.fury.io/js/ngx-color.svg\"){kind=icon}
\n \n \n ![\"codecov\"](\"https://img.shields.io/codecov/c/github/scttcper/ngx-color.svg\")
\n \n