Skip to content

Instantly share code, notes, and snippets.

@willywongi

willywongi/create-palette.py

Created April 23, 2025 16:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save willywongi/e7fdcb6919541e1c0612131ad3cc4696 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save willywongi/e7fdcb6919541e1c0612131ad3cc4696 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. willywongi revised this gist Apr 23, 2025. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions run-with-uv.sh
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    uv run --script create-palette.py
  2. willywongi created this gist Apr 23, 2025.
    64 changes: 64 additions & 0 deletions create-palette.py
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    # /// script
    # requires-python = ">=3.12"
    # dependencies = [
    # "coloraide~=4.5",
    # ]
    # ///
    from coloraide import Color, stop

    BLACK = Color("black")
    WHITE = Color("white")

    DEFAULT_PALETTE = {
    "red": Color("#dc3146"),
    "orange": Color("#f46a45"),
    "yellow": Color("#fac22b"),
    "green": Color("#00ac49"),
    "cyan": Color("#2fbedc"),
    "blue": Color("#0071ec"),
    "indigo": Color("#6163f2"),
    "purple": Color("#9951db"),
    "pink": Color("#c84382"),
    "gray": Color("#545868"),
    }

    CUSTOM_PALETTE = {
    "red": Color("#E02321"),
    "yellow": Color("#FFE063"),
    "blue": Color("#2C4194"),
    "pink": Color("#E78DA7"),
    "indigo": Color("#DCE4FF"),
    }

    NAME_COLOR = {
    **DEFAULT_PALETTE,
    **CUSTOM_PALETTE
    }

    COLOR_STOP = {
    name: int(color.convert("oklch")["l"] * 10) / 10
    for name, color in NAME_COLOR.items()
    }

    LIGHTNESS_TOKENS = [0.95, 0.90, 0.80, 0.70, 0.60, 0.50, 0.40, 0.30, 0.20, 0.10, 0.05]

    TEMPLATE = "--wa-color-{name}-{lightness_token:02.0f}: {css_color} /* {oklch_color} */;"

    for name, color in NAME_COLOR.items():
    color_stop = COLOR_STOP[name]
    interpolator = Color.interpolate(
    [BLACK, stop(color, color_stop), WHITE],
    space="oklch",
    #method="continuous",
    )
    for lightness_token in LIGHTNESS_TOKENS:
    color_token = interpolator(lightness_token)
    print(TEMPLATE.format(
    name=name,
    lightness_token=lightness_token*100,
    css_color=color_token.convert("srgb").to_string(hex=True, upper=False),
    oklch_color=color_token.to_string(percent=True)
    ))
    print(f"--wa-color-{name}: var(--wa-color-{name}-{color_stop * 100:02.0f});")
    print(f"--wa-color-{name}-key: {color_stop * 100:02.0f};")
    print()