Guide Creating attractive color palettes in XenForo using Adobe Color

[FateKid]

I have designed many color themes for XenForo boards over the years, and at times I would struggle with finding good sets of colors to use. Too many colors can make a design look too busy, and odd color combinations do not appeal to the eye. In addition, there were times I wanted shaded versions of colors, but never could get them to look right. Or, what about those times you wanted to use a header image, but never could get your color choices to match the image?

Enter Adobe Color.

https://color.adobe.com/

Adobe Color is a free service (for now) which lets you create color palettes that you can use in any application, including XenForo's styles. In fact, it is no mistake that XenForo's default style is blue with orange-ish highlights, as the style is using shades of a complementary color to grab attention and present us with a call to action.

Here is a similar complementary color palette based on XenForo's blue:



On the left, you can choose the type of colors you are using with your primary color, based on values on the color wheel. "Complementary" colors are 180° apart on the color wheel. "Triad" instead chooses colors 120° apart:




In the lower left corner, you can change Color Mode to HSB and adjust the saturation and lightness of your color choices. Changes you make on the sliders are echoed on the color wheel. Notice the same Triad color choices are made, but saturation is drawn in towards the center.



You can also grab any color on the wheel and drag it around.

One feature that really attracts me to Adobe Color is the ability to upload your own image, and Adobe Color will offer suggestions as to a color theme.




If Colorful (chosen on the left) is too bold, try one of the others:




Still not cutting it? You can drag each of the five circles around and choose your own colors.

You can also create a gradient from a photo. In this example, I set Gradient Stops to 4, and dragged the circles around to choose colors. As with Adobe's gradient editor in Photoshop, you can also drag the controls in the gradient (the circles and the diamonds).




In all Adobe Color modes, you can copy the color code in any format you would like-hex, RGB, HSV, etc.

Hopefully Adobe Color will help you create some attractive palettes for your next XenForo styling project!

 

[SkyNet]

choosing color sometimes very difficult. Because we want other people not boring watching our color combination settings.
Dark verus Light mode

color should make our eyes relax. And btw, XF not accept RGB and gradient (-webkit-linear-gradient) color sometimes is fun

 

[FateKid]

choosing color sometimes very difficult. Because we want other people not boring watching our color combination settings.
Dark verus Light mode

color should make our eyes relax. And btw, XF not accept RGB and gradient (-webkit-linear-gradient) color sometimes is fun

I'm always changing the color scheme around NullForums, ha!
It's hard to stick with a color palette.

 

[SkyNet]

that's good. So, must save the custom css for quick changing, right?
i read somewhere that color has correlation affects to our mood and psychology.
But, maybe it's true. Because, every people love in some places, like the jungle with green color, the blue sea, the sky.

Love those idea, thanks.