A visualization+average calculation of Tailwind Lightnesses in Oklch color space

twColors.py

!pip install matplotlib

import matplotlib.pyplot as plt
import numpy as np
import json

grays = [
    {
        "color": "slate",
        "lightness": [ 98.41518630825351, 96.82603461349981, 92.87612611494642, 86.89814311332097, 
                       71.0671591468536, 55.43910041396626, 44.55331020038939, 37.169634884935405,
                       27.94952360009458, 20.768191437415027, 12.880223242675607 ]
    },
    {
        "color": "gray",
        "lightness": [ 98.46253095212305, 96.69556358047708, 92.75823037698045, 87.16813285508724, 
                       71.36601047213802, 55.10191039708331, 44.611200155410565, 37.29270545767065, 
                       27.80780425511484, 21.0084489557803, 12.964040685389039 ]
    },
    {
        "color": "zinc",
        "lightness": [ 98.51036453012394, 96.74343313917588, 91.97285495725612, 87.11079015489477, 
                       71.18147877340598, 55.16643043596283, 44.18610086333574, 37.03233979296209, 
                       27.39363158745301, 21.033092951507555, 14.076533342702295 ]
    },
    {
        "color": "neutral",
        "lightness": [ 98.51036453012394, 97.01507662048742, 92.19060107593575, 86.99435399079857, 
                       71.54735242854662, 55.552675404345194, 43.86047571639893, 37.14949436051885, 
                       26.861827523126262, 20.46265296222637, 14.478795444392764 ]
    },
    {
        "color": "stone",
        "lightness": [ 98.48252440426258, 96.98713112644224, 92.31750306204142, 86.8661413603674, 
                       71.60843964808517, 55.34016452438932, 44.44172305505523, 37.4115713319495, 
                       26.8484912320043, 21.611539757073164, 14.689615700132247 ]
    }
]
colors = [
    {
        "color": "red",
        "lightness": [ 97.05277627040944, 93.5640739344755, 88.4542375708757, 80.76896701271659, 
                       71.06273468657108, 63.683371101973776, 57.70988158658138, 50.54198542083793, 
                       44.368723476317285, 39.58425973073378, 25.751812623394354 ]
    },
    {
        "color": "orange",
        "lightness": [ 97.96223161044885, 95.42035915736966, 90.14571796043893, 83.65745655617263, 
                       75.76397974627646, 70.48712531871948, 64.60719617751826, 55.34275295964122, 
                       46.97988520759592, 40.83894003596009, 26.590721822412387 ]
    },
    {
        "color": "amber",
        "lightness": [ 98.68793386544313, 96.18961496627985, 92.42768278646545, 87.8966791203335, 
                       83.68605694425688, 76.85903543348415, 66.58398299592922, 55.52831089899226, 
                       47.31890342082695, 41.37073269990383, 27.91237703579254 ]
    },
    {
        "color": "yellow",
        "lightness": [ 98.72984021689963, 97.29186194540002, 94.51021919042, 90.52427893214666, 
                       86.05594574290993, 79.52426342496926, 68.06403452238791, 55.378122610328084, 
                       47.618632351528696, 42.09999548373739, 28.56545230730302 ]
    },
    {
        "color": "lime",
        "lightness": [ 98.56750627599786, 96.69336009477387, 93.82275468296541, 89.71521541377118, 
                       84.93154248885114, 76.81408725030224, 64.81668495945996, 53.222311849343804, 
                       45.28403194958058, 40.50344362117928, 27.40593016950527 ]
    },
    {
        "color": "green",
        "lightness": [ 98.19257442632147, 96.24129304540665, 92.50228462715658, 87.11631814235149, 
                       80.03487736930356, 72.27459132772876, 62.70522294252733, 52.72986372209299, 
                       44.79246897657678, 39.253242555468255, 26.63636956361412 ]
    },
    {
        "color": "emerald",
        "lightness": [ 97.9318909353695, 95.04572580359631, 90.49406983402045, 84.51857088249152, 
                       77.29443814572224, 69.58730707485795, 59.59712011499628, 50.812713335218504, 
                       43.17999611897313, 37.804848434803816, 26.21004939228892 ]
    },
    {
        "color": "teal",
        "lightness": [ 98.35790144186748, 95.26506669496753, 90.99563731835238, 85.488177443637, 
                       78.45198363203981, 70.37526627475934, 60.02242073668439, 51.09377730324076, 
                       43.696783027360674, 38.60593189154187, 27.726154628527 ]
    },
    {
        "color": "cyan",
        "lightness": [ 98.41183608504814, 95.62622894745618, 91.66644091487164, 86.50730068934956, 
                       79.71158234104111, 71.48368392379815, 60.891091268096034, 51.97593160824834, 
                       45.00293962884589, 39.820621213021276, 30.181216336917384 ]
    },
    {
        "color": "sky",
        "lightness": [ 97.71080206520378, 95.14187428972255, 90.1379672505201, 82.75864957767686, 
                       75.35128818722148, 68.46872329688296, 58.76172069567244, 49.9982379537747, 
                       44.3375983010869, 39.12299109535381, 29.345509688139508 ]
    },
    {
        "color": "blue",
        "lightness": [ 97.04800342219555, 93.1917894420755, 88.2343416136586, 80.90690177692747, 
                       71.37400464544268, 62.30830295087604, 54.61497233109911, 48.81983119167243, 
                       42.44450003704301, 37.90591726337598, 28.225639748251545 ]
    },
    {
        "color": "indigo",
        "lightness": [ 96.19054249179618, 92.99407278451277, 86.9859119105521, 78.52983844099965, 
                       68.01125993688157, 58.54043099280906, 51.05731000397817, 45.67750835158669, 
                       39.84316206440974, 35.87514550402706, 25.7332960121501 ]
    },
    {
        "color": "violet",
        "lightness": [ 96.91427278475122, 94.33476329541163, 89.42679542867378, 81.1161834449879, 
                       70.8968952616937, 60.56307524243788, 54.133708511808656, 49.06664957207974, 
                       43.19853823555785, 37.96421719371241, 28.266999845639774 ]
    },
    {
        "color": "purple",
        "lightness": [ 97.68478274824723, 94.64303999306246, 90.23594849142272, 82.67591098935867, 
                       72.16853850869136, 62.68459153915735, 55.753743388709545, 49.55183589381307, 
                       43.82793785055954, 38.074407975932246, 29.052185467233212 ]
    },
    {
        "color": "fuchsia",
        "lightness": [ 97.72609068393878, 95.20445823124261, 90.29772664366067, 83.30331995840974, 
                       74.77201291172129, 66.67641191695823, 59.14715851044704, 51.802283656888434, 
                       45.19066860595437, 40.068152337366776, 29.320391896309793 ]
    },
    {
        "color": "pink",
        "lightness": [ 97.14126183303539, 94.82010495283814, 89.94065395045119, 82.28403345000457, 
                       72.52664082971208, 65.59195607734246, 59.16463523822488, 52.45948157852954, 
                       45.87040423018616, 40.78221213040566, 28.446818764971187 ]
    },
    {
        "color": "rose",
        "lightness": [ 96.94101064442054, 94.13664308153568, 89.24469642290462, 80.96639151994167, 
                       71.91860856583746, 64.50321479710674, 58.58376793813537, 51.425631196568375, 
                       45.45682663795611, 41.03257497558104, 27.084820669722248 ]
    }
]


