From cd2afdd80235d04d93d6c133b26acd3f546fcc15 Mon Sep 17 00:00:00 2001
From: Joshua Thijssen <jthijssen@noxlogic.nl>
Date: Sun, 19 Jul 2026 20:22:05 +0200
Subject: [PATCH] Moved CSS named-color table to gosub_shared so inline styles
 can resolve named colors

---
 Cargo.lock                                    |   1 -
 crates/gosub_css3/Cargo.toml                  |   1 -
 crates/gosub_css3/src/colors.rs               | 690 +-----------------
 .../src/common/document/inline_style.rs       |  46 +-
 crates/gosub_shared/src/css_colors.rs         | 673 +++++++++++++++++
 crates/gosub_shared/src/lib.rs                |   1 +
 6 files changed, 707 insertions(+), 705 deletions(-)
 create mode 100644 crates/gosub_shared/src/css_colors.rs

diff --git a/Cargo.lock b/Cargo.lock
index 81ff29c83..09135ad04 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3298,7 +3298,6 @@ dependencies = [
  "gosub_interface",
  "gosub_shared",
  "indexmap",
- "lazy_static",
  "log",
  "nom 8.0.0",
  "serde",
diff --git a/crates/gosub_css3/Cargo.toml b/crates/gosub_css3/Cargo.toml
index 707019dfe..92cdaf673 100644
--- a/crates/gosub_css3/Cargo.toml
+++ b/crates/gosub_css3/Cargo.toml
@@ -9,7 +9,6 @@ description = "CSS3 parser for Gosub"
 [dependencies]
 gosub_shared = { version = "0.1.1", registry = "gosub", path = "../gosub_shared", features = [] }
 gosub_interface = { version = "0.1.1", registry = "gosub", path = "../gosub_interface", features = [] }
-lazy_static = { workspace = true }
 log = { workspace = true }
 anyhow = { workspace = true, features = [] }
 colors-transform = "0.2.11"
diff --git a/crates/gosub_css3/src/colors.rs b/crates/gosub_css3/src/colors.rs
index 93e02f8f9..45f64d871 100644
--- a/crates/gosub_css3/src/colors.rs
+++ b/crates/gosub_css3/src/colors.rs
@@ -4,15 +4,12 @@ use std::str::FromStr;
 
 use colors_transform::Color;
 use colors_transform::{AlphaColor, Hsl, Rgb};
-use lazy_static::lazy_static;
-// Values for this table is taken from https://www.w3.org/TR/CSS21/propidx.html
-// Probably not the complete list, but it will do for now
-
-/// A list of CSS color names
-pub struct CssColorEntry {
-    pub name: &'static str,
-    pub value: &'static str,
-}
+
+// The named-color table lives in gosub_shared so the render pipeline can resolve
+// the same names without depending on this crate; re-exported here for existing users.
+pub use gosub_shared::css_colors::{
+    is_named_color, is_system_color, named_color_hex, CssColorEntry, CSS_COLORNAMES, CSS_SYSTEM_COLOR_NAMES,
+};
 
 /// A RGB color with alpha channel
 #[derive(Clone, Copy, Debug, PartialEq)]
@@ -102,7 +99,7 @@ impl From<&str> for RgbColor {
             }
         }
 
-        get_hex_color_from_name(value).map_or(RgbColor::default(), parse_hex)
+        named_color_hex(value).map_or(RgbColor::default(), parse_hex)
     }
 }
 
@@ -207,15 +204,6 @@ pub fn oklab_to_srgb(l: f32, a: f32, b: f32) -> (f32, f32, f32) {
     )
 }
 
-fn get_hex_color_from_name(color_name: &str) -> Option<&str> {
-    Some(
-        crate::colors::CSS_COLORNAMES
-            .iter()
-            .find(|entry| entry.name == color_name)?
-            .value,
-    )
-}
-
 fn is_hex(value: &str) -> bool {
     // Check if the input is empty or doesn't start with '#'
     if value.is_empty() || !value.starts_with('#') {
@@ -333,670 +321,6 @@ fn convert_from_hex_str_to_vec_of_ints(hex_value: &str, hex_size: usize) -> Vec<
     }
 }
 
