Changing Section Colors

Each content channel (Section) can have a color associated with it to help differentiate it between other sections.

To change colors of the different Sections, navigate to the Section you would like to change from the Pages menu. Then click the Section title. In the example below, the Section COVID-19 is selected.

Section view
This is the Section view. Click on the title of the section whose color you want to change.

On the Section editing page, make sure you are on the Content tab. You can check this by clicking Content just below the Section title and publishing date. Then scroll down to the Color option. This color setting requires a hexadecimal color code. To get the hex color code, use the Google Color Picker tool. On the Google Color Picker, select the hue from the horizontal slider just below the color field. Then select the specfic color from this hue by clicking in the color field. A sample of color you have chosen will appear on the left of the color field. Once you are satisfied with your color, copy the text in the HEX textbox, but do not copy the pound sign (#).

Google Color Picker
Google Color Picker. Step 1: select the hue from the horizontal slider (circled in red). Step 2: Select the specfic color from the color field (right cyan arrow). A preview of the selected color is shown on the left of color field (left cyan arrow). Step 3: Copy the hex code, leaving out the pound sign (circled in green).

Finally, navigate back to Wagtail and paste the hex code into the Color field on the Section editing page. Capitalize all letters. For example, the color in the image above (#92c92a) should be pasted into Wagtail as 92C92A.

Below are some examples of IoGT color palettes used in the v1.0 global site for your reference. Additonally, there is a table where you can easily copy and paste the hex color codes from.

Color palette 1
Color palette 1.
Color palette 2
Color palette 2.
Hex RGB CMYK Section
#4D4391 77, 67, 145 84, 87, 7, 1 IoGT Main Color
#6EC17F 110, 193, 127 58, 0, 67, 0 Education
#00BFC6 0, 191, 198 71, 0, 26, 0 Facts for Life
#CB78B3 203, 120, 179 18, 64, 0, 0 Fair Play
#E24256 226, 66, 86 5, 89, 60, 0 Ebola/Emergency
#FF7E4E 255, 126, 78 0, 63, 73, 0
#FFBE61 255, 190, 97 0, 28, 71, 0
#F38AA5 243, 138, 165 0, 58, 13, 0
#6093CD 96, 147, 205 63, 34, 0, 0 Internet Safety
#A4CE55 164, 206, 85 40, 1, 86, 0 Blogging/Youth Empowerment
#DF6859 223, 104, 89 8, 73, 65, 0 HIV/Sexual Health
#4F946E 79, 148, 110 72, 22, 69, 5
#F05D7F 240, 93, 127 0, 79, 29, 0 Rights