ColorMode API — milsymbol Color System Reference

milsymbol’s color system is built around ColorMode objects — plain objects that map each tactical affiliation (Civilian, Friend, Hostile, Neutral, Unknown, Suspect) to a CSS color string. When a symbol is rendered, milsymbol looks up the correct color for its affiliation from the active color mode. Nine color modes are registered automatically at startup (Light, Medium, Dark, FrameColor, IconColor, Black, White, OffWhite, None), and you can register your own with ms.setColorMode() or pass a ColorMode object directly to a symbol’s colorMode option.

ms.ColorMode()

Creates a new ColorMode object with colors for each tactical affiliation.

function ColorMode(
  civilian: string,
  friend: string,
  hostile: string,
  neutral: string,
  unknown: string,
  suspect: string
): ColorMode;

civilian

string

required

CSS color value applied to Civilian-affiliated symbols.

friend

string

required

CSS color value applied to Friend-affiliated symbols.

hostile

string

required

CSS color value applied to Hostile-affiliated symbols.

neutral

string

required

CSS color value applied to Neutral-affiliated symbols.

unknown

string

required

CSS color value applied to Unknown-affiliated symbols.

suspect

string

required

CSS color value applied to Suspect-affiliated symbols (used in MIL-STD-2525E).

Returns a ColorMode object:

type ColorMode = {
  Civilian: string;
  Friend: string;
  Hostile: string;
  Neutral: string;
  Unknown: string;
  Suspect: string;
};

Example — creating a custom neon color mode

const neonMode = ms.ColorMode(
  "rgb(255, 0, 255)",   // Civilian — magenta
  "rgb(0, 255, 128)",   // Friend — neon green
  "rgb(255, 60, 60)",   // Hostile — bright red
  "rgb(0, 230, 230)",   // Neutral — cyan
  "rgb(255, 220, 0)",   // Unknown — yellow
  "rgb(255, 140, 0)"    // Suspect — orange
);

// Pass directly to a symbol
const symbol = new ms.Symbol("SFG-UCI----D", {
  size: 60,
  colorMode: neonMode
});

ms.setColorMode()

Registers a ColorMode under a name so it can be retrieved later by string. If a mode with the given name already exists it is overwritten.

function setColorMode(name: string, colormode: ColorMode): ColorMode;

name

string

required

The name to register the color mode under (e.g. "Neon", "Dark").

colormode

ColorMode

required

The ColorMode object returned by ms.ColorMode().

Returns the registered ColorMode object.

Example

const neonMode = ms.ColorMode(
  "rgb(255, 0, 255)",
  "rgb(0, 255, 128)",
  "rgb(255, 60, 60)",
  "rgb(0, 230, 230)",
  "rgb(255, 220, 0)",
  "rgb(255, 140, 0)"
);

ms.setColorMode("Neon", neonMode);

// Now you can reference it by name in symbol options
const symbol = new ms.Symbol("SFG-UCI----D", {
  size: 60,
  colorMode: "Neon"
});

ms.getColorMode()

Retrieves a ColorMode that was previously registered with ms.setColorMode(). All nine built-in modes (see table below) are available immediately after import.

function getColorMode(mode: string): ColorMode;

mode

string

required

The name of a color mode registered with ms.setColorMode(). Built-in names: "Light", "Medium", "Dark", "FrameColor", "IconColor", "Black", "White", "OffWhite", "None".

Returns the corresponding ColorMode object.

Example

const lightMode = ms.getColorMode("Light");
console.log(lightMode.Friend);  // "rgb(128,224,255)"

// Use an existing mode as the basis for a custom one
const myMode = ms.ColorMode(
  lightMode.Civilian,
  "rgb(0, 100, 255)",   // override Friend only
  lightMode.Hostile,
  lightMode.Neutral,
  lightMode.Unknown,
  lightMode.Suspect
);
ms.setColorMode("CustomBlueFriend", myMode);

Built-in color modes

Nine color modes are registered automatically when milsymbol is loaded.

Name	Purpose
Light	Light pastel fill colors — the default `colorMode` for new symbols.
Medium	Saturated mid-tone fill colors.
Dark	Dark fill colors, useful on light map backgrounds.
FrameColor	Full-saturation frame colors for use with unfilled (`fill: false`) symbols.
IconColor	Full-saturation icon colors for unfilled and unframed symbols.
Black	All affiliations render as `"black"`.
White	All affiliations render as `"white"`.
OffWhite	All affiliations render as `rgb(239, 239, 239)` — used internally for white icon parts.
None	All affiliations are `false` (transparent / no color).

