Angular.js ngColored Directive

Angular ngColored directive lets you display colors in your templates.


bower install ngColored --save

Add ngcolored module into your Angular application :

    .module('coloredApp', [
    .config(function($routeProvider) {


Getting Started With ngColored

Add the colored directive into the templates :

  <colored color="colorModel" width="125px" height="125px"></colored>

It works with Twitter Bootstrap 3.x by default. You can add a class attribute to the directive to add your own class styles. The ngColored module utilizes the following directive attributes :

  • color (ngModel)
  • width
  • height
  • class


The color attribute is a ngModel inside the parent controller. This allows the directive to have dynamic color changing capability. The color can either be a hex or rgba.

Source code can be found here : [](
For any questions send me a tweet at [@notmilosbejda](