Overwatch League Colors

Retrieves Overwatch League team colors!

About

This module retrieves the official RGB and hexadecimal color codes for all Overwatch League teams. Each team has a primary color, secondary color, and tertiary color used for their official branding. This is a useful module to use for building visual Overwatch League projects.

Installation

$ npm install owl-colors

Example Usage

// We'll use chalk for displaying color on the console
const chalk = require('chalk');
const { getPrimaryColor, getTeamName } = require('owl-colors');

// Uses the official team abbreviation for 
// Boston Uprising to get the primary hex color
const bostonUprising = 'BOS';
const {hex: uprisingColors} = getPrimaryColor(bostonUprising);

// finds Boston Uprising's official team name
// and displays it on the console
const name = getTeamName(bostonUprising);
console.log(chalk.bgHex(uprisingColors).bold(name));

Results:

Example Usage with Node Canvas

Here's an example images used to generate these banners similar to those found on https://overwatchleague.com during live matches.

Lets recreate the promotional banner for the match between Paris Eternal and Atlanta Reign (logo code omitted):

const { createCanvas, loadImage} = require('canvas');
const { getPrimaryColor, getSecondaryColor } = require('owl-colors');

// We'll initialize our canvas variables here
const canvas = createCanvas(500, 250);
const ctx = canvas.getContext('2d');
let width = 150, height = 150;
let side1 = 20, side2 = 20;

// gets the primary and secondary 
// hex colors for Paris Eternal
const parisPrimary = getPrimaryColor('PAR').hex;
const parisSecondary = getSecondaryColor('PAR').hex;

// same thing for Atlanta Reign
const atlPrimary = getPrimaryColor('ATL').hex;
const atlSecondary = getSecondaryColor('ATL').hex;

// We'll draw our canvas here.
// NOTE: logo code is ommitted here for relevance
ctx.fillStyle = parisPrimary;
ctx.fillRect(0, 0, 250, 250);

ctx.fillStyle = atlPrimary;
ctx.fillRect(250, 0, 250, 250);

// we add our secondary collor
// accents here on the sides of the banner
ctx.fillStyle = parisSecondary;
ctx.fillRect(0, 0, side1, 250);

ctx.fillStyle = atlSecondary;
ctx.fillRect(canvas.width - side2, 0, side2, 250);

Results:

API

getAllColors()

Retrieves all Overwatch League Colors

Returns: Object an Object containing all color data for all Overwatch League teams. All object keys use 3 letter team abbreviation

getPrimaryColor(abbreviatedName)

Retrieves a team's primary color.

Parameter: string an Overwatch League team name abbreviation (uppercase or lowercase)

Returns: Object an Object containing primary color data for a specified Overwatch League Team. All object keys use 3 letter team abbreviation, or undefined if passed an improper team abbreviation.

Example

const { getPrimaryColor } = require('owl-colors');

// Los Angeles Valiant team abbreviation
console.log(getPrimaryColor('VAL'));  

Output

{ hex: '#004438', rgb: [ 0, 68, 56 ] }

getSecondaryColor(abbreviatedName)

Retrieves a team's secondary color.

Parameter: string an Overwatch League team name abbreviation (uppercase or lowercase)

Returns: Object an Object containing secondary color data for a specified Overwatch League Team. All object keys use 3 letter team abbreviation, or undefined if passed an improper team abbreviation.

Example

const { getSecondaryColor } = require('owl-colors');

// Paris Eternal team abbreviation
console.log(getSecondaryColor('PAR'));  

Output

{ hex: '#8D042D', rgb: [ 141, 4, 45 ] }

getTertiaryColor(abbreviatedName)

Retrieves a team's tertiary color.

Parameter: string an Overwatch League team name abbreviation (uppercase or lowercase)

Returns: Object an Object containing tertiary color data for a specified Overwatch League Team. All object keys use 3 letter team abbreviation, or undefined if passed an improper team abbreviation.

Example

const { getTertiaryColor } = require('owl-colors');

// Los Angeles Gladiators team abbreviation
console.log(getTertiaryColor('GLA'));  

Output

{ hex: '#ffffff', rgb: [ 255, 255, 255 ] }

getColors(abbreviatedName)

Retrieves all colors from a specific Overwatch League team.

Parameter: string an Overwatch League team name abbreviation (uppercase or lowercase)

Returns: Object an Object containing all hex and RGB color data for a specified Overwatch League Team. All object keys use 3 letter team abbreviation, or undefined if passed an improper team abbreviation.

Example

const { getColors } = require('owl-colors');

// San Francisco Shock team abbreviation
console.log(getColors('SFS'));  

Output

{ 
  gray: { hex: '#75787B', rgb: [ 117, 120, 123 ] },
  orange: { hex: '#FC4C02', rgb: [ 252, 76, 2 ] },
  gold: { hex: '#CAB64B', rgb: [ 202, 182, 75 ] } 
}

getTeamName(abbreviatedName)

Retrieves a team's full name.

Parameter: string an Overwatch League team name abbreviation (uppercase or lowercase)

Returns: string an Overwatch League team's full name, or undefined if passed an improper team abbreviation.

Example

const { getTeamName } = require('owl-colors');

// London Spitfire team abbreviation
console.log(getTeamName('LDN'));  

Output

London Spitfire

getColorList(abbreviatedName)

Retrieves a list of a team's main branding colors

Parameter: string an Overwatch League team name abbreviation (uppercase or lowercase)

Returns: string[] a list of an Overwatch League team's color names or undefined if passed an improper team abbreviation.

Example

const { getColorList } = require('owl-colors');

// Shanghai Dragons team abbreviation
console.log(getColorList('SHD'));

Output

[ 'red', 'black', 'yellow' ]