ngx-string-to-css-color

An angular 2 library that lets you obtain css colors (hexadecimal code) from strings of text using hash functions. Different text inputs will give you different colors, which makes it a great tool to visualize different tags or text strings. It relies on the javascript library string-to-hex-code-color. Here is an example of what you can do:

Bug-reports or feature request as well as any other kind of feedback is highly welcome!

Check the live demo here!!

To install the package just use:

npm install ngx-string-to-css-color -S

And add it as a dependency to your main module

import { NgxStringToCssColorModule} from "ngx-string-to-css-color";
 
@NgModule({
  imports: [
    NgxStringToCssColorModule,
  ],
})
export class AppModule { }
 

Using the library is easy. You can use the service StringToColorService or the custom tags with the angular selector tag-with-background-from-text.

Obtain an string with StringToColorService

If you inject the service

import { StringToColorService} from 'ngx-string-to-css-color';
...
constructor (public stringToColorService : StringToColorService) {}
 

you will see that it transforms any string into a css color that you can later use in your code, For instance

const color = this.stringToColorService.stringToColor("sample test");
console.log(color);

gives you

#4c52f6

which is

You can change the shade by adding a second parameter:

const color = this.stringToColorService.stringToColor("sample test",'-0.2');
console.log(color);

obtaining the darker color

#3d42c5

If you change the input text, your the retrieved color will change, for instance this.stringToColorService.stringToColor("sample test22"); will give you ´´#c0868f´´ which is

Use the custom tag tag-with-background-from-text

The component tag-with-background-from-text can be used to obtain a chip tag that assings its background color from the text inside

<tag-with-background-from-text [text]="'sample test'"></tag-with-background-from-text>

you can change the shade using also the directive applyShade="-0.2".

<tag-with-background-from-text [text]="'sample test'" applyShade="-0.2"></tag-with-background-from-text>```

More examples