-lazy_static! {
-    pub static ref CSS_COLORNAMES: &'static [CssColorEntry] = &[
-        CssColorEntry {
-            name: "aliceblue",
-            value: "#f0f8ff",
-        },
-        CssColorEntry {
-            name: "antiquewhite",
-            value: "#faebd7",
-        },
-        CssColorEntry {
-            name: "aqua",
-            value: "#00ffff",
-        },
-        CssColorEntry {
-            name: "aquamarine",
-            value: "#7fffd4",
-        },
-        CssColorEntry {
-            name: "azure",
-            value: "#f0ffff",
-        },
-        CssColorEntry {
-            name: "beige",
-            value: "#f5f5dc",
-        },
-        CssColorEntry {
-            name: "bisque",
-            value: "#ffe4c4",
-        },
-        CssColorEntry {
-            name: "black",
-            value: "#000000",
-        },
-        CssColorEntry {
-            name: "blanchedalmond",
-            value: "#ffebcd",
-        },
-        CssColorEntry {
-            name: "blue",
-            value: "#0000ff",
-        },
-        CssColorEntry {
-            name: "blueviolet",
-            value: "#8a2be2",
-        },
-        CssColorEntry {
-            name: "brown",
-            value: "#a52a2a",
-        },
-        CssColorEntry {
-            name: "burlywood",
-            value: "#deb887",
-        },
-        CssColorEntry {
-            name: "cadetblue",
-            value: "#5f9ea0",
-        },
-        CssColorEntry {
-            name: "chartreuse",
-            value: "#7fff00",
-        },
-        CssColorEntry {
-            name: "chocolate",
-            value: "#d2691e",
-        },
-        CssColorEntry {
-            name: "coral",
-            value: "#ff7f50",
-        },
-        CssColorEntry {
-            name: "cornflowerblue",
-            value: "#6495ed",
-        },
-        CssColorEntry {
-            name: "cornsilk",
-            value: "#fff8dc",
-        },
-        CssColorEntry {
-            name: "crimson",
-            value: "#dc143c",
-        },
-        CssColorEntry {
-            name: "cyan",
-            value: "#00ffff",
-        },
-        CssColorEntry {
-            name: "darkblue",
-            value: "#00008b",
-        },
-        CssColorEntry {
-            name: "darkcyan",
-            value: "#008b8b",
-        },
-        CssColorEntry {
-            name: "darkgoldenrod",
-            value: "#b8860b",
-        },
-        CssColorEntry {
-            name: "darkgray",
-            value: "#a9a9a9",
-        },
-        CssColorEntry {
-            name: "darkgreen",
-            value: "#006400",
-        },
-        CssColorEntry {
-            name: "darkgrey",
-            value: "#a9a9a9",
-        },
-        CssColorEntry {
-            name: "darkkhaki",
-            value: "#bdb76b",
-        },
-        CssColorEntry {
-            name: "darkmagenta",
-            value: "#8b008b",
-        },
-        CssColorEntry {
-            name: "darkolivegreen",
-            value: "#556b2f",
-        },
-        CssColorEntry {
-            name: "darkorange",
-            value: "#ff8c00",
-        },
-        CssColorEntry {
-            name: "darkorchid",
-            value: "#9932cc",
-        },
-        CssColorEntry {
-            name: "darkred",
-            value: "#8b0000",
-        },
-        CssColorEntry {
-            name: "darksalmon",
-            value: "#e9967a",
-        },
-        CssColorEntry {
-            name: "darkseagreen",
-            value: "#8fbc8f",
-        },
-        CssColorEntry {
-            name: "darkslateblue",
-            value: "#483d8b",
-        },
-        CssColorEntry {
-            name: "darkslategray",
-            value: "#2f4f4f",
-        },
-        CssColorEntry {
-            name: "darkslategrey",
-            value: "#2f4f4f",
-        },
-        CssColorEntry {
-            name: "darkturquoise",
-            value: "#00ced1",
-        },
-        CssColorEntry {
-            name: "darkviolet",
-            value: "#9400d3",
-        },
-        CssColorEntry {
-            name: "deeppink",
-            value: "#ff1493",
-        },
-        CssColorEntry {
-            name: "deepskyblue",
-            value: "#00bfff",
-        },
-        CssColorEntry {
-            name: "dimgray",
-            value: "#696969",
-        },
-        CssColorEntry {
-            name: "dimgrey",
-            value: "#696969",
-        },
-        CssColorEntry {
-            name: "dodgerblue",
-            value: "#1e90ff",
-        },
-        CssColorEntry {
-            name: "firebrick",
-            value: "#b22222",
-        },
-        CssColorEntry {
-            name: "floralwhite",
-            value: "#fffaf0",
-        },
-        CssColorEntry {
-            name: "forestgreen",
-            value: "#228b22",
-        },
-        CssColorEntry {
-            name: "fuchsia",
-            value: "#ff00ff",
-        },
-        CssColorEntry {
-            name: "gainsboro",
-            value: "#dcdcdc",
-        },
-        CssColorEntry {
-            name: "ghostwhite",
-            value: "#f8f8ff",
-        },
-        CssColorEntry {
-            name: "gold",
-            value: "#ffd700",
-        },
-        CssColorEntry {
-            name: "goldenrod",
-            value: "#daa520",
-        },
-        CssColorEntry {
-            name: "gray",
-            value: "#808080",
-        },
-        CssColorEntry {
-            name: "green",
-            value: "#008000",
-        },
-        CssColorEntry {
-            name: "greenyellow",
-            value: "#adff2f",
-        },
-        CssColorEntry {
-            name: "grey",
-            value: "#808080",
-        },
-        CssColorEntry {
-            name: "honeydew",
-            value: "#f0fff0",
-        },
-        CssColorEntry {
-            name: "hotpink",
-            value: "#ff69b4",
-        },
-        CssColorEntry {
-            name: "indianred",
-            value: "#cd5c5c",
-        },
-        CssColorEntry {
-            name: "indigo",
-            value: "#4b0082",
-        },
-        CssColorEntry {
-            name: "ivory",
-            value: "#fffff0",
-        },
-        CssColorEntry {
-            name: "khaki",
-            value: "#f0e68c",
-        },
-        CssColorEntry {
-            name: "lavender",
-            value: "#e6e6fa",
-        },
-        CssColorEntry {
-            name: "lavenderblush",
-            value: "#fff0f5",
-        },
-        CssColorEntry {
-            name: "lawngreen",
-            value: "#7cfc00",
-        },
-        CssColorEntry {
-            name: "lemonchiffon",
-            value: "#fffacd",
-        },
-        CssColorEntry {
-            name: "lightblue",
-            value: "#add8e6",
-        },
-        CssColorEntry {
-            name: "lightcoral",
-            value: "#f08080",
-        },
-        CssColorEntry {
-            name: "lightcyan",
-            value: "#e0ffff",
-        },
-        CssColorEntry {
-            name: "lightgoldenrodyellow",
-            value: "#fafad2",
-        },
-        CssColorEntry {
-            name: "lightgray",
-            value: "#d3d3d3",
-        },
-        CssColorEntry {
-            name: "lightgreen",
-            value: "#90ee90",
-        },
-        CssColorEntry {
-            name: "lightgrey",
-            value: "#d3d3d3",
-        },
-        CssColorEntry {
-            name: "lightpink",
-            value: "#ffb6c1",
-        },
-        CssColorEntry {
-            name: "lightsalmon",
-            value: "#ffa07a",
-        },
-        CssColorEntry {
-            name: "lightseagreen",
-            value: "#20b2aa",
-        },
-        CssColorEntry {
-            name: "lightskyblue",
-            value: "#87cefa",
-        },
-        CssColorEntry {
-            name: "lightslategray",
-            value: "#778899",
-        },
-        CssColorEntry {
-            name: "lightslategrey",
-            value: "#778899",
-        },
-        CssColorEntry {
-            name: "lightsteelblue",
-            value: "#b0c4de",
-        },
-        CssColorEntry {
-            name: "lightyellow",
-            value: "#ffffe0",
-        },
-        CssColorEntry {
-            name: "lime",
-            value: "#00ff00",
-        },
-        CssColorEntry {
-            name: "limegreen",
-            value: "#32cd32",
-        },
-        CssColorEntry {
-            name: "linen",
-            value: "#faf0e6",
-        },
-        CssColorEntry {
-            name: "magenta",
-            value: "#ff00ff",
-        },
-        CssColorEntry {
-            name: "maroon",
-            value: "#800000",
-        },
-        CssColorEntry {
-            name: "mediumaquamarine",
-            value: "#66cdaa",
-        },
-        CssColorEntry {
-            name: "mediumblue",
-            value: "#0000cd",
-        },
-        CssColorEntry {
-            name: "mediumorchid",
-            value: "#ba55d3",
-        },
-        CssColorEntry {
-            name: "mediumpurple",
-            value: "#9370db",
-        },
-        CssColorEntry {
-            name: "mediumseagreen",
-            value: "#3cb371",
-        },
-        CssColorEntry {
-            name: "mediumslateblue",
-            value: "#7b68ee",
-        },
-        CssColorEntry {
-            name: "mediumspringgreen",
-            value: "#00fa9a",
-        },
-        CssColorEntry {
-            name: "mediumturquoise",
-            value: "#48d1cc",
-        },
-        CssColorEntry {
-            name: "mediumvioletred",
-            value: "#c71585",
-        },
-        CssColorEntry {
-            name: "midnightblue",
-            value: "#191970",
-        },
-        CssColorEntry {
-            name: "mintcream",
-            value: "#f5fffa",
-        },
-        CssColorEntry {
-            name: "mistyrose",
-            value: "#ffe4e1",
-        },
-        CssColorEntry {
-            name: "moccasin",
-            value: "#ffe4b5",
-        },
-        CssColorEntry {
-            name: "navajowhite",
-            value: "#ffdead",
-        },
-        CssColorEntry {
-            name: "navy",
-            value: "#000080",
-        },
-        CssColorEntry {
-            name: "oldlace",
-            value: "#fdf5e6",
-        },
-        CssColorEntry {
-            name: "olive",
-            value: "#808000",
-        },
-        CssColorEntry {
-            name: "olivedrab",
-            value: "#6b8e23",
-        },
-        CssColorEntry {
-            name: "orange",
-            value: "#ffa500",
-        },
-        CssColorEntry {
-            name: "orangered",
-            value: "#ff4500",
-        },
-        CssColorEntry {
-            name: "orchid",
-            value: "#da70d6",
-        },
-        CssColorEntry {
-            name: "palegoldenrod",
-            value: "#eee8aa",
-        },
-        CssColorEntry {
-            name: "palegreen",
-            value: "#98fb98",
-        },
-        CssColorEntry {
-            name: "paleturquoise",
-            value: "#afeeee",
-        },
-        CssColorEntry {
-            name: "palevioletred",
-            value: "#db7093",
-        },
-        CssColorEntry {
-            name: "papayawhip",
-            value: "#ffefd5",
-        },
-        CssColorEntry {
-            name: "peachpuff",
-            value: "#ffdab9",
-        },
-        CssColorEntry {
-            name: "peru",
-            value: "#cd853f",
-        },
-        CssColorEntry {
-            name: "pink",
-            value: "#ffc0cb",
-        },
-        CssColorEntry {
-            name: "plum",
-            value: "#dda0dd",
-        },
-        CssColorEntry {
-            name: "powderblue",
-            value: "#b0e0e6",
-        },
-        CssColorEntry {
-            name: "purple",
-            value: "#800080",
-        },
-        CssColorEntry {
-            name: "red",
-            value: "#ff0000",
-        },
-        CssColorEntry {
-            name: "rosybrown",
-            value: "#bc8f8f",
-        },
-        CssColorEntry {
-            name: "royalblue",
-            value: "#4169e1",
-        },
-        CssColorEntry {
-            name: "saddlebrown",
-            value: "#8b4513",
-        },
-        CssColorEntry {
-            name: "salmon",
-            value: "#fa8072",
-        },
-        CssColorEntry {
-            name: "sandybrown",
-            value: "#f4a460",
-        },
-        CssColorEntry {
-            name: "seagreen",
-            value: "#2e8b57",
-        },
-        CssColorEntry {
-            name: "seashell",
-            value: "#fff5ee",
-        },
-        CssColorEntry {
-            name: "sienna",
-            value: "#a0522d",
-        },
-        CssColorEntry {
-            name: "silver",
-            value: "#c0c0c0",
-        },
-        CssColorEntry {
-            name: "skyblue",
-            value: "#87ceeb",
-        },
-        CssColorEntry {
-            name: "slateblue",
-            value: "#6a5acd",
-        },
-        CssColorEntry {
-            name: "slategray",
-            value: "#708090",
-        },
-        CssColorEntry {
-            name: "slategrey",
-            value: "#708090",
-        },
-        CssColorEntry {
-            name: "snow",
-            value: "#fffafa",
-        },
-        CssColorEntry {
-            name: "springgreen",
-            value: "#00ff7f",
-        },
-        CssColorEntry {
-            name: "steelblue",
-            value: "#4682b4",
-        },
-        CssColorEntry {
-            name: "tan",
-            value: "#d2b48c",
-        },
-        CssColorEntry {
-            name: "teal",
-            value: "#008080",
-        },
-        CssColorEntry {
-            name: "thistle",
-            value: "#d8bfd8",
-        },
-        CssColorEntry {
-            name: "tomato",
-            value: "#ff6347",
-        },
-        CssColorEntry {
-            name: "turquoise",
-            value: "#40e0d0",
-        },
-        CssColorEntry {
-            name: "violet",
-            value: "#ee82ee",
-        },
-        CssColorEntry {
-            name: "wheat",
-            value: "#f5deb3",
-        },
-        CssColorEntry {
-            name: "white",
-            value: "#ffffff",
-        },
-        CssColorEntry {
-            name: "whitesmoke",
-            value: "#f5f5f5",
-        },
-        CssColorEntry {
-            name: "yellow",
-            value: "#ffff00",
-        },
-        CssColorEntry {
-            name: "yellowgreen",
-            value: "#9acd32",
-        },
-        CssColorEntry {
-            name: "rebeccapurple",
-            value: "#663399",
-        },
-    ];
-}
-
-// CSS keywords are ASCII case-insensitive, so `graytext` and `RED` are as valid as
-// `GrayText` and `red`.
-#[must_use]
-pub fn is_system_color(name: &str) -> bool {
-    for entry in &CSS_SYSTEM_COLOR_NAMES {
-        if entry.eq_ignore_ascii_case(name) {
-            return true;
-        }
-    }
-    false
-}
-
-#[must_use]
-pub fn is_named_color(name: &str) -> bool {
-    for entry in *CSS_COLORNAMES {
-        if entry.name.eq_ignore_ascii_case(name) {
-            return true;
-        }
-    }
-    false
-}
-
-pub const CSS_SYSTEM_COLOR_NAMES: [&str; 42] = [
-    "AccentColor",
-    "AccentColorText",
-    "ActiveText",
-    "ButtonBorder",
-    "ButtonFace",
-    "ButtonText",
-    "Canvas",
-    "CanvasText",
-    "Field",
-    "FieldText",
-    "GrayText",
-    "Highlight",
-    "HighlightText",
-    "LinkText",
-    "Mark",
-    "MarkText",
-    "SelectedItem",
-    "SelectedItemText",
-    "VisitedText",
-    "ActiveBorder",
-    "ActiveCaption",
-    "AppWorkspace",
-    "Background",
-    "ButtonHighlight",
-    "ButtonShadow",
-    "CaptionText",
-    "InactiveBorder",
-    "InactiveCaption",
-    "InactiveCaptionText",
-    "InfoBackground",
-    "InfoText",
-    "Menu",
-    "MenuText",
-    "Scrollbar",
-    "ThreeDDarkShadow",
-    "ThreeDFace",
-    "ThreeDHighlight",
-    "ThreeDLightShadow",
-    "ThreeDShadow",
-    "Window",
-    "WindowFrame",
-    "WindowText",
-];
-
 #[cfg(test)]
 mod tests {
     use crate::colors::{convert_from_hex_str_to_vec_of_ints, is_hex};
diff --git a/crates/gosub_render_pipeline/src/common/document/inline_style.rs b/crates/gosub_render_pipeline/src/common/document/inline_style.rs
index 74d1d0566..b62585972 100644
--- a/crates/gosub_render_pipeline/src/common/document/inline_style.rs
+++ b/crates/gosub_render_pipeline/src/common/document/inline_style.rs
@@ -2,6 +2,7 @@ use crate::common::document::style::{
     intern, BorderStyle, Display, FontWeight, NodeStyle, StyleProperty, TextAlign, TextWrap, Unit, Value,
 };
 use cow_utils::CowUtils;
+use gosub_shared::css_colors::named_color_hex;
 use std::collections::HashMap;
 
 /// Parses an inline `style` attribute value (e.g. `"color: red; width: 100px"`).
@@ -40,29 +41,15 @@ fn parse_background_color_token(value: &str) -> Option<Value> {
 
 fn parse_named_color(value: &str) -> Value {
     match value {
-        "black" => Value::Color(0, 0, 0, 255),
-        "white" => Value::Color(255, 255, 255, 255),
-        "red" => Value::Color(255, 0, 0, 255),
-        "green" => Value::Color(0, 128, 0, 255),
-        "blue" => Value::Color(0, 0, 255, 255),
-        "yellow" => Value::Color(255, 255, 0, 255),
-        "orange" => Value::Color(255, 165, 0, 255),
-        "purple" => Value::Color(128, 0, 128, 255),
-        "pink" => Value::Color(255, 192, 203, 255),
-        "gray" | "grey" => Value::Color(128, 128, 128, 255),
-        "silver" => Value::Color(192, 192, 192, 255),
-        "maroon" => Value::Color(128, 0, 0, 255),
-        "navy" => Value::Color(0, 0, 128, 255),
-        "teal" => Value::Color(0, 128, 128, 255),
-        "aqua" | "cyan" => Value::Color(0, 255, 255, 255),
-        "fuchsia" | "magenta" => Value::Color(255, 0, 255, 255),
-        "lime" => Value::Color(0, 255, 0, 255),
-        "olive" => Value::Color(128, 128, 0, 255),
-        "transparent" => Value::Color(0, 0, 0, 0),
+        // Not in the named-color table: not a color, but a fully transparent value.
+        s if s.eq_ignore_ascii_case("transparent") => Value::Color(0, 0, 0, 0),
         s if s.starts_with("rgb(") => parse_rgb(s),
         s if s.starts_with("rgba(") => parse_rgba(s),
         s if s.starts_with('#') => parse_hex_color(s),
-        _ => Value::Keyword(intern(value)),
+        _ => match named_color_hex(value) {
+            Some(hex) => parse_hex_color(hex),
+            None => Value::Keyword(intern(value)),
+        },
     }
 }
 
@@ -515,6 +502,25 @@ mod tests {
         assert_eq!(parse_css_url("url()"), None);
     }
 
+    #[test]
+    fn named_colors_resolve_via_shared_table() {
+        let style = parse_inline_style_attr("color: rebeccapurple");
+        assert!(matches!(
+            style.get_own(&StyleProperty::Color),
+            Some(Value::Color(0x66, 0x33, 0x99, 255))
+        ));
+
+        // An unknown name still falls through to a keyword instead of a bogus color.
+        let style = parse_inline_style_attr("color: notacolor");
+        assert!(matches!(style.get_own(&StyleProperty::Color), Some(Value::Keyword(_))));
+
+        let style = parse_inline_style_attr("background-color: transparent");
+        assert!(matches!(
+            style.get_own(&StyleProperty::BackgroundColor),
+            Some(Value::Color(0, 0, 0, 0))
+        ));
+    }
+
     #[test]
     fn var_inline_declaration_is_ignored() {
         // Dropped rather than stored as an invalid keyword that would paint black, so the
diff --git a/crates/gosub_shared/src/css_colors.rs b/crates/gosub_shared/src/css_colors.rs
new file mode 100644
index 000000000..5a181a5bc
--- /dev/null
+++ b/crates/gosub_shared/src/css_colors.rs
@@ -0,0 +1,673 @@
+//! Named CSS colors and system color keywords, shared by the CSS system and the
+//! render pipeline so both resolve names like `rebeccapurple` from the same table.
+
+/// A named CSS color and its hex value
+pub struct CssColorEntry {
+    pub name: &'static str,
+    pub value: &'static str,
+}
+
+/// The hex value (`"#rrggbb"`) for a named CSS color, matched case-insensitively
+/// as CSS keywords require. `None` when the name is not a CSS named color.
+#[must_use]
+pub fn named_color_hex(name: &str) -> Option<&'static str> {
+    CSS_COLORNAMES
+        .iter()
+        .find(|entry| entry.name.eq_ignore_ascii_case(name))
+        .map(|entry| entry.value)
+}
+
+// CSS keywords are ASCII case-insensitive, so `graytext` and `RED` are as valid as
+// `GrayText` and `red`.
+#[must_use]
+pub fn is_system_color(name: &str) -> bool {
+    CSS_SYSTEM_COLOR_NAMES
+        .iter()
+        .any(|entry| entry.eq_ignore_ascii_case(name))
+}
+
+#[must_use]
+pub fn is_named_color(name: &str) -> bool {
+    CSS_COLORNAMES.iter().any(|entry| entry.name.eq_ignore_ascii_case(name))
+}
+
+pub const CSS_SYSTEM_COLOR_NAMES: [&str; 42] = [
+    "AccentColor",
+    "AccentColorText",
+    "ActiveText",
+    "ButtonBorder",
+    "ButtonFace",
+    "ButtonText",
+    "Canvas",
+    "CanvasText",
+    "Field",
+    "FieldText",
+    "GrayText",
+    "Highlight",
+    "HighlightText",
+    "LinkText",
+    "Mark",
+    "MarkText",
+    "SelectedItem",
+    "SelectedItemText",
+    "VisitedText",
+    "ActiveBorder",
+    "ActiveCaption",
+    "AppWorkspace",
+    "Background",
+    "ButtonHighlight",
+    "ButtonShadow",
+    "CaptionText",
+    "InactiveBorder",
+    "InactiveCaption",
+    "InactiveCaptionText",
+    "InfoBackground",
+    "InfoText",
+    "Menu",
+    "MenuText",
+    "Scrollbar",
+    "ThreeDDarkShadow",
+    "ThreeDFace",
+    "ThreeDHighlight",
+    "ThreeDLightShadow",
+    "ThreeDShadow",
+    "Window",
+    "WindowFrame",
+    "WindowText",
+];
+
+// Values for this table are taken from https://www.w3.org/TR/css-color-4/#named-colors
+pub static CSS_COLORNAMES: &[CssColorEntry] = &[
+    CssColorEntry {
+        name: "aliceblue",
+        value: "#f0f8ff",
+    },
+    CssColorEntry {
+        name: "antiquewhite",
+        value: "#faebd7",
+    },
+    CssColorEntry {
+        name: "aqua",
+        value: "#00ffff",
+    },
+    CssColorEntry {
+        name: "aquamarine",
+        value: "#7fffd4",
+    },
+    CssColorEntry {
+        name: "azure",
+        value: "#f0ffff",
+    },
+    CssColorEntry {
+        name: "beige",
+        value: "#f5f5dc",
+    },
+    CssColorEntry {
+        name: "bisque",
+        value: "#ffe4c4",
+    },
+    CssColorEntry {
+        name: "black",
+        value: "#000000",
+    },
+    CssColorEntry {
+        name: "blanchedalmond",
+        value: "#ffebcd",
+    },
+    CssColorEntry {
+        name: "blue",
+        value: "#0000ff",
+    },
+    CssColorEntry {
+        name: "blueviolet",
+        value: "#8a2be2",
+    },
+    CssColorEntry {
+        name: "brown",
+        value: "#a52a2a",
+    },
+    CssColorEntry {
+        name: "burlywood",
+        value: "#deb887",
+    },
+    CssColorEntry {
+        name: "cadetblue",
+        value: "#5f9ea0",
+    },
+    CssColorEntry {
+        name: "chartreuse",
+        value: "#7fff00",
+    },
+    CssColorEntry {
+        name: "chocolate",
+        value: "#d2691e",
+    },
+    CssColorEntry {
+        name: "coral",
+        value: "#ff7f50",
+    },
+    CssColorEntry {
+        name: "cornflowerblue",
+        value: "#6495ed",
+    },
+    CssColorEntry {
+        name: "cornsilk",
+        value: "#fff8dc",
+    },
+    CssColorEntry {
+        name: "crimson",
+        value: "#dc143c",
+    },
+    CssColorEntry {
+        name: "cyan",
+        value: "#00ffff",
+    },
+    CssColorEntry {
+        name: "darkblue",
+        value: "#00008b",
+    },
+    CssColorEntry {
+        name: "darkcyan",
+        value: "#008b8b",
+    },
+    CssColorEntry {
+        name: "darkgoldenrod",
+        value: "#b8860b",
+    },
+    CssColorEntry {
+        name: "darkgray",
+        value: "#a9a9a9",
+    },
+    CssColorEntry {
+        name: "darkgreen",
+        value: "#006400",
+    },
+    CssColorEntry {
+        name: "darkgrey",
+        value: "#a9a9a9",
+    },
+    CssColorEntry {
+        name: "darkkhaki",
+        value: "#bdb76b",
+    },
+    CssColorEntry {
+        name: "darkmagenta",
+        value: "#8b008b",
+    },
+    CssColorEntry {
+        name: "darkolivegreen",
+        value: "#556b2f",
+    },
+    CssColorEntry {
+        name: "darkorange",
+        value: "#ff8c00",
+    },
+    CssColorEntry {
+        name: "darkorchid",
+        value: "#9932cc",
+    },
+    CssColorEntry {
+        name: "darkred",
+        value: "#8b0000",
+    },
+    CssColorEntry {
+        name: "darksalmon",
+        value: "#e9967a",
+    },
+    CssColorEntry {
+        name: "darkseagreen",
+        value: "#8fbc8f",
+    },
+    CssColorEntry {
+        name: "darkslateblue",
+        value: "#483d8b",
+    },
+    CssColorEntry {
+        name: "darkslategray",
+        value: "#2f4f4f",
+    },
+    CssColorEntry {
+        name: "darkslategrey",
+        value: "#2f4f4f",
+    },
+    CssColorEntry {
+        name: "darkturquoise",
+        value: "#00ced1",
+    },
+    CssColorEntry {
+        name: "darkviolet",
+        value: "#9400d3",
+    },
+    CssColorEntry {
+        name: "deeppink",
+        value: "#ff1493",
+    },
+    CssColorEntry {
+        name: "deepskyblue",
+        value: "#00bfff",
+    },
+    CssColorEntry {
+        name: "dimgray",
+        value: "#696969",
+    },
+    CssColorEntry {
+        name: "dimgrey",
+        value: "#696969",
+    },
+    CssColorEntry {
+        name: "dodgerblue",
+        value: "#1e90ff",
+    },
+    CssColorEntry {
+        name: "firebrick",
+        value: "#b22222",
+    },
+    CssColorEntry {
+        name: "floralwhite",
+        value: "#fffaf0",
+    },
+    CssColorEntry {
+        name: "forestgreen",
+        value: "#228b22",
+    },
+    CssColorEntry {
+        name: "fuchsia",
+        value: "#ff00ff",
+    },
+    CssColorEntry {
+        name: "gainsboro",
+        value: "#dcdcdc",
+    },
+    CssColorEntry {
+        name: "ghostwhite",
+        value: "#f8f8ff",
+    },
+    CssColorEntry {
+        name: "gold",
+        value: "#ffd700",
+    },
+    CssColorEntry {
+        name: "goldenrod",
+        value: "#daa520",
+    },
+    CssColorEntry {
+        name: "gray",
+        value: "#808080",
+    },
+    CssColorEntry {
+        name: "green",
+        value: "#008000",
+    },
+    CssColorEntry {
+        name: "greenyellow",
+        value: "#adff2f",
+    },
+    CssColorEntry {
+        name: "grey",
+        value: "#808080",
+    },
+    CssColorEntry {
+        name: "honeydew",
+        value: "#f0fff0",
+    },
+    CssColorEntry {
+        name: "hotpink",
+        value: "#ff69b4",
+    },
+    CssColorEntry {
+        name: "indianred",
+        value: "#cd5c5c",
+    },
+    CssColorEntry {
+        name: "indigo",
+        value: "#4b0082",
+    },
+    CssColorEntry {
+        name: "ivory",
+        value: "#fffff0",
+    },
+    CssColorEntry {
+        name: "khaki",
+        value: "#f0e68c",
+    },
+    CssColorEntry {
+        name: "lavender",
+        value: "#e6e6fa",
+    },
+    CssColorEntry {
+        name: "lavenderblush",
+        value: "#fff0f5",
+    },
+    CssColorEntry {
+        name: "lawngreen",
+        value: "#7cfc00",
+    },
+    CssColorEntry {
+        name: "lemonchiffon",
+        value: "#fffacd",
+    },
+    CssColorEntry {
+        name: "lightblue",
+        value: "#add8e6",
+    },
+    CssColorEntry {
+        name: "lightcoral",
+        value: "#f08080",
+    },
+    CssColorEntry {
+        name: "lightcyan",
+        value: "#e0ffff",
+    },
+    CssColorEntry {
+        name: "lightgoldenrodyellow",
+        value: "#fafad2",
+    },
+    CssColorEntry {
+        name: "lightgray",
+        value: "#d3d3d3",
+    },
+    CssColorEntry {
+        name: "lightgreen",
+        value: "#90ee90",
+    },
+    CssColorEntry {
+        name: "lightgrey",
+        value: "#d3d3d3",
+    },
+    CssColorEntry {
+        name: "lightpink",
+        value: "#ffb6c1",
+    },
+    CssColorEntry {
+        name: "lightsalmon",
+        value: "#ffa07a",
+    },
+    CssColorEntry {
+        name: "lightseagreen",
+        value: "#20b2aa",
+    },
+    CssColorEntry {
+        name: "lightskyblue",
+        value: "#87cefa",
+    },
+    CssColorEntry {
+        name: "lightslategray",
+        value: "#778899",
+    },
+    CssColorEntry {
+        name: "lightslategrey",
+        value: "#778899",
+    },
+    CssColorEntry {
+        name: "lightsteelblue",
+        value: "#b0c4de",
+    },
+    CssColorEntry {
+        name: "lightyellow",
+        value: "#ffffe0",
+    },
+    CssColorEntry {
+        name: "lime",
+        value: "#00ff00",
+    },
+    CssColorEntry {
+        name: "limegreen",
+        value: "#32cd32",
+    },
+    CssColorEntry {
+        name: "linen",
+        value: "#faf0e6",
+    },
+    CssColorEntry {
+        name: "magenta",
+        value: "#ff00ff",
+    },
+    CssColorEntry {
+        name: "maroon",
+        value: "#800000",
+    },
+    CssColorEntry {
+        name: "mediumaquamarine",
+        value: "#66cdaa",
+    },
+    CssColorEntry {
+        name: "mediumblue",
+        value: "#0000cd",
+    },
+    CssColorEntry {
+        name: "mediumorchid",
+        value: "#ba55d3",
+    },
+    CssColorEntry {
+        name: "mediumpurple",
+        value: "#9370db",
+    },
+    CssColorEntry {
+        name: "mediumseagreen",
+        value: "#3cb371",
+    },
+    CssColorEntry {
+        name: "mediumslateblue",
+        value: "#7b68ee",
+    },
+    CssColorEntry {
+        name: "mediumspringgreen",
+        value: "#00fa9a",
+    },
+    CssColorEntry {
+        name: "mediumturquoise",
+        value: "#48d1cc",
+    },
+    CssColorEntry {
+        name: "mediumvioletred",
+        value: "#c71585",
+    },
+    CssColorEntry {
+        name: "midnightblue",
+        value: "#191970",
+    },
+    CssColorEntry {
+        name: "mintcream",
+        value: "#f5fffa",
+    },
+    CssColorEntry {
+        name: "mistyrose",
+        value: "#ffe4e1",
+    },
+    CssColorEntry {
+        name: "moccasin",
+        value: "#ffe4b5",
+    },
+    CssColorEntry {
+        name: "navajowhite",
+        value: "#ffdead",
+    },
+    CssColorEntry {
+        name: "navy",
+        value: "#000080",
+    },
+    CssColorEntry {
+        name: "oldlace",
+        value: "#fdf5e6",
+    },
+    CssColorEntry {
+        name: "olive",
+        value: "#808000",
+    },
+    CssColorEntry {
+        name: "olivedrab",
+        value: "#6b8e23",
+    },
+    CssColorEntry {
+        name: "orange",
+        value: "#ffa500",
+    },
+    CssColorEntry {
+        name: "orangered",
+        value: "#ff4500",
+    },
+    CssColorEntry {
+        name: "orchid",
+        value: "#da70d6",
+    },
+    CssColorEntry {
+        name: "palegoldenrod",
+        value: "#eee8aa",
+    },
+    CssColorEntry {
+        name: "palegreen",
+        value: "#98fb98",
+    },
+    CssColorEntry {
+        name: "paleturquoise",
+        value: "#afeeee",
+    },
+    CssColorEntry {
+        name: "palevioletred",
+        value: "#db7093",
+    },
+    CssColorEntry {
+        name: "papayawhip",
+        value: "#ffefd5",
+    },
+    CssColorEntry {
+        name: "peachpuff",
+        value: "#ffdab9",
+    },
+    CssColorEntry {
+        name: "peru",
+        value: "#cd853f",
+    },
+    CssColorEntry {
+        name: "pink",
+        value: "#ffc0cb",
+    },
+    CssColorEntry {
+        name: "plum",
+        value: "#dda0dd",
+    },
+    CssColorEntry {
+        name: "powderblue",
+        value: "#b0e0e6",
+    },
+    CssColorEntry {
+        name: "purple",
+        value: "#800080",
+    },
+    CssColorEntry {
+        name: "red",
+        value: "#ff0000",
+    },
+    CssColorEntry {
+        name: "rosybrown",
+        value: "#bc8f8f",
+    },
+    CssColorEntry {
+        name: "royalblue",
+        value: "#4169e1",
+    },
+    CssColorEntry {
+        name: "saddlebrown",
+        value: "#8b4513",
+    },
+    CssColorEntry {
+        name: "salmon",
+        value: "#fa8072",
+    },
+    CssColorEntry {
+        name: "sandybrown",
+        value: "#f4a460",
+    },
+    CssColorEntry {
+        name: "seagreen",
+        value: "#2e8b57",
+    },
+    CssColorEntry {
+        name: "seashell",
+        value: "#fff5ee",
+    },
+    CssColorEntry {
+        name: "sienna",
+        value: "#a0522d",
+    },
+    CssColorEntry {
+        name: "silver",
+        value: "#c0c0c0",
+    },
+    CssColorEntry {
+        name: "skyblue",
+        value: "#87ceeb",
+    },
+    CssColorEntry {
+        name: "slateblue",
+        value: "#6a5acd",
+    },
+    CssColorEntry {
+        name: "slategray",
+        value: "#708090",
+    },
+    CssColorEntry {
+        name: "slategrey",
+        value: "#708090",
+    },
+    CssColorEntry {
+        name: "snow",
+        value: "#fffafa",
+    },
+    CssColorEntry {
+        name: "springgreen",
+        value: "#00ff7f",
+    },
+    CssColorEntry {
+        name: "steelblue",
+        value: "#4682b4",
+    },
+    CssColorEntry {
+        name: "tan",
+        value: "#d2b48c",
+    },
+    CssColorEntry {
+        name: "teal",
+        value: "#008080",
+    },
+    CssColorEntry {
+        name: "thistle",
+        value: "#d8bfd8",
+    },
+    CssColorEntry {
+        name: "tomato",
+        value: "#ff6347",
+    },
+    CssColorEntry {
+        name: "turquoise",
+        value: "#40e0d0",
+    },
+    CssColorEntry {
+        name: "violet",
+        value: "#ee82ee",
+    },
+    CssColorEntry {
+        name: "wheat",
+        value: "#f5deb3",
+    },
+    CssColorEntry {
+        name: "white",
+        value: "#ffffff",
+    },
+    CssColorEntry {
+        name: "whitesmoke",
+        value: "#f5f5f5",
+    },
+    CssColorEntry {
+        name: "yellow",
+        value: "#ffff00",
+    },
+    CssColorEntry {
+        name: "yellowgreen",
+        value: "#9acd32",
+    },
+    CssColorEntry {
+        name: "rebeccapurple",
+        value: "#663399",
+    },
+];
diff --git a/crates/gosub_shared/src/lib.rs b/crates/gosub_shared/src/lib.rs
index e361d65e0..74ae5bb62 100644
--- a/crates/gosub_shared/src/lib.rs
+++ b/crates/gosub_shared/src/lib.rs
@@ -9,6 +9,7 @@ pub mod animation;
 pub mod async_executor;
 pub mod byte_stream;
 pub mod config;
+pub mod css_colors;
 pub mod errors;
 pub mod font;
 pub mod geo;