XF 2.3 How to understand and modify color codes?

[creativeforge]

Hi, I'm trying to modify theme colors in Basic colors, where specific XF coding is used, like "darken(@xf-textColor, 35%)". But when I click on it, I cannot see exact colors I would like to have, like #2d3037. Even the Picker is a lot of trial and error to get close to what I want. And then I can't save that to also use it elsewhere.

Is there a tutorial showing us how to create our own re-usable colors and save them as presets to be re-used?

Thanks!
▼

 

[ForumDevs]

Hi, I'm trying to modify theme colors in Basic colors, where specific XF coding is used, like "darken(@xf-textColor, 35%)". But when I click on it, I cannot see exact colors I would like to have, like #2d3037. Even the Picker is a lot of trial and error to get close to what I want. And then I can't save that to also use it elsewhere.

Is there a tutorial showing us how to create our own re-usable colors and save them as presets to be re-used?

Thanks!
▼


View attachment 313910

You could use a color picker web browser extension like https://chromewebstore.google.com/detail/color-picker-for-chrome

 

[beerForo]

ou could use a color picker web browser extension

Or chooce "Picker" at the top of the box.

 

[ForumDevs]

Or chooce "Picker" at the top of the box.

He is already checking the Picker, but the color variable (@xf-paletteNeutral3) is still visible. To find the exact color code, he can either check the value of @xf-paletteNeutral3 directly or use a color picker extension.

 

[Russ]

Maybe I'm missing something, but if you want to use #2d3037, why don't you just place that value? HEX values still work.

 

[beerForo]

I would like to have, like #2d3037

Maybe I'm missing something, but if you want to use #2d3037, why don't you just place that value? HEX values still work.

Yup

 

[Suzanne O]

I always go by the name of the colour.
Rather than the codes.

Because that works too.

Then i adjust the colour if it's not that shade of colour i wanted.

 

[Kirby]

Hi, I'm trying to modify theme colors in Basic colors, where specific XF coding is used, like "darken(@xf-textColor, 35%)". But when I click on it, I cannot see exact colors I would like to have, like #2d3037. Even the Picker is a lot of trial and error to get close to what I want. And then I can't save that to also use it elsewhere.

darken(@xf-textColor, 35%) is not really thaat complicated, it's basically just a LESS function to take the variable @xf-textColor (XenForo color style property textColor) and make this 35% darker.

The actual color of a color style property is shown:


Eg. the color is hsl(0, 0%, 53%) ~ rgb(135, 135, 135) = #878787

As already pointed out, you can just enter a color in hsl, rgb or hex.

It is not possible to save a color as a preset for a color style property as this just doesn't make sense:
If you want to use a color (that does not already exist as a color style property) just create a color style property with the desired value and use taht wherever you need it.

 

[Mr Lucky]

But when I click on it, I cannot see exact colors I would like to have, like #2d3037. Even the Picker is a lot of trial and error to get close to what I want

Have you tried pasting #2d3037 into the color field:



Then click update.

 

[Kirby]

Have you tried pasting #2d3037 into the color field:
Then click update.

Why that complicated?

Just paste #2d3037 into the text field, no need to even open the color selection dialog.

 

[Mr Lucky]

Why that complicated?

you can do either, it isn’t really very complicated to either paste in the text field or click on the color where you do the same but get options to vary it slightly if you so desire.

 

[Kirby]

Yeah, if you want ot take a color as a base and modify that further.

But if the goal is to just use an exact color I still think it's easier to directly use the input and skip the dialog entirely.

Click into the text input field
Ctrl-A (Select all)
Ctrl-V (Paste)

vs.

Click onto the color preview to open color dialog
Click into the text input field in color dialog
Ctrl-A (Select all)
Ctrl-V (Paste)
Click on update

 

[creativeforge]

Why that complicated?

Just paste #2d3037 into the text field, no need to even open the color selection dialog.

Thanks! The reason I could not see the color of the code I posted was that it was too close to the original. So I should have tested it with a contrasting color. #2d3037. I really thought it had to be the same format as "darken(@xf-contentBg, 8%)."

Thanks all, much appreciated,

Andre