ng-bootstrap

Font-color

bsFontColor returns a readable foreground color (black or white) for a given background — perfect for chips, badges, and other dynamically-coloured surfaces.

Basic usage

Hello world
  
    
      
        <div [style.background]="background" [style.color]="background | bsFontColor">
        
    
      
          Readable foreground
        
    
      
        </div>
        
    

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { BsFontColorPipe } from '@mintplayer/ng-bootstrap/font-color';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-font-color-demo',
        
    
      
          templateUrl: './my-font-color-demo.component.html',
        
    
      
          imports: [BsFontColorPipe],
        
    
      
        })
        
    
      
        export class MyFontColorDemoComponent {
        
    
      
          protected background = '#360984';
        
    
      
        }