Logo and CSS based on logged in user

Basic idea is to let users decide which logo and primary color they would like to see when they log in to the site. They will update this via some custom fields (using Toolset).
Then, if the logo field is populated, the site logo should change accordingly. If the primary color field is filled out, then this will form the basis for CSS styling particular elements.

I have been experimenting with the following code:

add_action('wp_head','hook_css');
function hook_css()
{
    $default_logo = 'https://site/wp-content/uploads/ca-200.png';
    $user_logo = types_render_usermeta( "logo", array( "user_current" => true, "url" => true ) );
    if (empty($user_logo)) {
      $user_logo = $default_logo;
    }

    $default_user_color = '#d2691e';
    $user_color = types_render_usermeta( "main-color", array( "user_current" => true ) );
    if (empty($user_color)) {
      $user_color = $default_user_color;
    }
    $user_color_5pct = $user_color . "0D";
    $user_color_20pct = $user_color . "33";
    $best_text_color = '#000000';

?> <!-- Closing the PHP here -->
<style>

/* Style logo */
.tmbd-userlogo img {
    content:url("<?php echo $user_logo; ?>");
}

/* Style frontpage buttons */
.tmbd-btnbox .elementor-column-wrap, .tmbd-btnbox .elementor-button {
    background-color:<?php echo $user_color; ?> !important;
}

/* Style check */
.tmbd-check .elementor-heading-title {
    color:<?php echo $user_color; ?> !important;
}

/* Style introbox */
.tmbd-introbox .elementor-alert-title {
    font-weight: normal;
}

.tmbd-introbox .elementor-alert-info {
    color: <?php echo $best_text_color; ?> !important;
}

.tmbd-introbox .elementor-alert-dismiss {
    display: none;
}

.tmbd-introbox .elementor-alert {
    background-color:<?php echo $user_color_20pct; ?> !important;
    border-color:<?php echo $user_color; ?> !important;
}

</style>
<?php //Opening the PHP tag again
}

Is this a good way to do it, or is there a better way? A way that better fits with GP maybe.

Also, can I have all the CSS code placed in an include file of some sort so that it is easier for me to edit?

Last question, any thoughts on how I can calculate the best text color based on the user selected background colour? I have tried with the following code, but it doesnt seem to work:

/* Find which is the best text color based on background color */
function pickTextColorBasedOnBgColorSimple($bgColor, $lightColor, $darkColor) {
  $color = ($bgColor.charAt(0) === '#') ? $bgColor.substring(1, 7) : $bgColor;
  $r = parseInt($color.substring(0, 2), 16); // hexToR
  $g = parseInt($color.substring(2, 4), 16); // hexToG
  $b = parseInt($color.substring(4, 6), 16); // hexToB
  return ((($r * 0.299) + ($g * 0.587) + ($b * 0.114)) > 186) ?
    $darkColor : $lightColor;
}

Thanks in advance for your input and support.

Best
Ken