Affiliation color values

Show Light

Affiliation	Color
Civilian	`rgb(255,161,255)`
Friend	`rgb(128,224,255)`
Hostile	`rgb(255,128,128)`
Neutral	`rgb(170,255,170)`
Unknown	`rgb(255,255,128)`
Suspect	`rgb(255,229,153)`

Show Medium

Affiliation	Color
Civilian	`rgb(128,0,128)`
Friend	`rgb(0,168,220)`
Hostile	`rgb(255,48,49)`
Neutral	`rgb(0,226,110)`
Unknown	`rgb(255,255,0)`
Suspect	`rgb(255,217,107)`

Show Dark

Affiliation	Color
Civilian	`rgb(80,0,80)`
Friend	`rgb(0,107,140)`
Hostile	`rgb(200,0,0)`
Neutral	`rgb(0,160,0)`
Unknown	`rgb(225,220,0)`
Suspect	`rgb(255,188,1)`

Show FrameColor

Affiliation	Color
Civilian	`rgb(255,0,255)`
Friend	`rgb(0,255,255)`
Hostile	`rgb(255,0,0)`
Neutral	`rgb(0,255,0)`
Unknown	`rgb(255,255,0)`
Suspect	`rgb(255,188,1)`

Show IconColor

Affiliation	Color
Civilian	`rgb(255,0,255)`
Friend	`rgb(0,255,255)`
Hostile	`rgb(255,0,0)`
Neutral	`rgb(0,255,0)`
Unknown	`rgb(255,255,0)`
Suspect	`rgb(255,188,1)`

Show Black / White / OffWhite / None

Name	All affiliations
Black	`"black"`
White	`"white"`
OffWhite	`rgb(239,239,239)`
None	`false` (transparent)

ms.BBox()

Creates a bounding box object used throughout milsymbol to describe the spatial extent of drawn elements. When creating custom symbol parts or icon extensions you will need to construct and return a BBox to inform milsymbol how much space your additions occupy.

type BBoxConstructor = {
  new (box?: Partial<Box>): BBoxObject;
};

interface Box {
  x1: number;  // Left coordinate
  y1: number;  // Top coordinate
  x2: number;  // Right coordinate
  y2: number;  // Bottom coordinate
}

interface BBoxObject extends Box {
  width(): number;
  height(): number;
  merge(box: Box): this;
}

number

Left coordinate of the bounding box. Defaults to 100.

number

Top coordinate of the bounding box. Defaults to 100.

number

Right coordinate of the bounding box. Defaults to 100.

number

Bottom coordinate of the bounding box. Defaults to 100.

Returns a BBoxObject with x1, y1, x2, y2 properties and the following methods:

Method	Description
`width()`	Returns `x2 - x1`.
`height()`	Returns `y2 - y1`.
`merge(box)`	Expands this box to encompass `box` as well; returns `this`.

milsymbol’s symbol octagon has its origin at (100, 100) with a width and height of 100. When building custom draw instructions, place geometry relative to that coordinate system.

Example

// Full bounding box covering the symbol area
const bbox = new ms.BBox({ x1: 0, y1: 0, x2: 200, y2: 200 });

console.log(bbox.width());   // 200
console.log(bbox.height());  // 200

// Merge with a second box (e.g. from a text label above the icon)
const labelBbox = new ms.BBox({ x1: 50, y1: -40, x2: 150, y2: 0 });
bbox.merge(labelBbox);

console.log(bbox.y1);  // -40  — expanded upward to include the label

Symbol

Global Functions

ColorMode API — milsymbol Color System Reference

ms.ColorMode()

Example — creating a custom neon color mode

ms.setColorMode()

Example

ms.getColorMode()

Example

Built-in color modes

Affiliation color values

ms.BBox()

Example

Build docs developers (and LLMs) love

Symbol

Global Functions

Documentation Index

​ms.ColorMode()

​Example — creating a custom neon color mode

​ms.setColorMode()

​Example

​ms.getColorMode()

​Example

​Built-in color modes

​Affiliation color values

​ms.BBox()

​Example

Build docs developers (and LLMs) love

ms.ColorMode()

Example — creating a custom neon color mode

ms.setColorMode()

Example

ms.getColorMode()

Example

Built-in color modes

Affiliation color values

ms.BBox()

Example