Charts & Graphs

Color palettes and standards for visualizing data with charts and graphs.

Opt-in

Use of the full color palette requires an additional CSS file:

<link rel="stylesheet" href="https://bnsfweb.bnsf.com/gel/releases/4.latest/css/gel-palette.min.css" media="screen">

Categorical Data

The GEL provides a palette for categorical data.

Usage example

Given the color categorical-data-c01:

The .text- class would be .text-categorical-data-c01, giving Hello, world!

The .bg- class would be .bg-categorical-data-c01, giving Hello, world!

Categorical palette order

The categorical data palette should be used in the order defined below in order to maintain good contrast between adjacent colors.

categorical-data-c01
categorical-data-c02
categorical-data-c03
categorical-data-c04
categorical-data-c05
categorical-data-c06
categorical-data-c07
categorical-data-c08

Semantic Data

The GEL provides a palette for semantic data.

Usage example

Given the color semantic-data-success and the intensity 500:

The .text- class would be .text-semantic-data-success-500, giving Hello, world!

The .bg- class would be .bg-semantic-data-success-500, giving Hello, world!

semantic-data-success
semantic-data-success-50
semantic-data-success-100
semantic-data-success-200
semantic-data-success-300
semantic-data-success-400
semantic-data-success-500
semantic-data-warning
semantic-data-warning-50
semantic-data-warning-100
semantic-data-warning-200
semantic-data-warning-300
semantic-data-warning-400
semantic-data-warning-500
semantic-data-danger
semantic-data-danger-50
semantic-data-danger-100
semantic-data-danger-200
semantic-data-danger-300
semantic-data-danger-400
semantic-data-danger-500
semantic-data-neutral
semantic-data-neutral-50
semantic-data-neutral-100
semantic-data-neutral-200
semantic-data-neutral-300
semantic-data-neutral-400
semantic-data-neutral-500

Sequential Data

The GEL provides a palette for sequential data.

Usage example

Given the color sequential-data-s1 and the intensity 500:

The .text- class would be .text-sequential-data-s1-500, giving Hello, world!

The .bg- class would be .bg-sequential-data-s1-500, giving Hello, world!

sequential-data-s1
sequential-data-s1-50
sequential-data-s1-100
sequential-data-s1-200
sequential-data-s1-300
sequential-data-s1-400
sequential-data-s1-500
sequential-data-s2
sequential-data-s2-50
sequential-data-s2-100
sequential-data-s2-200
sequential-data-s2-300
sequential-data-s2-400
sequential-data-s2-500
sequential-data-s3
sequential-data-s3-50
sequential-data-s3-100
sequential-data-s3-200
sequential-data-s3-300
sequential-data-s3-400
sequential-data-s3-500
sequential-data-s4
sequential-data-s4-50
sequential-data-s4-100
sequential-data-s4-200
sequential-data-s4-300
sequential-data-s4-400
sequential-data-s4-500
Third-party Content Disclaimer