BattleKing
Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
- Joined
- May 24, 2020
- Messages
- 3,519
- Points
- 523
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!
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!