How to support extra color options for shortcodes?

You have multiple options.

---

A) Use inline-CSS:

<button style="background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;">
    ...
</button>

---

B) Write (ID-specific) CSS styles into your page. In your shortcode function, echo a <style> tag, for instance like so:

<style>
#shortcode-button-1 {
    background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;
}

#shortcode-button-2 {
    background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;
}
</style>

For this method, you need to track your shortcode buttons, meaning: give them some unique ID that you use to target the buttons.

---

C) Use a dynamic style sheet (i.e., a shortcode-styles.php file that acts as a CSS file).

For this method, you need to register your shortcode buttons (e.g., in some global variable, a transient, an option etc.). Then, using some late-running hook (e.g., wp_footer, wp_print_footer_scripts etc.) you enqueue the php/CSS file, which could look something like the following:

<?php
header('Content-type: text/css');
// Suppose you are using a global variable for your shortcode buttons
global $shortcode_buttons;
foreach ($shortcode_buttons as $id => $color) {
    ?>
    #shortcode-button-<?php echo $id; ?> {
        background: <?php echo $color; // maybe validate ?>;
    }
    <?php
}
?>

---

Note: I did not test any of this, however, I hope you get the idea(s).