Color Util Helpers

This lib contains a variety of very useful color utils

• Color conversion (HEX<->RGB)
• Generate a Color Pallette (from image - eg: Pintrest before image loads)
• Color Extractor Directive (from inline image - eg: Pintrest before image loads)
• Text Color - provides the color to use (you provide light and dark) based on color provided
• Color Lighten Darken - Takes a color and you can darken or lighten
• Generate Random Color - This function generates a random hue value between 0 and 360 degrees, and random saturation and lightness values between 50% and 100%.
• Color Grabber - Directive when applied to a div will get the average color of the provided url of an image and then change the background color.

Installation

npm install color-util-helpers

Demo

Import the ColorUtilHelpersModule

add the selector <app-color-utilities-demo></app-color-utilities-demo>

Color Conversion Service

Converts RGB to HEX or HEX to RGB

Installation

npm install color-util-helpers

Usage

rgbToHex(rgb: number[]): string 

hexToRgb(hex: string): string

Color Pallette Service and Directive

Usage

Because this is a Directive - import the ColorExtractorDirective

define image path

this.colorSelectionService.getColorsFromImage('../assets/sample2.jpg')

Usage

this.colorSelectionService.palette.subscribe(data => this.palette = data)

Template Usage

<div *ngFor="let color of palette">
  <div style="display: flex;">
      <div 
          class="box"
          [style.background-color]="color.color"
      >
      Color
      </div>
      <div 
          class="box"
          [style.background-color]="color.complementaryColor"
      >
      Complementary
      </div>
  </div>
</div>

CSS Style

CSS
  .box {
    width: 100px; 
    height: 100px; 
    border: solid thin black; 
    color: black; 
    margin: 4px; 
    padding: 16px; 
    display: flex; 
    flex-wrap: wrap; 
    align-content: center; 
    justify-content: center;
}

Text Color Service

Provide a color that is used for a background and then provide the lightColor and darkColor The function will return the appropriate color based on the background color provided

Usage

This function takes bgColor and by providing the lightColor and darkColor compares them to the background and returns the color that will best work for the visibility of the background color.

These colors may be represented as RGB or HEX

textColorForBgColor(bgColor: string, lightColor: string, darkColor: string)

This function takes two colors and compares them and returns the darker color. The color may be represented as RGB or HEX

isColorDarker(color1: string, color2: string)

Color Lighten Darken Service

This function takes a color and percentage of lightness/darkness and returns the new color. The amount is a value between 0-1. This function changes the HSL of the color keeping the saturation values.

Example: .5 is 50%.

lighten(color: string, amount: number)

darken(color: string, amount: number)

Generate Random Color Service

This function takes a color '#3498db' and lightens the color by 20% and also darkens the color by 20%.

  const color = '#3498db'; // Your color
  const lighterColor = lighten(color, 0.2); // 20% lighter
  const darkerColor = darken(color, 0.2); // 20% darker

  console.log(lighterColor, darkerColor);

Color Grabber

This Angular Directive when applied to a div will get the average color of the provided url of an image and then change the background color to that color. Any test inside the div will be colored white or black based on the average color of the image that best suites it.

Usage

Because this is a Directive - import the ColorUtilitiesModule In the following example, the mat-card container has the colorGrab directive applied.

The [imageUrl]="image" is the image to grab the color from.

The [light]="'#FFFFFF'" is the light color to use if the average color is dark. The [dark]="'#000000'" is the dark color to use if the average color is light.

The mat-card contaner background color will change to this color

The Text inside this container will also change ether to black or white depending what suites best based on that colors image.

To use in the directive, use the following

image = "https://picsum.photos/id/1/5616/3744"

<mat-card style="margin: 8px;"
  colorGrab [imageUrl]="image" [light]="'rgb(220, 220, 220)'" [dark]="'rgb(47, 79, 79)'"
  class="box"
  >
    <h3>{{ item.author }}</h3>
    <img [src]="image" width="160" height="120" style="object-fit: cover;">
</mat-card>

Paramiter

imageUrl - provide the full URL of the image (png, jpg)

colorGrab [imageUrl]="item.download_url"