1 reply [Last post]
NauBQ6xpCPAvB4
NauBQ6xpCPAvB4's picture
Offline
newbie
Last seen: 8 weeks 4 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> */

NauBQ6xpCPAvB4
NauBQ6xpCPAvB4's picture
Offline
newbie
Last seen: 8 weeks 4 days ago
Timezone: GMT+2
Joined: 2022-08-01
Posts: 2
Points: 3

Watch

Watch