42 Color palettes

Resources

Please see the chapter on images and contrast for resources.

Updating a palette

When you’re ready to update a color palette that has been verified as being accessible meeting current standards, there are two ways to implement the palette. First, use the Appearance > Theme Options > Global settings to update the palette for the text, background, and header background colors for the textboxes (learning objectives, key takeaways, exercises, and examples). Second, update the remaining elements in Appearance > Custom Styles.

Malala

The CSS below is for the Malala theme that assigns colors, as of 2025. A search-and-replace can update the color palette. The Custom version is the one to use for replace colors and paste into Appearance > Custom Styles. The Complete version is for reference only as it also contains the textbox formatting. Following the theme CSS is a brief overview of the default colors so we know what to search for and what will be affected.

CSS

Custom

.front-matter, .part, .chapter, .back-matter {color: #373d3f;}
.front-matter a, .part a, .chapter a, .back-matter a {color: var(--primary, #b01109);}
.front-matter a:focus, .part a:focus, .chapter a:focus, .back-matter a:focus {color: var(--primary-dark);}
.front-matter a:hover, .part a:hover, .chapter a:hover, .back-matter a:hover {color: var(--primary-dark);}
.front-matter blockquote, .part blockquote, .chapter blockquote, .back-matter blockquote {color: #373d3f;}
.front-matter h1, .part h1, .chapter h1, .back-matter h1 {color: #003180;}
.front-matter h2, .part h2, .chapter h2, .back-matter h2 {color: #003180;}
.front-matter h3, .part h3, .chapter h3, .back-matter h3 {color: #003180;}
.front-matter h4, .part h4, .chapter h4, .back-matter h4 {color: #003180;}
.front-matter h5, .part h5, .chapter h5, .back-matter h5 {color: #003180;}
.front-matter h6, .part h6, .chapter h6, .back-matter h6 {color: #003180;}
.front-matter table, .part table, .chapter table, .back-matter table {color: #373d3f;}
.front-matter table p, .part table p, .chapter table p, .back-matter table p {color: #373d3f;}
p.wp-caption-text {color: #003180;}
.index .ugc, .index .ugc p {color: #373d3f;}
#half-title-page > .title {color: #003180;}
#title-page > .title {color: #003180;}
#title-page > .subtitle {color: #003180;}
#title-page > .author {color: #003180;}
#title-page > .publisher {color: #003180;}
#title-page > .publisher-city {color: #003180;}
.front-matter-title {color: #003180;}
#copyright-page .ugc p {color: #373d3f;}
.dedication p {color: #003180;}
.epigraph p {color: #003180;}
.part-number {color: #003180;}
.part-title {color: #003180;}
.chapter-number, .entry-title span {color: #003180;}
.chapter-title {color: #003180;}
.chapter-subtitle {color: #003180;}
.chapter-author {color: #003180;}
.aphorism {color: #003180;}
.back-matter-title {color: #003180;}
.firstcharacter, .first-character {color: #003180;}
.pullquote, .pullquote-left, .pullquote--left, .pullquote-right, .pullquote--right, .pullquote-outside, .pullquote--outside, .pullquote-inside, .pullquote--inside {color: #003180;}
div.sidebar {background-color: #eee;}
.textbox, .bcc-box {background-color: white; border-color: #003180;}
.textbox.shaded, .bcc-box.shaded {background-color: #f0f6ff;}
.shaded {background-color: #eee;}
div.textbox.shaded {border-color: white;}
figcaption, [data-type="subtitle"], [data-type="author"] {color: #003180;}
dl dt {color: #003180;}
.front-matter table.shaded, .part table.shaded, .chapter table.shaded, .back-matter table.shaded, body#tinymce.wp-editor table.shaded {background-color: #eee;}
.front-matter .wp-caption figcaption, .front-matter .wp-caption .wp-caption-text, .part .wp-caption figcaption, .part .wp-caption .wp-caption-text, .chapter .wp-caption figcaption, .chapter .wp-caption .wp-caption-text, .back-matter .wp-caption figcaption, .back-matter .wp-caption .wp-caption-text {color: #003180;}
section.chapter header:not(.textbox__header), section.front-matter header:not(.textbox__header), section.back-matter header:not(.textbox__header) {border-bottom: 1px solid #003180;}
div.part-title {font-family: "Encode Sans", sans-serif; color: #003180;}
.chapter-title-wrap, .front-matter-title-wrap, .back-matter-title-wrap {border-bottom: 1px solid #003180;}

Complete

.front-matter, .part, .chapter, .back-matter {color: #373d3f;}
.front-matter a, .part a, .chapter a, .back-matter a {color: var(--primary, #b01109);}
.front-matter a:focus, .part a:focus, .chapter a:focus, .back-matter a:focus {color: var(--primary-dark);}
.front-matter a:hover, .part a:hover, .chapter a:hover, .back-matter a:hover {color: var(--primary-dark);}
.front-matter blockquote, .part blockquote, .chapter blockquote, .back-matter blockquote {color: #373d3f;}
.front-matter h1, .part h1, .chapter h1, .back-matter h1 {color: #003180;}
.front-matter h2, .part h2, .chapter h2, .back-matter h2 {color: #003180;}
.front-matter h3, .part h3, .chapter h3, .back-matter h3 {color: #003180;}
.front-matter h4, .part h4, .chapter h4, .back-matter h4 {color: #003180;}
.front-matter h5, .part h5, .chapter h5, .back-matter h5 {color: #003180;}
.front-matter h6, .part h6, .chapter h6, .back-matter h6 {color: #003180;}
.front-matter table, .part table, .chapter table, .back-matter table {color: #373d3f;}
.front-matter table p, .part table p, .chapter table p, .back-matter table p {color: #373d3f;}
p.wp-caption-text {color: #003180;}
.index .ugc, .index .ugc p {color: #373d3f;}
#half-title-page > .title {color: #003180;}
#title-page > .title {color: #003180;}
#title-page > .subtitle {color: #003180;}
#title-page > .author {color: #003180;}
#title-page > .publisher {color: #003180;}
#title-page > .publisher-city {color: #003180;}
.front-matter-title {color: #003180;}
#copyright-page .ugc p {color: #373d3f;}
.dedication p {color: #003180;}
.epigraph p {color: #003180;}
.part-number {color: #003180;}
.part-title {color: #003180;}
.chapter-number, .entry-title span {color: #003180;}
.chapter-title {color: #003180;}
.chapter-subtitle {color: #003180;}
.chapter-author {color: #003180;}
.aphorism {color: #003180;}
.back-matter-title {color: #003180;}
.firstcharacter, .first-character {color: #003180;}
.pullquote, .pullquote-left, .pullquote--left, .pullquote-right, .pullquote--right, .pullquote-outside, .pullquote--outside, .pullquote-inside, .pullquote--inside {color: #003180;}
div.sidebar {background-color: #eee;}
.textbox, .bcc-box {background-color: white; border-color: #003180;}
.textbox.shaded, .bcc-box.shaded {background-color: #f0f6ff;}
.shaded {background-color: #eee;}
div.textbox.shaded {border-color: white;}
figcaption, [data-type="subtitle"], [data-type="author"] {color: #003180;}
dl dt {color: #003180;}
.front-matter table.shaded, .part table.shaded, .chapter table.shaded, .back-matter table.shaded, body#tinymce.wp-editor table.shaded {background-color: #eee;}
.textbox.learning-objectives, .bcc-box.learning-objectives {color: #000; background: #cbd4b6;}
.textbox.learning-objectives h3, .bcc-box.learning-objectives h3 {color: #fff; background: #5a7613;}
.textbox.textbox--learning-objectives, .bcc-box.textbox--learning-objectives {color: #000; background: #cbd4b6;}
.textbox.textbox--learning-objectives .textbox__header, .bcc-box.textbox--learning-objectives .textbox__header {background: #5a7613; color: #fff;}
.textbox.textbox--learning-objectives .textbox__header h1, .textbox.textbox--learning-objectives .textbox__header h2, .textbox.textbox--learning-objectives .textbox__header h3, .textbox.textbox--learning-objectives .textbox__header h4, .textbox.textbox--learning-objectives .textbox__header h5, .textbox.textbox--learning-objectives .textbox__header h6, .bcc-box.textbox--learning-objectives .textbox__header h1, .bcc-box.textbox--learning-objectives .textbox__header h2, .bcc-box.textbox--learning-objectives .textbox__header h3, .bcc-box.textbox--learning-objectives .textbox__header h4, .bcc-box.textbox--learning-objectives .textbox__header h5, .bcc-box.textbox--learning-objectives .textbox__header h6 {color: #fff;}
.textbox.key-takeaways, .bcc-box.key-takeaways {color: #000; background: #e8c1A2;}
.textbox.key-takeaways h3, .bcc-box.key-takeaways h3 {color: #fff; background: #c25700;}
.textbox.textbox--key-takeaways, .bcc-box.textbox--key-takeaways {color: #000; background: #e8c1A2;}
.textbox.textbox--key-takeaways .textbox__header, .bcc-box.textbox--key-takeaways .textbox__header {background: #c25700; color: #fff;}
.textbox.textbox--key-takeaways .textbox__header h1, .textbox.textbox--key-takeaways .textbox__header h2, .textbox.textbox--key-takeaways .textbox__header h3, .textbox.textbox--key-takeaways .textbox__header h4, .textbox.textbox--key-takeaways .textbox__header h5, .textbox.textbox--key-takeaways .textbox__header h6, .bcc-box.textbox--key-takeaways .textbox__header h1, .bcc-box.textbox--key-takeaways .textbox__header h2, .bcc-box.textbox--key-takeaways .textbox__header h3, .bcc-box.textbox--key-takeaways .textbox__header h4, .bcc-box.textbox--key-takeaways .textbox__header h5, .bcc-box.textbox--key-takeaways .textbox__header h6 {color: #fff;}
.textbox.exercises, .bcc-box.exercises {color: #000; background: #cbdde5;}
.textbox.exercises h3, .bcc-box.exercises h3 {color: #fff; background: #0b6396;}
.textbox.textbox--exercises, .bcc-box.textbox--exercises {color: #000; background: #cbdde5;}
.textbox.textbox--exercises .textbox__header, .bcc-box.textbox--exercises .textbox__header {background: #0b6396; color: #fff;}
.textbox.textbox--exercises .textbox__header h1, .textbox.textbox--exercises .textbox__header h2, .textbox.textbox--exercises .textbox__header h3, .textbox.textbox--exercises .textbox__header h4, .textbox.textbox--exercises .textbox__header h5, .textbox.textbox--exercises .textbox__header h6, .bcc-box.textbox--exercises .textbox__header h1, .bcc-box.textbox--exercises .textbox__header h2, .bcc-box.textbox--exercises .textbox__header h3, .bcc-box.textbox--exercises .textbox__header h4, .bcc-box.textbox--exercises .textbox__header h5, .bcc-box.textbox--exercises .textbox__header h6 {color: #fff;}
.textbox.examples, .bcc-box.examples {color: #000; background: #c0bdcd;}
.textbox.examples h3, .bcc-box.examples h3 {color: #fff; background: #4f446d;}
.textbox.textbox--examples, .bcc-box.textbox--examples {color: #000; background: #c0bdcd;}
.textbox.textbox--examples .textbox__header, .bcc-box.textbox--examples .textbox__header {background: #4f446d; color: #fff;}
.textbox.textbox--examples .textbox__header h1, .textbox.textbox--examples .textbox__header h2, .textbox.textbox--examples .textbox__header h3, .textbox.textbox--examples .textbox__header h4, .textbox.textbox--examples .textbox__header h5, .textbox.textbox--examples .textbox__header h6, .bcc-box.textbox--examples .textbox__header h1, .bcc-box.textbox--examples .textbox__header h2, .bcc-box.textbox--examples .textbox__header h3, .bcc-box.textbox--examples .textbox__header h4, .bcc-box.textbox--examples .textbox__header h5, .bcc-box.textbox--examples .textbox__header h6 {color: #fff;}
.bcc-highlight {color: #000; background: #cbd4b6;}
.bcc-highlight h3 {color: #fff; background: #5a7613;}
.bcc-success {color: #000; background: #e8c1A2;}
.bcc-success h3 {color: #fff; background: #c25700;}
.bcc-info {color: #000; background: #cbdde5;}
.bcc-info h3 {color: #fff; background: #0b6396;}
.front-matter .wp-caption figcaption, .front-matter .wp-caption .wp-caption-text, .part .wp-caption figcaption, .part .wp-caption .wp-caption-text, .chapter .wp-caption figcaption, .chapter .wp-caption .wp-caption-text, .back-matter .wp-caption figcaption, .back-matter .wp-caption .wp-caption-text {color: #003180;}
section.chapter header:not(.textbox__header), section.front-matter header:not(.textbox__header), section.back-matter header:not(.textbox__header) {border-bottom: 1px solid #003180;}
div.part-title {font-family: "Encode Sans", sans-serif; color: #003180;}
.chapter-title-wrap, .front-matter-title-wrap, .back-matter-title-wrap {border-bottom: 1px solid #003180;}

Overview

dark gray (paragraph, blockquote, table)
#373d3f

dark blue (headings, titles)
#003180

black, red (links)
var(--primary, #b01109)

orange red (a:focus and hover)
var(--primary-dark)

cream (sidebar, shaded, shaded table)
#eee

very light blue (shaded textbox)
#f0f6ff

Update below in Theme Options / Global
black (textbox titles, body text - replace manually)
#000

white (textbox titles, body text - replace manually)
#fff

very light green (learning objectives background)
#cbd4b6

dark green (learning objectives header background)
#5a7613

peach (key takeaways background)
#e8c1A2

orange (key takeaways header background)
#c25700

light blue (exercises background)
#cbdde5

blue (exercises header background)
#0b6396

light lavendar (examples background)
#c0bdcd

lavendar (examples header background)
#4f446d