Complement genereted color schemes to my CSS/HTML

Question

There are fine tools out that generate color schemes with a color wheel based on color science. E.g. Paletton does so and offer me to export the colors to CSS.

It is not clear for me to which elements of a website (text, background, active links, inactive links, etc) this colors belongs.

I don't understand this term main primary/secondary color 1 and 2.

/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: <a href="http://paletton.com/#uid=55x0m0k5hLEnirLiwuO8EqR9HlZ" rel="nofollow">http://paletton.com/#uid=55x0m0k5hLEnirLiwuO8EqR9HlZ</a> */
/* Feel free to copy&paste color codes to your application */
 
/* As RGBa codes */
 
.rgba-primary-0 { color: rgba(248,207,214,1) }  /* Main Primary color */
.rgba-primary-1 { color: rgba(209, 57, 81,1) }
.rgba-primary-2 { color: rgba(232, 98,119,1) }
.rgba-primary-3 { color: rgba(202,148,156,1) }
.rgba-primary-4 { color: rgba(165,115,123,1) }
 
.rgba-secondary-1-0 { color: rgba(255,225,213,1) }  /* Main Secondary color (1) */
.rgba-secondary-1-1 { color: rgba(221,106, 60,1) }
.rgba-secondary-1-2 { color: rgba(245,144,104,1) }
.rgba-secondary-1-3 { color: rgba(214,173,156,1) }
.rgba-secondary-1-4 { color: rgba(175,137,122,1) }
 
.rgba-secondary-2-0 { color: rgba(232,194,214,1) }  /* Main Secondary color (2) */
.rgba-secondary-2-1 { color: rgba(179, 49,120,1) }
.rgba-secondary-2-2 { color: rgba(199, 84,146,1) }
.rgba-secondary-2-3 { color: rgba(173,126,152,1) }
.rgba-secondary-2-4 { color: rgba(142, 99,122,1) }
 
 
 
/* Generated by Paletton.com © 2002-2014 */
/* <a href="http://paletton.com" rel="nofollow">http://paletton.com</a> */

EDIT: I think what I mean is the question if there is a color or design theory that tells me which type of colors (main primary/secondary ...) I should use for the different elements of a website?

Answer 1

They belong to whatever you want them to be.

I do not know if you know CSS, Do you?

Because all of the styles you posted are for text only {color:xxx} so, if you want them as background you need to modify them to be a background {background-color:xxx}

It is a tool. There Is no way to tell you where a hammer must be used or a screwdriver. All we can do is remind you a screwdriver is normally used on screws.

Additionally, if you are using a CSS framework, you will need to override the colors on some elements like buttons.