How to connect generated color schemes (e.g. from Paletton) to HTML elements?

1 reply [Last post]

Mon, 2022-08-01 20:20

NauBQ6xpCPAvB4

Offline

newbie

Last seen: 43 weeks 3 days ago

Timezone: GMT+2

Joined: 2022-08-01

Posts: 2

Points: 3

Hello,
there are fine tools out there to generate color schemes based on color wheel and other color sciene stuff. e.g. Paletton
Most of them are able to export the colors to CSS. But they never explain which one of that colors belong to which HTML element (e.g. text, background, buttons, links, ...)

How do I know? Which element need primary/seconardy/etc color?

This is an example

/* 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 hex codes */
 
.color-primary-0 { color: #F8CFD6 }	/* Main Primary color */
.color-primary-1 { color: #D13951 }
.color-primary-2 { color: #E86277 }
.color-primary-3 { color: #CA949C }
.color-primary-4 { color: #A5737B }
 
.color-secondary-1-0 { color: #FFE1D5 }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #DD6A3C }
.color-secondary-1-2 { color: #F59068 }
.color-secondary-1-3 { color: #D6AD9C }
.color-secondary-1-4 { color: #AF897A }
 
.color-secondary-2-0 { color: #E8C2D6 }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #B33178 }
.color-secondary-2-2 { color: #C75492 }
.color-secondary-2-3 { color: #AD7E98 }
.color-secondary-2-4 { color: #8E637A }
 
 
 
/* 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> */

Tags:

CSS Styling

Mon, 2022-08-01 20:22