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?

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.