Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit eaf6a6e

Browse filesBrowse files
committed
Improve xkcd vs CSS colour comparison chart.
Select text colour based on luminance of the background, rather than straight 50% black, which is invisible on some lines. Then tweak the alignments settings to look nicer.
1 parent 37abd16 commit eaf6a6e
Copy full SHA for eaf6a6e

File tree

Expand file treeCollapse file tree

1 file changed

+19
-12
lines changed
Filter options
Expand file treeCollapse file tree

1 file changed

+19
-12
lines changed

‎tutorials/colors/colors.py

Copy file name to clipboardExpand all lines: tutorials/colors/colors.py
+19-12Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,11 @@ def demo(sty):
160160
# The visual below shows name collisions. Color names where color values agree
161161
# are in bold.
162162

163-
import matplotlib._color_data as mcd
163+
import matplotlib.colors as mcolors
164164
import matplotlib.patches as mpatch
165165

166-
overlap = {name for name in mcd.CSS4_COLORS
167-
if "xkcd:" + name in mcd.XKCD_COLORS}
166+
overlap = {name for name in mcolors.CSS4_COLORS
167+
if f'xkcd:{name}' in mcolors.XKCD_COLORS}
168168

169169
fig = plt.figure(figsize=[9, 5])
170170
ax = fig.add_axes([0, 0, 1, 1])
@@ -173,23 +173,30 @@ def demo(sty):
173173
n_rows = len(overlap) // n_groups + 1
174174

175175
for j, color_name in enumerate(sorted(overlap)):
176-
css4 = mcd.CSS4_COLORS[color_name]
177-
xkcd = mcd.XKCD_COLORS["xkcd:" + color_name].upper()
176+
css4 = mcolors.CSS4_COLORS[color_name]
177+
xkcd = mcolors.XKCD_COLORS[f'xkcd:{color_name}'].upper()
178+
179+
# Pick text colour based on perceived luminance.
180+
rgba = mcolors.to_rgba_array([css4, xkcd])
181+
luma = 0.299 * rgba[:, 0] + 0.587 * rgba[:, 1] + 0.114 * rgba[:, 2]
182+
css4_text_color = 'k' if luma[0] > 0.5 else 'w'
183+
xkcd_text_color = 'k' if luma[1] > 0.5 else 'w'
178184

179185
col_shift = (j // n_rows) * 3
180186
y_pos = j % n_rows
181-
text_args = dict(va='center', fontsize=10,
182-
weight='bold' if css4 == xkcd else None)
187+
text_args = dict(fontsize=10, weight='bold' if css4 == xkcd else None)
183188
ax.add_patch(mpatch.Rectangle((0 + col_shift, y_pos), 1, 1, color=css4))
184189
ax.add_patch(mpatch.Rectangle((1 + col_shift, y_pos), 1, 1, color=xkcd))
185-
ax.text(0 + col_shift, y_pos + .5, ' ' + css4, alpha=0.5, **text_args)
186-
ax.text(1 + col_shift, y_pos + .5, ' ' + xkcd, alpha=0.5, **text_args)
187-
ax.text(2 + col_shift, y_pos + .5, ' ' + color_name, **text_args)
190+
ax.text(0.5 + col_shift, y_pos + .7, css4,
191+
color=css4_text_color, ha='center', **text_args)
192+
ax.text(1.5 + col_shift, y_pos + .7, xkcd,
193+
color=xkcd_text_color, ha='center', **text_args)
194+
ax.text(2 + col_shift, y_pos + .7, f' {color_name}', **text_args)
188195

189196
for g in range(n_groups):
190197
ax.hlines(range(n_rows), 3*g, 3*g + 2.8, color='0.7', linewidth=1)
191-
ax.text(0.5 + 3*g, -0.5, 'X11', ha='center', va='center')
192-
ax.text(1.5 + 3*g, -0.5, 'xkcd', ha='center', va='center')
198+
ax.text(0.5 + 3*g, -0.3, 'X11/CSS4', ha='center')
199+
ax.text(1.5 + 3*g, -0.3, 'xkcd', ha='center')
193200

194201
ax.set_xlim(0, 3 * n_groups)
195202
ax.set_ylim(n_rows, -1)

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.