Repo is here but currently private while we complete some final tasks. https://github.com/UmTemplates/UmBootstrap But if it helps I used the label rather than the colour so I can use CSS custom variables

@{
    if (Model?.Areas.Any() != true) { return; }

    var hasSettings = Model.Settings != null;
    var backgroundColour = hasSettings ? Model.Settings.Value<ColorPickerValueConverter.PickedColor>("layoutSettingsColourPicker") : null;
    var colorLabel = backgroundColour?.Label;

    var colorShades = hasSettings ? Model.Settings.Value<decimal>("layoutSettingsColourShades") : (decimal?)null;

    var backgroundImage = hasSettings ? Model.Settings.Value<Umbraco.Cms.Core.Models.MediaWithCrops>("layoutSettingsBackgroundImagePicker") : null;
}

@{
    string styleAttribute = "";
    if (hasSettings && backgroundColour != null)
    {
        styleAttribute = $"background-color: var({colorLabel}";
        if (colorShades.HasValue)
        {
            styleAttribute += $"-{colorShades});";
        }
    }
    else if (backgroundImage != null)
    {
        styleAttribute = $"background-image: url({backgroundImage.MediaUrl()});";
    }
}
<div class="layout py-3" data-bgimage="@backgroundImage.MediaUrl()" style="@styleAttribute" data-block-alias="@Model.Content.ContentType.Alias">