Press "Enter" to skip to content

An Image Color Picker Component Built-in Angular

Image color picker is a simple component to choose the specific color from the image. Use image-color-picker to specify a color and get the HTML color code for the selected pixel. Also, you can get a preview of the selected pixel, HEX value, and RGBA value.

angular color picker stackblitz, angular material color picker, angular color type, create a color picker component in angular, html color picker code javascript, typescript color picker


1. Select a photo/Image

Select the image by clicking “Choose File”

2. Choose a color

Click anywhere on the image and you will get the pixel color

3. Preview

By clicking on the image, you can see the current pixel color in the preview box

4. Copy color code

By clicking on the image you will get RGBA and HEX values in the text boxes, you can copy any color code and use it in your app

How to make use of it:

1. The method below will give HEX and RGBA values.


2. outputColor is the name of the output event you used.

<app-imgcol (outputColor)="getcolval($event)"></app-imgcol>

Image Color Picker For Angular Plugin/Github, primeng color picker stackblitz

See Demo And Download

Official Website(ERS-HCL): Click Here

This superior jQuery/javascript plugin is developed by ERS-HCL. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.