how to use the right color with color palette?

[typostudy]

I am trying to make a new style for my xenforo site. Mainly I want to change the color of the site. I want to use the blue as main color and gold. I went to Style Properties: Color Palette, and see there are many options such as @pageBackground, @faintTextColor...,

so my question is:
how could I know which content uses the corresponding color property? @pageBackground is easy to know, it is for the color of pageBackground, but for others such as @primaryDarker and @primaryDark, how could I know where is using @primaryDarker? where is using @primaryDark? their colors are too similar. I almost can not tell the difference from the frontend?

 

[TPerry]

I am trying to make a new style for my xenforo site. Mainly I want to change the color of the site. I want to use the blue as main color and gold. I went to Style Properties: Color Palette, and see there are many options such as @pageBackground, @faintTextColor...,

so my question is:
how could I know which content uses the corresponding color property? @pageBackground is easy to know, it is for the color of pageBackground, but for others such as @primaryDarker and @primaryDark, how could I know where is using @primaryDarker? where is using @primaryDark? their colors are too similar. I almost can not tell the difference from the frontend?

Simplest way is to change them (one at a time) to a garish color that is not shown anywhere else and then browse and see what all it effects.

 

[typostudy]

Thanks Tracy, I have tried your suggestions. But I still did not find the area that below color take effect, although I find them in the templates, but in front end I can not find the corresponding places.
@tooltipBackground /inline_mod.css
@inlineMod /inline_mod.css
@secondaryMedium /help_smilies.css

 

[TPerry]

Thanks Tracy, I have tried your suggestions. But I still did not find the area that below color take effect, although I find them in the templates, but in front end I can not find the corresponding places.
@tooltipBackground /inline_mod.css
@inlineMod /inline_mod.css
@secondaryMedium /help_smilies.css

Are you familiar with using Chrome Developer or the FireFox equivalent. Normally you can find those by that.
There are several sections for the inline mod (if it's where I am thinking about)
#InlineModOverlay .selectionControl (believe this was the green)
#InlineModOverlay .actionControl (believe this was the red)
#InlineModOverlay .SelectionCount (white text)
#InlineModOverlay label (yellow text)

control the backgrounds and some of the text of the inline mod (in EXTRA.css).

 

[typostudy]

Thanks Tracy, got it.

 

[TPerry]

Thanks Tracy, got it.

Good deal.
There are some additional ones that you can find (I was busy helping another site owner sort through a problem and had to do that quickly)... and have to go back to working on re-installing Windows XP on a cardio machine that I have to take to a local doctors office this morning so can't check them now.