Is there a way to prevent Headings 5 and 6 color from being lighter?
Asked by Marcel Wilson:

I changed the Confluence 'Heading Text' color to fit with our company color scheme and found that Heading 5 and Heading 6 are always shades lighter from the original color. This isn't obvious when the color is set to all black (#000000), but VERY apparent when using various colors.

As you can see, this is very hard to read when the color is too light.

![ugly.png](/t5/image/serverpage/image-id/1813i9751C45B8D5AE854/image-size/large?v=v2&px=999 "ugly.png")

**Is there any way to prevent the last two headings from being lighter than the original color?**

![black.png](/t5/image/serverpage/image-id/1804iCBDE83C955C028F5/image-size/large?v=v2&px=999 "black.png")![blue.png](/t5/image/serverpage/image-id/1806i1E5BEB8A68C42032/image-size/large?v=v2&px=999 "blue.png")![dark_blue.png](/t5/image/serverpage/image-id/1805iF7EF819D74A841B6/image-size/large?v=v2&px=999 "dark_blue.png")

![green.png](/t5/image/serverpage/image-id/1807i2C231073C3559DD7/image-size/large?v=v2&px=999 "green.png")![grey.png](/t5/image/serverpage/image-id/1808i6EC93FF32860564C/image-size/large?v=v2&px=999 "grey.png")![light_blue.png](/t5/image/serverpage/image-id/1809i8CD40F01AC0B222B/image-size/large?v=v2&px=999 "light_blue.png")

![light_green.png](/t5/image/serverpage/image-id/1810i54A03F37046CA6E2/image-size/large?v=v2&px=999 "light_green.png")![orange.png](/t5/image/serverpage/image-id/1811iE393B0E43DFE6872/image-size/large?v=v2&px=999 "orange.png")![red.png](/t5/image/serverpage/image-id/1812iCC4B62707B8AD44B/image-size/large?v=v2&px=999 "red.png")


Answers:
author: AnnWorley
body: You can use CSS to "hard-code" the darker color. I made **heading 6** dark red by using this in the space stylesheet:

```
.wiki-content h1,.wiki-content h2,.wiki-content h3,.wiki-content h4,.wiki-content h5,.wiki-content h6 {color: red;}
```

Please see [CSS color Property](https://www.w3schools.com/cssref/pr_text_color.asp) and [Basic Styling Tutorial](https://confluence.atlassian.com/doc/basic-styling-tutorial-170000548.html) for more details.

comments: author: Marcel Wilson
body: What is interesting is I've read multiple posts about how overriding the CSS is NOT possible. But I did find that I was able to setup the custom header with a CSS override like so:

```
{style}#title-text a { color:#F6A01A;}table.aui > tbody > tr > th { color: #00B259;}h1, h2, h3, h4, h5, h6, 
.wiki-content h1, 
.wiki-content h2, 
.wiki-content h3, 
.wiki-content h4, 
.wiki-content h5, 
.wiki-content h6, 
.pagetitle, 
.steptitle, 
.substeptitle, 
.formtitle, 
.wiki-content 
.tablesorter-header-inner, 
#toolbar #format-dropdown .format-h1 a, 
#toolbar #format-dropdown .format-h2 a, 
#toolbar #format-dropdown .format-h3 a, 
#toolbar #format-dropdown .format-h4 a, 
#toolbar #format-dropdown .format-h5 a, 
#toolbar #format-dropdown .format-h6 a, 
.jim-table-header-content { color:#00B259;}.jira-tablesorter-header:hover,
.jira-tablesorter-header:hover .jim-table-header-content { color:#00B259;}{style}
```


author: AnnWorley
body: I knew there was someone on the Community with better CSS chops than mine. :)


Tags: administration

colour

confluence-cloud