The theme's global colors follow your Brand Kit automatically. In the page editor, open Global theme styles > Colors > Global colors: Primary color takes the first color of your Brand Kit, Primary accent color the second, Secondary color the third, Secondary accent color the fourth and Tertiary color the fifth. If your Brand Kit has fewer colors, the remaining fields keep the theme's own values until you change them. Global colors are used site-wide for links, buttons and details.
Backgrounds of individual modules, such as the slides of the Hero slider, are not tied to the global colors; each module has its own color settings. To change a slide background, open the module and go to Hero slider > Edit slide > Colors > Background color, where you can pick one of your Brand Kit colors from the color picker. This applies to that slide only, so no custom CSS is needed.
Click Publish on the page (or Publish changes in the theme settings panel) to apply.