Gathering detailed insights and metrics for ngx-color
Installations
npm install ngx-colorDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
20.1.0
NPM Version
9.6.4
Score
95.4
Supply Chain
97.8
Quality
75.7
Maintenance
100
Vulnerability
98.9
License
Releases
57
Contributors
13
Unable to fetch Contributors
Languages
4
TypeScript
HTML
JavaScript
CSS
TypeScript (92.48%)
HTML (6.1%)
JavaScript (0.76%)
CSS (0.66%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
6,705,044
Last Day
1,704
Last Week
50,369
Last Month
203,299
Last Year
2,304,385
GitHub Statistics
MIT License
437 Stars
431 Commits
56 Forks
5 Watchers
1 Branches
13 Contributors
Updated on Dec 24, 2024
Bundle Size
59.91 kB
Minified
13.50 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
9.0.0
Package Id
ngx-color@9.0.0
Unpacked Size
1.05 MB
Size
196.06 kB
File Count
177
NPM Version
9.6.4
Node Version
20.1.0
Published on
May 15, 2023
Total Downloads
Cumulative downloads
Total Downloads
6,705,044
Last Day
30.9%
1,704
Compared to previous day
Last Week
4.2%
50,369
Compared to previous week
Last Month
31.9%
203,299
Compared to previous month
Last Year
27.8%
2,304,385
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
2
Angular Color
DEMO: https://ngx-color.vercel.app
About
-
13 Different Pickers - Sketch, Photoshop, Chrome, Twitter and many more
-
Make Your Own - Use the building block components to make your own
-
This is a port of react-color by casesandberg
Getting Started
Dependencies
Latest version available for each version of Angular
| ngx-color | Angular |
|---|---|
| 4.1.1 | 8.x |
| 5.1.4 | 9.x |
| 6.2.0 | 10.x 11.x |
| 7.3.3 | 12.x 13.x |
| 8.0.3 | 14.x 15.x |
| current | >= 16.x |
Install
1npm install ngx-color --save
Include Component
import
1import { ColorSketchModule } from 'ngx-color/sketch'; 2 3@NgModule({ 4 imports: [ 5 ColorSketchModule, // added to imports 6 ], 7}) 8class YourModule {}
use
1<color-sketch [color]="state" (onChangeComplete)="changeComplete($event)"></color-sketch>
Others available
1import { ColorAlphaModule } from 'ngx-color/alpha'; // <color-alpha-picker></color-alpha-picker> 2import { ColorBlockModule } from 'ngx-color/block'; // <color-block></color-block> 3import { ColorChromeModule } from 'ngx-color/chrome'; // <color-chrome></color-chrome> 4import { ColorCircleModule } from 'ngx-color/circle'; // <color-circle></color-circle> 5import { ColorCompactModule } from 'ngx-color/compact'; // <color-compact></color-compact> 6import { ColorGithubModule } from 'ngx-color/github'; // <color-github></color-github> 7import { ColorHueModule } from 'ngx-color/hue'; // <color-hue-picker></color-hue-picker> 8import { ColorMaterialModule } from 'ngx-color/material'; // <color-material></color-material> 9import { ColorPhotoshopModule } from 'ngx-color/photoshop'; // <color-photoshop></color-photoshop> 10import { ColorSketchModule } from 'ngx-color/sketch'; // <color-sketch></color-sketch> 11import { ColorSliderModule } from 'ngx-color/slider'; // <color-slider></color-slider> 12import { ColorSwatchesModule } from 'ngx-color/swatches'; // <color-swatches></color-swatches> 13import { ColorTwitterModule } from 'ngx-color/twitter'; // <color-twitter></color-twitter> 14import { ColorShadeModule } from 'ngx-color/shade'; // <color-shade-picker></color-shade-picker>
Component API
Color
Color controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component.
Color accepts either a string of a hex color '#333' or a object of rgb or hsl
values { r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }. Both rgb and hsl
will also take a a: 1 value for alpha. You can also use transparent.
1<color-sketch color="#fff" (onChangeComplete)="handleChangeComplete($event)"></color-sketch>
In this case, the color picker will initialize with the color #fff. When the
color is changed, handleChangeComplete will fire and set the new color to
state.
onChange
Pass a function to call every time the color is changed. Use this to store the color in the state of a parent component or to make other transformations.
Keep in mind this is called on drag events that can happen quite frequently. If
you just need to get the color once use onChangeComplete.
1import { Component } from '@angular/core'; 2import { ColorEvent } from 'ngx-color'; 3 4@Component({ 5 selector: 'selector-name', 6 template: ` <color-sketch (onChange)="handleChange($event)"></color-sketch> `, 7}) 8export class NameComponent { 9 constructor() {} 10 11 handleChange($event: ColorEvent) { 12 console.log($event.color); 13 // color = { 14 // hex: '#333', 15 // rgb: { 16 // r: 51, 17 // g: 51, 18 // b: 51, 19 // a: 1, 20 // }, 21 // hsl: { 22 // h: 0, 23 // s: 0, 24 // l: .20, 25 // a: 1, 26 // }, 27 // } 28 } 29}
onChangeComplete
Pass a function to call once a color change is complete.
Individual APIs
Some pickers have specific APIs that are unique to themselves:
Alpha
- width - String | Number, Pixel value for picker width. Default
316px - height - String | Number, Pixel value for picker height. Default
16px - direction - String,
horizontalorvertical. Defaulthorizontal
Block
- width - string | number, Pixel value for picker width. Default
170px - colors - Array of Strings, Color squares to display. Default
['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'] - triangle - String, Either
hideortop. Defaulttop - onSwatchHover - (Output) An event handler for
onMouseOveron the<Swatch>s within this component. Gives the args(color, event)
Chrome
- disableAlpha - Bool, Remove alpha slider and options from picker. Default
false
Circle
- width - String | number, Pixel value for picker width. Default
252px - 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"] - circleSize - Number, Value for circle size. Default
28 - circleSpacing - Number, Value for spacing between circles. Default
14 - onSwatchHover - (Output) An event handler for
onMouseOveron the<Swatch>s within this component. Gives the args(color, event)
Compact
- 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'] - onSwatchHover - (Output) An event handler for
onMouseOveron the<Swatch>s within this component. Gives the args(color, event)
Github
- width - string | number, Pixel value for picker width. Default
212px - 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'] - triangle - String, Either
hide,top-leftortop-right. Defaulttop-left - onSwatchHover - (Output) An event handler for
onMouseOveron the<Swatch>s within this component. Gives the args(color, event)
Hue
- width - string | number, Pixel value for picker width. Default
316px - height - string | number, Pixel value for picker height. Default
16px - direction - String Enum,
horizontalorvertical. Defaulthorizontal
Material
None
Photoshop
- header - String, Title text. Default
Color Picker - onAccept - (Output), Callback for when accept is clicked.
- onCancel - (Output), Callback for when cancel is clicked.
Sketch
- disableAlpha - Bool, Remove alpha slider and options from picker. Default
false - presetColors - Array of Strings or Objects, Hex strings for default colors
at bottom of picker. Default
['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']presetColors may also be described as an array of objects with
colorandtitleproperties:[{ color: '#f00', title: 'red' }]or a combination of both - width - Number, Width of picker. Default
200 - onSwatchHover - An event handler for
onMouseOveron the<Swatch>s within this component. Gives the args(color, event)
Slider
- pointer - React Component, Custom pointer component
Swatches
- width - string | number, Pixel value for picker width. Default
320 - height - string | number, Pixel value for picker height. Default
240 - colors - Array of Arrays of Strings, An array of color groups, each with an array of colors
- onSwatchHover - (Output) An event handler for
onMouseOveron the<Swatch>s within this component. Gives the args(color, event)
- width - string | number, Pixel value for picker width. Default
276px - colors - Array of Strings, Color squares to display. Default
['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'] - triangle - String, Either
hide,top-leftortop-right. Defaulttop-left - onSwatchHover - (Output) An event handler for
onMouseOveron the<Swatch>s within this component. Gives the args(color, event)
Shade
- width - String | Number, Pixel value for picker width. Default
316px - height - String | Number, Pixel value for picker height. Default
16px
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
dependency not pinned by hash detected -- score normalized to 5
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/scttcper/ngx-color/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/scttcper/ngx-color/ci.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/scttcper/ngx-color/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/scttcper/ngx-color/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/scttcper/ngx-color/ci.yml/master?enable=pin
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 2 out of 2 npmCommand dependencies pinned
Reason
Found 11/28 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 18 are checked with a SAST tool
Reason
38 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
3.1
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More