From 7a230fb6184cca857be15600ad5ce47034485609 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Wed, 9 Apr 2025 14:45:00 -0400 Subject: [PATCH 1/7] Create supported-colors.md --- doc/python/supported-colors.md | 148 +++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 doc/python/supported-colors.md diff --git a/doc/python/supported-colors.md b/doc/python/supported-colors.md new file mode 100644 index 0000000000..f1aae8f82e --- /dev/null +++ b/doc/python/supported-colors.md @@ -0,0 +1,148 @@ +--- +jupyter: + jupytext: + notebook_metadata_filter: all + text_representation: + extension: .md + format_name: markdown + format_version: '1.3' + jupytext_version: 1.17.0 + kernelspec: + display_name: Python 3 (ipykernel) + language: python + name: python3 + language_info: + codemirror_mode: + name: ipython + version: 3 + file_extension: .py + mimetype: text/x-python + name: python + nbconvert_exporter: python + pygments_lexer: ipython3 + version: 3.13.2 + plotly: + description: A list of supported named CSS Colors + display_as: file_settings + language: python + layout: base + name: Supported CSS Colors + order: 40 + page_type: example_index + permalink: python/css-colors/ + thumbnail: thumbnail/shape.jpg +--- + +# Supported CSS Colors + +Many properties in Plotly.py for configuring colors support named CSS colors. For example, marker colors: + +```python +import plotly.graph_objects as go + +fig = go.Figure([ + go.Bar( + x=['Jan', 'Feb', 'Mar', 'Apr'], + y=[20, 14, 25, 16], + name='Primary Product', + # Named CSS color + marker_color='indianred' + ) +]) + +fig.show() +``` + +The following CSS colors are supported in Plotly.py when a property accepts a named CSS color: + +```python hide_code=true +import plotly.graph_objects as go +import pandas as pd + +supported_colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", + "beige", "bisque", "black", "blanchedalmond", "blue", + "blueviolet", "brown", "burlywood", "cadetblue", + "chartreuse", "chocolate", "coral", "cornflowerblue", + "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", + "darkgoldenrod", "darkgray", "darkgrey", "darkgreen", + "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", + "darkorchid", "darkred", "darksalmon", "darkseagreen", + "darkslateblue", "darkslategray", "darkslategrey", + "darkturquoise", "darkviolet", "deeppink", "deepskyblue", + "dimgray", "dimgrey", "dodgerblue", "firebrick", + "floralwhite", "forestgreen", "fuchsia", "gainsboro", + "ghostwhite", "gold", "goldenrod", "gray", "grey", "green", + "greenyellow", "honeydew", "hotpink", "indianred", "indigo", + "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", + "lemonchiffon", "lightblue", "lightcoral", "lightcyan", + "lightgoldenrodyellow", "lightgray", "lightgrey", + "lightgreen", "lightpink", "lightsalmon", "lightseagreen", + "lightskyblue", "lightslategray", "lightslategrey", + "lightsteelblue", "lightyellow", "lime", "limegreen", + "linen", "magenta", "maroon", "mediumaquamarine", + "mediumblue", "mediumorchid", "mediumpurple", + "mediumseagreen", "mediumslateblue", "mediumspringgreen", + "mediumturquoise", "mediumvioletred", "midnightblue", + "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", + "oldlace", "olive", "olivedrab", "orange", "orangered", + "orchid", "palegoldenrod", "palegreen", "paleturquoise", + "palevioletred", "papayawhip", "peachpuff", "peru", "pink", + "plum", "powderblue", "purple", "red", "rosybrown", + "royalblue", "rebeccapurple", "saddlebrown", "salmon", + "sandybrown", "seagreen", "seashell", "sienna", "silver", + "skyblue", "slateblue", "slategray", "slategrey", "snow", + "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", + "turquoise", "violet", "wheat", "white", "whitesmoke", + "yellow", "yellowgreen"] + +def display_colors_as_shapes(color_names): + fig = go.Figure(layout=dict(title="Supported CSS Colors in Plotly.py")) + + for i, color in enumerate(color_names): + row, col = i // 5, i % 5 + x0, y0 = col * 1.2, -row * 1.2 + + fig.add_shape( + type="rect", + x0=x0, y0=y0, + x1=x0+1, y1=y0+1, + fillcolor=color, + line=dict(color="black", width=1), + ) + + fig.add_annotation( + x=x0+0.5, y=y0-0.1, + text=color, + showarrow=False, + font=dict(size=10) + ) + + height = ((len(color_names) // 5) + (1 if len(color_names) % 5 else 0)) * 120 + + fig.update_layout( + height=height, + width=800, + showlegend=False, + plot_bgcolor='rgba(0,0,0,0)', + margin=dict(l=50, r=50, t=50, b=50), + xaxis=dict( + showgrid=False, + zeroline=False, + showticklabels=False, + range=[-0.5, 6] + ), + yaxis=dict( + showgrid=False, + zeroline=False, + showticklabels=False, + scaleanchor="x", + scaleratio=1, + range=[-((len(color_names) // 5) + 1) * 1.2, 1.5] + ) + ) + + return fig + +fig = display_colors_as_shapes(supported_colors) +fig.show() +``` From 5040be6e230420e59e813fd07c1d440117c4b2f3 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Wed, 9 Apr 2025 15:02:14 -0400 Subject: [PATCH 2/7] Update supported-colors.md --- doc/python/supported-colors.md | 164 +++++++++++++++++---------------- 1 file changed, 84 insertions(+), 80 deletions(-) diff --git a/doc/python/supported-colors.md b/doc/python/supported-colors.md index f1aae8f82e..2b6e07c240 100644 --- a/doc/python/supported-colors.md +++ b/doc/python/supported-colors.md @@ -60,89 +60,93 @@ import plotly.graph_objects as go import pandas as pd supported_colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", - "beige", "bisque", "black", "blanchedalmond", "blue", - "blueviolet", "brown", "burlywood", "cadetblue", - "chartreuse", "chocolate", "coral", "cornflowerblue", - "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", - "darkgoldenrod", "darkgray", "darkgrey", "darkgreen", - "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", - "darkorchid", "darkred", "darksalmon", "darkseagreen", - "darkslateblue", "darkslategray", "darkslategrey", - "darkturquoise", "darkviolet", "deeppink", "deepskyblue", - "dimgray", "dimgrey", "dodgerblue", "firebrick", - "floralwhite", "forestgreen", "fuchsia", "gainsboro", - "ghostwhite", "gold", "goldenrod", "gray", "grey", "green", - "greenyellow", "honeydew", "hotpink", "indianred", "indigo", - "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", - "lemonchiffon", "lightblue", "lightcoral", "lightcyan", - "lightgoldenrodyellow", "lightgray", "lightgrey", - "lightgreen", "lightpink", "lightsalmon", "lightseagreen", - "lightskyblue", "lightslategray", "lightslategrey", - "lightsteelblue", "lightyellow", "lime", "limegreen", - "linen", "magenta", "maroon", "mediumaquamarine", - "mediumblue", "mediumorchid", "mediumpurple", - "mediumseagreen", "mediumslateblue", "mediumspringgreen", - "mediumturquoise", "mediumvioletred", "midnightblue", - "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", - "oldlace", "olive", "olivedrab", "orange", "orangered", - "orchid", "palegoldenrod", "palegreen", "paleturquoise", - "palevioletred", "papayawhip", "peachpuff", "peru", "pink", - "plum", "powderblue", "purple", "red", "rosybrown", - "royalblue", "rebeccapurple", "saddlebrown", "salmon", - "sandybrown", "seagreen", "seashell", "sienna", "silver", - "skyblue", "slateblue", "slategray", "slategrey", "snow", - "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", - "turquoise", "violet", "wheat", "white", "whitesmoke", - "yellow", "yellowgreen"] - -def display_colors_as_shapes(color_names): - fig = go.Figure(layout=dict(title="Supported CSS Colors in Plotly.py")) - - for i, color in enumerate(color_names): - row, col = i // 5, i % 5 - x0, y0 = col * 1.2, -row * 1.2 - - fig.add_shape( - type="rect", - x0=x0, y0=y0, - x1=x0+1, y1=y0+1, - fillcolor=color, - line=dict(color="black", width=1), - ) - - fig.add_annotation( - x=x0+0.5, y=y0-0.1, - text=color, - showarrow=False, - font=dict(size=10) - ) - - height = ((len(color_names) // 5) + (1 if len(color_names) % 5 else 0)) * 120 + "beige", "bisque", "black", "blanchedalmond", "blue", + "blueviolet", "brown", "burlywood", "cadetblue", + "chartreuse", "chocolate", "coral", "cornflowerblue", + "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", + "darkgoldenrod", "darkgray", "darkgrey", "darkgreen", + "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", + "darkorchid", "darkred", "darksalmon", "darkseagreen", + "darkslateblue", "darkslategray", "darkslategrey", + "darkturquoise", "darkviolet", "deeppink", "deepskyblue", + "dimgray", "dimgrey", "dodgerblue", "firebrick", + "floralwhite", "forestgreen", "fuchsia", "gainsboro", + "ghostwhite", "gold", "goldenrod", "gray", "grey", "green", + "greenyellow", "honeydew", "hotpink", "indianred", "indigo", + "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", + "lemonchiffon", "lightblue", "lightcoral", "lightcyan", + "lightgoldenrodyellow", "lightgray", "lightgrey", + "lightgreen", "lightpink", "lightsalmon", "lightseagreen", + "lightskyblue", "lightslategray", "lightslategrey", + "lightsteelblue", "lightyellow", "lime", "limegreen", + "linen", "magenta", "maroon", "mediumaquamarine", + "mediumblue", "mediumorchid", "mediumpurple", + "mediumseagreen", "mediumslateblue", "mediumspringgreen", + "mediumturquoise", "mediumvioletred", "midnightblue", + "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", + "oldlace", "olive", "olivedrab", "orange", "orangered", + "orchid", "palegoldenrod", "palegreen", "paleturquoise", + "palevioletred", "papayawhip", "peachpuff", "peru", "pink", + "plum", "powderblue", "purple", "red", "rosybrown", + "royalblue", "rebeccapurple", "saddlebrown", "salmon", + "sandybrown", "seagreen", "seashell", "sienna", "silver", + "skyblue", "slateblue", "slategray", "slategrey", "snow", + "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", + "turquoise", "violet", "wheat", "white", "whitesmoke", + "yellow", "yellowgreen"] + +fig = go.Figure(layout=dict(title="Supported Named CSS Colors")) + +for i, color in enumerate(supported_colors): + row, col = i // 5, i % 5 + x0, y0 = col * 1.2, -row * 1.2 - fig.update_layout( - height=height, - width=800, - showlegend=False, - plot_bgcolor='rgba(0,0,0,0)', - margin=dict(l=50, r=50, t=50, b=50), - xaxis=dict( - showgrid=False, - zeroline=False, - showticklabels=False, - range=[-0.5, 6] - ), - yaxis=dict( - showgrid=False, - zeroline=False, - showticklabels=False, - scaleanchor="x", - scaleratio=1, - range=[-((len(color_names) // 5) + 1) * 1.2, 1.5] - ) + fig.add_shape( + type="rect", + x0=x0, y0=y0, + x1=x0+1, y1=y0+1, + fillcolor=color, + line=dict(color="black", width=1), ) - return fig + fig.add_annotation( + x=x0+0.5, y=y0-0.1, + text=color, + showarrow=False, + font=dict(size=10) + ) + +height = ((len(supported_colors) // 5) + (1 if len(color_names) % 5 else 0)) * 120 + +fig.update_layout( + height=height, + width=800, + showlegend=False, + plot_bgcolor='rgba(0,0,0,0)', + margin=dict(l=50, r=50, t=50, b=50), + xaxis=dict( + showgrid=False, + zeroline=False, + showticklabels=False, + range=[-0.5, 6] + ), + yaxis=dict( + showgrid=False, + zeroline=False, + showticklabels=False, + scaleanchor="x", + scaleratio=1, + range=[-((len(supported_colors) // 5) + 1) * 1.2, 1.5] + ) +) -fig = display_colors_as_shapes(supported_colors) fig.show() ``` + +```python + +``` + +```python + +``` From 8b166bdc7b1e8cbd06120dbe76ea8e8079c1db22 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Wed, 9 Apr 2025 15:06:46 -0400 Subject: [PATCH 3/7] Update supported-colors.md --- doc/python/supported-colors.md | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/doc/python/supported-colors.md b/doc/python/supported-colors.md index 2b6e07c240..3c6be98ad4 100644 --- a/doc/python/supported-colors.md +++ b/doc/python/supported-colors.md @@ -106,7 +106,7 @@ for i, color in enumerate(supported_colors): x0=x0, y0=y0, x1=x0+1, y1=y0+1, fillcolor=color, - line=dict(color="black", width=1), + line=dict(color="black", width=0.2), ) fig.add_annotation( @@ -116,10 +116,8 @@ for i, color in enumerate(supported_colors): font=dict(size=10) ) -height = ((len(supported_colors) // 5) + (1 if len(color_names) % 5 else 0)) * 120 - fig.update_layout( - height=height, + height=((len(supported_colors) // 5) + (1 if len(color_names) % 5 else 0)) * 120, width=800, showlegend=False, plot_bgcolor='rgba(0,0,0,0)', @@ -142,11 +140,3 @@ fig.update_layout( fig.show() ``` - -```python - -``` - -```python - -``` From 7a4ffa402d7ea74685dcccb3a0fa27f0ecbb6134 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Wed, 9 Apr 2025 15:12:21 -0400 Subject: [PATCH 4/7] Update supported-colors.md --- doc/python/supported-colors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/supported-colors.md b/doc/python/supported-colors.md index 3c6be98ad4..9c825b3c97 100644 --- a/doc/python/supported-colors.md +++ b/doc/python/supported-colors.md @@ -46,7 +46,7 @@ fig = go.Figure([ y=[20, 14, 25, 16], name='Primary Product', # Named CSS color - marker_color='indianred' + marker_color='royalblue' ) ]) From a07705a02ad7506fe63a4ab90421fe3743bd8d3b Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Wed, 9 Apr 2025 15:49:09 -0400 Subject: [PATCH 5/7] Update supported-colors.md --- doc/python/supported-colors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/supported-colors.md b/doc/python/supported-colors.md index 9c825b3c97..d9510b58c5 100644 --- a/doc/python/supported-colors.md +++ b/doc/python/supported-colors.md @@ -117,7 +117,7 @@ for i, color in enumerate(supported_colors): ) fig.update_layout( - height=((len(supported_colors) // 5) + (1 if len(color_names) % 5 else 0)) * 120, + height=((len(supported_colors) // 5) + (1 if len(supported_colors) % 5 else 0)) * 120, width=800, showlegend=False, plot_bgcolor='rgba(0,0,0,0)', From 79a0e0e8c596bdcf719086f61166442c72f65853 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 10 Apr 2025 14:53:36 -0400 Subject: [PATCH 6/7] Update doc/python/supported-colors.md --- doc/python/supported-colors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/supported-colors.md b/doc/python/supported-colors.md index d9510b58c5..52820ef3af 100644 --- a/doc/python/supported-colors.md +++ b/doc/python/supported-colors.md @@ -53,7 +53,7 @@ fig = go.Figure([ fig.show() ``` -The following CSS colors are supported in Plotly.py when a property accepts a named CSS color: +These colors are supported in Plotly.py when a property accepts a [named CSS colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color). ```python hide_code=true import plotly.graph_objects as go From c8b38f41c504e142139f1146caa9ec934e9b5164 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 10 Apr 2025 14:54:54 -0400 Subject: [PATCH 7/7] Update doc/python/supported-colors.md --- doc/python/supported-colors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/supported-colors.md b/doc/python/supported-colors.md index 52820ef3af..53fd7b3aec 100644 --- a/doc/python/supported-colors.md +++ b/doc/python/supported-colors.md @@ -53,7 +53,7 @@ fig = go.Figure([ fig.show() ``` -These colors are supported in Plotly.py when a property accepts a [named CSS colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color). +These colors are supported in Plotly.py when a property accepts a [named CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color). ```python hide_code=true import plotly.graph_objects as go