diff --git a/assets/images/help/writing/color-models-rendered.png b/assets/images/help/writing/color-models-rendered.png
new file mode 100644
index 000000000000..f57878709183
Binary files /dev/null and b/assets/images/help/writing/color-models-rendered.png differ
diff --git a/content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md b/content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md
index 1a460ac113d9..1be7decf8141 100644
--- a/content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md
+++ b/content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md
@@ -87,6 +87,38 @@ For more information, see "[Creating and highlighting code blocks](/articles/cre
 
 {% data reusables.user-settings.enabling-fixed-width-fonts %}
 
+{% ifversion fpt or ghec %}
+
+## Colors
+
+You can even render a color using backticks(<code>\`</code>). The backticks should contain the color represented by a supported color model. Currently only hex, RGB and HSL models are supported.
+
+| Color Model | Syntax | Example |
+|-----|-----|-----|
+| HEX | <code>\`#RRGGBB\`</code> where `RR`(Red),`GG`(Green) & `BB`(Blue) are hexadecimal integers from `00` to `FF` representing color intensity of respective colors. | <code>\`#61dee1\`</code> |
+| RGB | <code>\`rgb(red,green,blue)\`</code> where every parameter(red, green and blue) defines the color intensity and ranges from `0` to `255`. | <code>\`rgb(231,239,54)\`</code> |
+| HSL | <code>\`hsl(hue, saturation, lightness)\`</code> where hue is a degree on color wheel ranging from `0` to `360`, saturation and lightness denote color saturation and lightness of the color respectively in percentages(`%`). | <code>\`hsl(328,84%,66%)\`</code> |
+
+A live example :
+
+<pre>
+# What should be the button color ?
+
+- [ ] ![Blue colored button](link-to-image) `#61dee1`
+- [ ] ![Yellow colored button](link-to-image) `rgb(231,239,54)`
+- [ ] ![Pink colored button](link-to-image) `hsl(328,84%,66%)`
+</pre>
+
+![Rendered Color Models](/assets/images/help/writing/color-models-rendered.png)
+
+{% note %}
+
+**Note** : The backticks(<code>\`</code>) containing the color model should **not** contain any leading or trailing spaces.
+
+{% endnote %}
+
+{% endif %}
+
 ## Links
 
 You can create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL in parentheses `( )`. {% ifversion fpt or ghae or ghes > 3.1 or ghec %}You can also use the keyboard shortcut <kbd>Command</kbd>+<kbd>K</kbd> to create a link.{% endif %}{% ifversion fpt or ghae-issue-5434 or ghes > 3.3 or ghec %} When you have text selected, you can paste a URL from your clipboard to automatically create a link from the selection.{% endif %}