{"id":13808550,"url":"https://github.com/KroneCorylus/ngx-colors","last_synced_at":"2025-05-14T02:32:08.061Z","repository":{"id":36945167,"uuid":"232291547","full_name":"KroneCorylus/ngx-colors","owner":"KroneCorylus","description":"Simple yet elegant Material color picker for Angular","archived":false,"fork":false,"pushed_at":"2024-10-08T11:19:04.000Z","size":7020,"stargazers_count":88,"open_issues_count":20,"forks_count":24,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-14T14:25:35.084Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https:\\\\ngx-colors.web.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/KroneCorylus.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":"2020-01-07T09:37:46.000Z","updated_at":"2024-10-15T03:16:25.000Z","dependencies_parsed_at":"2024-01-08T00:33:00.050Z","dependency_job_id":"665c0544-9a34-4d6f-b9b2-93ab69c8a8e2","html_url":"https://github.com/KroneCorylus/ngx-colors","commit_stats":{"total_commits":276,"total_committers":12,"mean_commits":23.0,"dds":0.4384057971014492,"last_synced_commit":"b86e6d16ee134f8a8a35c937896a371de0098525"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KroneCorylus%2Fngx-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KroneCorylus%2Fngx-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KroneCorylus%2Fngx-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KroneCorylus%2Fngx-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KroneCorylus","download_url":"https://codeload.github.com/KroneCorylus/ngx-colors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225116932,"owners_count":17423312,"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-04T01:01:45.920Z","updated_at":"2024-11-19T00:30:49.926Z","avatar_url":"https://github.com/KroneCorylus.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"![size](https://img.shields.io/bundlephobia/min/ngx-colors?style=for-the-badge)\n![download](https://img.shields.io/npm/dm/ngx-colors?style=for-the-badge)\n\n\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003engx-colors\u003c/h1\u003e\n  \u003cp align=\"center\"\u003engx-colors is a colorpicker component of angular with a material design style, allows users to select a color via text input (hexadecimal, rgba, hsla), choosing a preset color from the palette, or a color picker using the Hue, Lightness, and Alpha sliders.\n  \u003c/p\u003e\n\u003c/p\u003e\n\n## Demo and documentation\n\nhttps://ngx-colors.web.app/\n\n## Preview\n\n![example gif](https://raw.githubusercontent.com/KroneCorylus/ngx-colors/master/projects/ngx-color-examples/src/assets/img/example-gif.gif)\n\n## Installation\n\n#### Compatibility\n\n| Angular | Latest ngx-colors compatible |\n| ------- | ---------------------------- |\n| 15      | Latest                       |\n| 14      | 3.1.4                        |\n| 13      | 3.1.4                        |\n| 12      | 3.0.5                        |\n| 11      | 3.0.5                        |\n| 10      | 3.0.5                        |\n\n#### Npm\n\n```shell\nnpm install ngx-colors\n```\n\n##### Load the ngx-colors module in your app module:\n\n```javascript\nimport { NgxColorsModule } from 'ngx-colors';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    NgxColorsModule\n  ]\n})\n```\n\n## Overview and usage\n\nThis library is composed of two parts:\n\n1. ngx-colors-trigger: This directive can be applied to any html element turning it into a trigger that when clicked will open the color picker\n2. ngx-colors: This component is a premade button that will display the selected color.\n\n##### Use it in your HTML template with ngModel:\n\n```html\n\u003cngx-colors \n  ngx-colors-trigger \n  [(ngModel)]=\"color\"\n\u003e\u003c/ngx-colors\u003e\n```\n\nYou can select just one format:\n\n```html\n\u003cngx-colors \n  ngx-colors-trigger \n  [(ngModel)]=\"color\"\n  [format] = \"'hex'\"\n\u003e\u003c/ngx-colors\u003e\n```\n\nOr you can choise some formats\n\n```html\n\u003cngx-colors \n  ngx-colors-trigger \n  [(ngModel)]=\"color\"\n  [formats]=\"['hex','cmyk']\"\n\u003e\u003c/ngx-colors\u003e\n```\n\n##### Or with Reactive Forms:\n\n```html\n\u003cform class=\"example-form\"\u003e\n  \u003cngx-colors\n    ngx-colors-trigger\n    style=\"display: inline-block; margin:5px;\"\n    [formControl]=\"colorFormControl\"\n  \u003e\u003c/ngx-colors\u003e\n\u003c/form\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKroneCorylus%2Fngx-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKroneCorylus%2Fngx-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKroneCorylus%2Fngx-colors/lists"}