diff --git a/writing-visualising/visualising.qmd b/writing-visualising/visualising.qmd
index 8e0fb86..47eafb2 100644
--- a/writing-visualising/visualising.qmd
+++ b/writing-visualising/visualising.qmd
@@ -49,13 +49,50 @@ We strongly recommend you stick to the codes as outlined, if you can't for any r
Categorical data can be divided into groups or categories by using names or labels. This palette has four colours. We recommend a limit of four categories as best practice for basic data visualisations. The ordering of the palette is important as not all colours are accessible when paired together.
+```{=html}
+
+
+
+ | Colour Name |
+ Hex Code |
+ RGB |
+ CYMK |
+ Colour Example |
+
+
+
+ | Dark blue |
+ #12436D |
+ 18, 67, 109 |
+ 36, 16, 0, 57 |
+ |
+
+
+ | Turquoise |
+ #28A197 |
+ 40, 161, 151 |
+ 75, 0, 6, 37 |
+ |
+
+
+ | Dark Pink |
+ #801650 |
+ 128, 22, 80 |
+ 0, 83, 38, 50 |
+ |
+
+
+ | Orange |
+ #F46A25 |
+ 244, 106, 37 |
+ 0, 57, 85, 4 |
+ |
+
+
+
+
+```
-| Colour name | Hex code | RGB | CYMK |
-|-------------------|----------|---------------|---------------|
-| Dark blue | #12436D | 18, 67, 109 | 36, 16, 0, 57 |
-| Turquoise | #28A197 | 40, 161, 151 | 75, 0, 6, 37 |
-| Dark pink | #801650 | 128, 22, 80 | 0, 83, 38, 50 |
-| Orange | #F46A25 | 244, 106, 37 | 0, 57, 85, 4 |
---
@@ -65,11 +102,43 @@ Categorical data can be divided into groups or categories by using names or labe
Sequential data is any sort of data where the order of series has some meaning. For example, age groups ascending in age. This palette has three colours and even this pushes the boundaries for contrast ratios. Any charts made with shades of a specific hue should be accessible without colour.
-| Colour name | Hex code | RGB | CYMK |
-|-------------------|----------|---------------|---------------|
-| Dark blue | #12436D | 18, 67, 109 | 36, 16, 0, 57 |
-| Mid blue | #2073BC | 32, 115, 188 | 0, 57, 85, 4 |
-| Light blue | #6BACE6 | 107, 172, 230 | 75, 0, 6, 37 |
+```{=html}
+
+
+
+ | Colour Name |
+ Hex Code |
+ RGB |
+ CYMK |
+ Colour Example |
+
+
+
+ | Dark blue |
+ #12436D |
+ 18, 67, 109 |
+ 36, 16, 0, 57 |
+ |
+
+
+ | Mid Blue |
+ #2073BC |
+ 32, 115, 188 |
+ 0, 57, 85, 4 |
+ |
+
+
+ | Light Blue |
+ #6BACE6 |
+ 107, 172, 230 |
+ 75, 0, 6, 37 |
+ |
+
+
+
+
+```
+
---
@@ -79,11 +148,35 @@ Sequential data is any sort of data where the order of series has some meaning.
On focus charts, colour is used to highlight specific elements to help users understand the information. One line out of many will be highlighted as a colour and the rest of the series remain grey.
-
-| Colour name | Hex code | RGB | CYMK |
-|-------------------|----------|---------------|---------------|
-| Dark blue | #12436D | 18, 67, 109 | 36, 16, 0, 57 |
-| Grey | #BFBFBF | 191, 191, 191 | 0, 0, 0, 25 |
+```{=html}
+
+
+
+ | Colour Name |
+ Hex Code |
+ RGB |
+ CYMK |
+ Colour Example |
+
+
+
+ | Dark blue |
+ #12436D |
+ 18, 67, 109 |
+ 36, 16, 0, 57 |
+ |
+
+
+ | Grey |
+ #BFBFBF |
+ 191, 191, 191 |
+ 0, 0, 0, 25 |
+ |
+
+
+
+
+```
---
@@ -97,14 +190,64 @@ If you do want to use additional colours you need to ensure that the chart is un
For categorical data, we recommend the following extensions to the categorical palette. Once again, the ordering is important. If you're making a chart in EES these are not default colours, so you will need to use the colour picker to specify them.
-| Colour name | Hex code | RGB | CYMK |
-|-------------------|----------|---------------|---------------|
-| Dark blue | #12436D | 18, 67, 109 | 36, 16, 0, 57 |
-| Turquoise | #28A197 | 40, 161, 151 | 75, 0, 6, 37 |
-| Dark pink | #801650 | 128, 22, 80 | 0, 83, 38, 50 |
-| Orange | #F46A25 | 244, 106, 37 | 0, 57, 85, 4 |
-| Dark grey | #3D3D3D | 61, 61, 61 | 0, 0, 0, 76 |
-| Light purple | #A285D1 | 162, 133, 209 | 22, 36, 0, 18 |
+```{=html}
+
+
+
+ | Colour Name |
+ Hex Code |
+ RGB |
+ CYMK |
+ Colour Example |
+
+
+
+ | Dark blue |
+ #12436D |
+ 18, 67, 109 |
+ 36, 16, 0, 57 |
+ |
+
+
+ | Turquoise |
+ #28A197 |
+ 40, 161, 151 |
+ 75, 0, 6, 37 |
+ |
+
+
+ | Dark Pink |
+ #801650 |
+ 128, 22, 80 |
+ 0, 83, 38, 50 |
+ |
+
+
+ | Orange |
+ #F46A25 |
+ 244, 106, 37 |
+ 0, 57, 85, 4 |
+ |
+
+
+ | Dark Grey |
+ #3D3D3D |
+ 61, 61, 61 |
+ 0, 0, 0, 76 |
+ |
+
+
+ | Light Purple |
+ #A285D1 |
+ 162, 133, 209 |
+ 22, 36, 0, 18 |
+ |
+
+
+
+
+```
+
For larger palettes when using sequential data, we recommend using [ColorBrewer](https://colorbrewer2.org/#type=sequential) to find the hex codes for multiple shades of a given hue.