Coding Projects

Color Generation Using the Golden Ratio

For my final in my Color Theory class, I was doing some research into how math and color theory can overlap. One common intersection between math and art/design is with the Golden Ratio. There is a Golden Ratio color palette that already exists here, and it uses the golden ratio to pick the numbers for each R, G, B value. However, I also found this article on using the Golden Ratio as an angle (the Golden Angle - 137 degrees), and how rotating by that angle around the color wheel can lead to "an infinite list of unique contrasting colors," but then the article asked me to create and account to read beyond three paragraphs.

I ran with the concept, and I decided to code a "color palette generator" where the user inputs their desired starting color, and the script returns the next five colors found by rotating 137 degrees around the HSL color wheel. By the 6th color, it returns to being very close to the same as the starting color, so I decided to end it at 5.
In this script, I converted hexadecimal colors to RGB value, and then the HSL values. Then I increased the Hue value of the HSL vector by 137 degrees and converted back. All this to say - the saturation and lightness of the colors will remain at the same setting, and the hue is what changes.

The idea was to see how these colors look together - whether they could consistently go together as a "palette," whether they seem random, or whether they contrast. This is definitely not a perfect tool, and has a few glitches, but overall, it does the job of exploring how the Golden Angle colors relate to each other.

Coded using Python, HTML, and PyScript.

Usage notes: This will give you an error pop up if you select black (#00000). It occasionally will glitch and have the tones be off between colors, but selecting another color will usually reset it. If another unknown error message pops up, reloading the page will remove it.

Simple text display program using PyScript

Choose your starting color here:

import math import sys import js from js import document from pyodide.ffi.wrappers import add_event_listener def hex_to_rgb(hex_value): if "#" not in hex_value: hex_value = "#" + hex_value while 7> len(hex_value): hex_value = "#0" + hex_value[1:] r = hex_value[1] + hex_value[2] g = hex_value[3] + hex_value[4] b = hex_value[5] + hex_value[6] r = int(r,16) g = int(g,16) b = int(b,16) rgb_value = [r,g,b] return rgb_value def rgb_to_hsl(rgb_value): r = rgb_value[0] g = rgb_value[1] b = rgb_value[2] if r >= g and g>=b: hue = 60 * ((g-b)/(r-b)) elif g > r and r >=b: hue = 60 * (2 - (r-b)/(g-b)) elif g>=b and b > r: hue = 60 * (2 + (b-r)/(g-r)) elif b > g and g > r: hue = 60 * (4 - (g-r)/(b-r)) elif b > r and r>=g: hue = 60 * (4 + (r-g)/(b-g)) elif r >= b and b > g: hue = 60 * (6 - (b-g)/(r-g)) rl = r/255 gl = g/255 bl = b/255 l_list = [rl,gl,bl] l = .5 * (max(l_list) + min(l_list)) if l == 100: s = 0 else: s = (max(l_list) - min(l_list)) / (1-abs((2*l)-1)) s = math.floor(s*100) l = math.floor(l*100) hsl_value = [hue,s, l] return hsl_value def rgb_to_hex(rgb_value): r = hex(int(rgb_value[0]))[2:] g = hex(int(rgb_value[1]))[2:] b = hex(int(rgb_value[2]))[2:] if r == "0": r = "00" if g == "0": g = "00" if b == "0": b = "00" hex_value = str(r) + str(g) + str(b) return hex_value def rgb_get_hue(rgb_value): r = rgb_value[0] g = rgb_value[1] b = rgb_value[2] if r >= g and g>=b: hue = 60 * ((g-b)/(r-b)) elif g > r and r >=b: hue = 60 * (2 - (r-b)/(g-b)) elif g>=b and b > r: hue = 60 * (2 + (b-r)/(g-r)) elif b > g and g > r: hue = 60 * (4 - (g-r)/(b-r)) elif b > r and r>=g: hue = 60 * (4 + (r-g)/(b-g)) elif r >= b and b > g: hue = 60 * (6 - (b-g)/(r-g)) return hue def hsl_to_rgb(hsl_value): h = hsl_value[0] s = hsl_value[1]/100 l = hsl_value[2]/100 d = s*(1 - abs((2*l)-1)) m = 255*(l - (d*.5)) x = d * (1 - abs(((h/60)%2) -1)) if h>=0 and 60>h: r = (255*d) + m g = (255*x) + m b = m elif h >=60 and 120>h: r = (255*x) + m g = (255*d) + m b = m elif h >= 120 and 180>h: r = m g = (255*d) + m b = (255*x) + m elif h >=180 and 240>h: r = m g = (255*x) + m b = (255*d) + m elif h >=240 and 300>h: r = (255*x) + m g = m b = (255*d) + m elif h >= 300 and 360>h: r = (255*d) + m g = m b = (255*x) + m rgb_value = [r,g,b] return rgb_value def main(): first_color = Element("value") if document.getElementById("value").innerText is not None: hex_value = document.getElementById("value").innerText #print(hex_value) hex_values_list = [] for i in range (1,5): rgb = hex_to_rgb(hex_value) hsl_value = rgb_to_hsl(rgb) hue = hsl_value[0] #rgb_get_hue(rgb) new_hue = round(hue + 137) % 360 new_hsl_value = [new_hue, hsl_value[1], hsl_value[2]] new_rgb = hsl_to_rgb(new_hsl_value) new_hex = rgb_to_hex(new_rgb) hex_values_list.append("#" + new_hex) hex_value = "#" + new_hex pyscript.write('value2',hex_values_list[0]) document.getElementById("value2").style.backgroundColor = document.getElementById("value2").innerText pyscript.write('value3',hex_values_list[1]) document.getElementById("value3").style.backgroundColor = document.getElementById("value3").innerText pyscript.write('value4',hex_values_list[2]) document.getElementById("value4").style.backgroundColor = document.getElementById("value4").innerText pyscript.write('value5',hex_values_list[3]) document.getElementById("value5").style.backgroundColor = document.getElementById("value5").innerText