# Colors and fonts of code in Jupyter Notebook

**URL:** <https://discourse.jupyter.org/t/colors-and-fonts-of-code-in-jupyter-notebook/9784>\
**Category:** Notebook\
**Created:** [June 28, 2021, 4:29pm UTC](https://discourse.jupyter.org/t/colors-and-fonts-of-code-in-jupyter-notebook/9784 "2021-06-28T16:29:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sbonaretti](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/sbonaretti/32/3059_2.png) [@sbonaretti](https://discourse.jupyter.org/u/sbonaretti)\
**Post date:** [June 28, 2021, 4:29pm UTC](https://discourse.jupyter.org/t/colors-and-fonts-of-code-in-jupyter-notebook/9784/1 "2021-06-28T16:29:04Z")

</div>

Hi!

What are the RGB (or hex) colors used for code in Jupyter notebook? I mean of the red used for strings, the purple used for operators, etc.  
Also, fonts are Arial for text and Menlo for code, is that right?  
I have been browsing around for a while looking for these info, but I could not find them. So I thought about writing here - hope it’s fine!

Thanks a lot for helping!  
Serena

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [June 28, 2021, 5:22pm UTC](https://discourse.jupyter.org/t/colors-and-fonts-of-code-in-jupyter-notebook/9784/2 "2021-06-28T17:22:48Z")

</div>

CodeMirror helps provide what the notebook is using for the code highlighting that you experience, see [here](https://discourse.jupyter.org/t/how-do-notebooks-highlight-python-syntax/5372/2). I’m trying to locate more about where the color codes are detailed. So far [this is closest](https://github.com/jupyter/notebook/tree/2cfff07a39fa486a3f05c26b400fa26e1802a053/notebook/static/notebook/less) I’ve found. (UPDATE: There is also some listed [here in this later answer to a different question](https://discourse.jupyter.org/t/how-can-i-change-code-colors-in-jupyter-lab-installed-via-pip/20147/2) with indication on where to find them.)

Based on “The pygments theme in use mimics JupyterLab’s codemirror mode with the same CSS variables” in the post [here](https://discourse.jupyter.org/t/html-format-lost-in-nbconvert-6-0-x-bug/5972/3) another place to dig around to find the colors may be in nbconverts use of pygments to make HTML. In this regard, the preview generation code at the bottom of [this section](https://github.com/jupyter/nbconvert/blob/ff334777496bb77a4b2bcd3a79c63d8654ca632c/docs/source/highlighting.rst#using-builtin-styles) seems nice; however, on the test Binder instance I was looking at first listing of `default` didn’t quite match with the notebook cells if you paste those four lines in the test `code` block in a notebook. (`print` is green when pasting it in a cell results in `print` being red.) Plus, [this](https://github.com/jupyter/nbconvert/blob/ff334777496bb77a4b2bcd3a79c63d8654ca632c/docs/source/customizing.rst#inheritance) suggests a place to look for the conversion css and templates nbconvert uses.

---

<div class="post-metadata">

**Author:** ![sbonaretti](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/sbonaretti/32/3059_2.png) [@sbonaretti](https://discourse.jupyter.org/u/sbonaretti)\
**Post date:** [June 29, 2021, 10:26am UTC](https://discourse.jupyter.org/t/colors-and-fonts-of-code-in-jupyter-notebook/9784/3 "2021-06-29T10:26:50Z")

</div>

> [@fomightez](#):
>
> to locate the path the the css now in a modern Jupyter sessio

Hi! Thanks for replying so quickly! I honestly got a bit lost in all this code again, and I could not find what I was looking for… So I went easy: I used the Digital Color Meter (app on MacOS)!  
Here are the RGB colors I got, in case anybody else needs them:  
red (strings): 186,34,32  
black (variables): 33,33,33  
purple (operators): 170,35,255  
green (keywords and python built-in functions): 0,128,0  
green (comments): 64,128,128  
blue (type built-in functions): 0,85,170  
grey (cell background): 245,245,246  
grey (cell border): 224, 224, 224

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [June 29, 2021, 3:52pm UTC](https://discourse.jupyter.org/t/colors-and-fonts-of-code-in-jupyter-notebook/9784/4 "2021-06-29T15:52:25Z")

</div>

Thanks for posting what you found by your direct method. That may be plenty enough for many folks.  
I had wondered if using your favorite browser’s web development tools where you can inspect elements may have let you get similar data by hand?  
With my approach I was sort of hoping to find where the information was to get the exact defined values as they have to be in there somewhere. That way I’ll hopefully learn the inner workings of Jupyter a little better and make it possible to process to RGB and even hexcodes programmatically. I found more custom schemes css out there in GitHub that could be parsed the way I was hoping to for the standard settings.

---

<div class="post-metadata">

**Author:** ![sbonaretti](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/sbonaretti/32/3059_2.png) [@sbonaretti](https://discourse.jupyter.org/u/sbonaretti)\
**Post date:** [June 29, 2021, 5:17pm UTC](https://discourse.jupyter.org/t/colors-and-fonts-of-code-in-jupyter-notebook/9784/5 "2021-06-29T17:17:07Z")

</div>

Yes, I agree that finding the exact values from some css somewhere would be ideal, but I guess I am just in a rush! But, ye, I would love to actually see the correct values as well!