38 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
