Boston Globe Web Swatches

Color names, HEX, RGBa, and HSLa values.

Table of Contents

Primary Colors
Secondary Colors
Black Spectrum
Gray Spectrum

Primary Colors

Name	HEX	RGBa	HSLa	Notes
Black	`#000000`	`rgba(0, 0, 0, 1)`	`hsla(0, 0%, 0%, 1)`	Article text. Hover state of tease headlines, links, etc.
Tease Black	`#464646`	`rgba(70, 70, 70, 1)`	`hsla(0, 0%, 27%, 1)`	Tease text across the site
Tease Head	`#444444`	`rgba(68, 68, 68, 1)`	`hsla(0, 0%, 27%, 1)`	Non-hover state of tease heads and packaged related story links
Gray	`#777777`	`rgba(119, 119, 119, 1)`	`hsla(0, 0%, 47%, 1)`	Tease timestamps
Medium Gray	`#999999`	`rgba(153, 153, 153, 1)`	`hsla(0, 0%, 60%, 1)`	Photo credits
Lite Gray	`#e2e2df`	`rgba(226, 226, 223, 1)`	`hsla(60, 5%, 88%, 1)`	Border color for beige backgrounds, if it has a border.
Beige	`#f2f2e8`	`rgba(242, 242, 232, 1)`	`hsla(60, 28%, 93%, 1)`	Used for certain background colors across the site.
Deep Red	`#aa0016`	`rgba(170, 0, 22, 1)`	`hsla(352, 100%, 33%, 1)`	All uses of Red that are not My Saved
Bright red (Action)	`#ed1c24`	`rgba(237, 28, 36, 1)`	`hsla(358, 85%, 52%, 1)`	My Saved red. We could possibly use this as an action color (user clicks or something happens)

Secondary Colors

Name	HEX	RGBa	HSLa
Dark Blue	`#173368`	`rgba(23, 51, 104, 1)`	`hsla(219, 64%, 25%, 1)`
Blue	`#234ea0`	`rgba(35, 78, 160, 1)`	`hsla(219, 64%, 38%, 1)`
Dark Orange	`#fb7600`	`rgba(251, 118, 0, 1)`	`hsla(28, 100%, 49%, 1)`
Orange	`#fba500`	`rgba(251, 165, 0, 1)`	`hsla(39, 100%, 49%, 1)`
Dark Green	`#0e500a`	`rgba(14, 80, 10, 1)`	`hsla(117, 78%, 18%, 1)`
Green	`#1b9b14`	`rgba(27, 155, 20, 1)`	`hsla(117, 77%, 34%, 1)`

Black Spectrum

NAME	HEX	RGBa	HSLa
#282526	`#282526`	`rgba(40, 37, 38, 1)`	`hsla(340, 4%, 15%, 1)`
#464646	`#464646`	`rgba(70, 70, 70, 1)`	`hsla(340, 4%, 15%, 1)`
#1d1d1d	`#1d1d1d`	`rgba(29, 29, 29, 1)`	`hsla(0, 0%, 11%, 1)`
#333333	`#333333`	`rgba(51, 51, 51, 1)`	`hsla(0, 0%, 20%, 1)`

Gray Spectrum

Name	HEX	RGBa	HSLa
#464646	`#464646`	`rgba(70, 70, 70, 1)`	`hsla(0, 0%, 27%, 1)`
#444444	`#444444`	`rgba(68, 68, 68, 1)`	`hsla(0, 0%, 27%, 1)`
#777777	`#777777`	`rgba(119, 119, 119, 1)`	`hsla(0, 0%, 47%, 1)`
#979797	`#979797`	`rgba(151, 151, 151, 1)`	`hsla(0, 0%, 59%, 1)`
#999999	`#999999`	`rgba(153, 153, 153, 1)`	`hsla(0, 0%, 60%, 1)`
#bfbfbf	`#bfbfbf`	`rgba(191, 191, 191, 1)`	`hsla(0, 0%, 75%, 1)`
#cccccc	`#cccccc`	`rgba(204, 204, 204, 1)`	`hsla(0, 0%, 80%, 1)`
#dbdbdb	`#dbdbdb`	`rgba(219, 219, 219, 1)`	`hsla(0, 0%, 86%, 1)`
#e2e2df	`#e2e2df`	`rgba(226, 226, 223, 1)`	`hsla(60, 5%, 88%, 1)`
#e5e5e5	`#e5e5e5`	`rgba(229, 229, 229, 1)`	`hsla(0, 0%, 90%, 1)`
#ededed	`#ededed`	`rgba(237, 237, 237, 1)`	`hsla(0, 0%, 93%, 1)`
#eeeeee	`#eeeeee`	`rgba(238, 238, 238, 1)`	`hsla(0, 0%, 93%, 1)`