https://github.com/KroneCorylus/ngx-colors

Simple yet elegant Material color picker for Angular
https://github.com/KroneCorylus/ngx-colors

Last synced: 24 days ago
JSON representation

Simple yet elegant Material color picker for Angular

• Host: GitHub
• URL: https://github.com/KroneCorylus/ngx-colors
• Owner: KroneCorylus
• License: mit
• Created: 2020-01-07T09:37:46.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-08T11:19:04.000Z (2 months ago)
• Last Synced: 2024-11-14T14:25:35.084Z (29 days ago)
• Language: TypeScript
• Homepage: https:\\ngx-colors.web.app
• Size: 6.69 MB
• Stars: 88
• Watchers: 3
• Forks: 24
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-colors - Simple yet elegant Material color picker. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-colors - Simple yet elegant Material color picker. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-colors - Simple yet elegant Material color picker. (Table of contents / Third Party Components)

README

        
![size](https://img.shields.io/bundlephobia/min/ngx-colors?style=for-the-badge)

![download](https://img.shields.io/npm/dm/ngx-colors?style=for-the-badge)



  
ngx-colors

  
ngx-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.

  


## Demo and documentation

https://ngx-colors.web.app/

## Preview

![example gif](https://raw.githubusercontent.com/KroneCorylus/ngx-colors/master/projects/ngx-color-examples/src/assets/img/example-gif.gif)

## Installation

#### Compatibility

| Angular | Latest ngx-colors compatible |

| ------- | ---------------------------- |

| 15      | Latest                       |

| 14      | 3.1.4                        |

| 13      | 3.1.4                        |

| 12      | 3.0.5                        |

| 11      | 3.0.5                        |

| 10      | 3.0.5                        |

#### Npm

```shell

npm install ngx-colors

```

##### Load the ngx-colors module in your app module:

```javascript

import { NgxColorsModule } from 'ngx-colors';

@NgModule({

  ...

  imports: [

    ...

    NgxColorsModule

  ]

})

```

## Overview and usage

This library is composed of two parts:

1. 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

2. ngx-colors: This component is a premade button that will display the selected color.

##### Use it in your HTML template with ngModel:

```html

```

You can select just one format:

```html

```

Or you can choise some formats

```html

```

##### Or with Reactive Forms:

```html

  

```