Пользовательские цвета профиля

В Twitter пользователи могут выбрать собственный цвет, который затем будет использоваться во всем их профиле. Как я могу реализовать аналогичную функциональность с помощью HTML, (S) CSS и Angular 5?

Как есть, делаю, например:

<h1 style = "color: {{user.color}};">
    {{ user.name }}
</h1>

Это работает, однако проблемы следующие:

• Загромождает html-файлы множеством атрибутов style
• Я хотел бы иметь возможность по-разному использовать цвет для разных медиа-запросов
• Я хотел бы использовать разные оттенки цвета пользователя во всем его профиле

Обычно я добиваюсь этого с помощью SCSS, используя функции lighten() и darken(). Однако я, очевидно, не могу этого сделать при получении цвета пользователя во время выполнения из базы данных и с использованием атрибута style.

Как бы вы подобрали индивидуальные цвета профиля для своих пользователей? Вы бы также использовали атрибут стиля или есть альтернатива (с использованием Angular). Как бы вы добились вариаций цвета пользователя?

Можно ли этого добиться с помощью CSS-переменных var()?