# TW Color name to hex code mapping (for better visualization of the plot)
color_map = {
    'slate': '#64748b',
    'gray': '#6b7280',
    'zinc': '#71717a',
    'neutral': '#737373',
    'stone': '#78716c',
    'red': '#ef4444',
    'orange': '#f97316',
    'amber': '#f59e0b',
    'yellow': '#eab308',
    'lime': '#84cc16',
    'green': '#22c55e',
    'emerald': '#10b981',
    'teal': '#14b8a6',
    'cyan': '#06b6d4',
    'sky': '#0ea5e9',
    'blue': '#3b82f6',
    'indigo': '#6366f1',
    'violet': '#8b5cf6',
    'purple': '#a855f7',
    'fuchsia': '#d946ef',
    'pink': '#ec4899',
    'rose': '#f43f5e'
}

# Averages for colors and grays
color_lightness_sums = np.zeros_like(colors[0]['lightness'])
color_count = len(colors)
gray_lightness_sums = np.zeros_like(grays[0]['lightness'])
gray_count = len(grays)

# Initialize the plot
plt.figure(figsize=(10, 6))

# Loop through each color in the array
for color in colors:
    # Determine the line color
    line_color = color_map.get(color['color'], color['color'])  # Use mapped color or original
    # Plot the lightness array for the current color
    plt.plot(color['lightness'], label=color['color'], color=line_color)
    # Accumulate sums
    color_lightness_sums += np.array(color['lightness'])

# Loop through each gray in the array (to lazy to write a function for duplicate code)
for color in grays:
    # Determine the line color
    line_color = color_map.get(color['color'], color['color'])  # Use mapped color or original
    # Plot the lightness array for the current color
    plt.plot(color['lightness'], color=line_color)
    # Accumulate sums
    gray_lightness_sums += np.array(color['lightness'])

# Calculate the average lightness 
average_color_lightness = color_lightness_sums / color_count
average_gray_lightness = gray_lightness_sums / gray_count

# Plot the average lightness
plt.plot(average_color_lightness, color='black', linestyle='--')
plt.plot(average_gray_lightness, color='black', linestyle='--')

# Adding title and labels
plt.title('Lightness of Colors')
plt.xlabel('Index')
plt.ylabel('Lightness')

# Show the plot
plt.show()

# Print the average a
print(json.dumps({
  "avgGray": average_gray_lightness.tolist(), 
  "avgColor": average_color_lightness.tolist()
}, sort_keys=True, indent=2))