ACSS 101.06: Color Palette Setup

The ACSS color system is one of the most powerful color systems available in any builder or framework. In this video, Kevin will walkthrough how the color system works, how each color should be used, and how to setup colors and shades based on a real-world example.
Note: We'll be doing many more real-world examples of color analysis and setup in the future. This is just a general introduction to the color system with basic principles for color setup.
----
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco

[@SamanticsNL]

Primary = Most used brand color Secondary = Second most prominent brand color Accent = Least most used brand color Tertiary = Only use if you (really, really) need another brand color Base = Neutral brand color (text, background, etc) Neutral = Greyscale (changing this palette is not recommended) White and black are already integrated in ACSS. Thanks Kevin! Very clear and helpful video!

[@AutomaticCSS]

Thanks for the synopsis - that'll help people with a quick overview.

[@wppagebuilders]

This is a great breakdown of the Automatic CSS color system! The way you've explained the different color slots and the importance of a neutral palette makes it really easy to understand. I'm curious to learn more about the practical application examples in the upcoming videos. Especially how Automatic CSS handles color changes across a website - it sounds like a huge time saver!

[@AutomaticCSS]

It's super powerful!

[@eduardkirin387]

Thank you Kevin, hope you are feeling better 😊

[@AutomaticCSS]

Recorded this yesterday because I was feeling a bit better, but now I'm worse again. :/

[@IssaKhlief]

Finally another tutorial 🎉🎉

[@stefanionescu9881]

I’ve been waiting for this in-depth video for a long time. Thanks Kevin!

[@philippepperell9951]

What a great explanation not only of how color works in ACSS but about color generally. I learned so much from this tutorial, thank you.

[@whatznext28]

Thanks Kevin! I'm building my first site with Frames and ACSS and this video was right on time! I had sent my base and neutral to an ultra-dark version of slate, but now I understand the value of keeping the neutral, neutral and switching elements to base as needed.

[@LupusDesign]

Excellent tutorial, Kevin. Looking forward to scenarios in tutorials. Thank you.

[@eucalyptech]

Very clear, thank you Kevin 😃

[@lucianpascu8445]

Thank you Kevin!

[@bluetheredpanda]

Yay for the new tutorial! 🙌

[@BinaryMasterclass]

all around the 8:00 timestamp area you had some very clear missed Star Wars reference opportunities. lol. GREAT training! Thanks!

[@davidwalls2304]

Great tutorial on the color palette. I understand as long as I'm consistent, it doesn't matter which color (primary, secondary, base, etc.) I use but now understanding your philosophy it makes much more sense (especially use of primary vs base). I'm looking forward to the color scenarios in the future and for the alternate color video.

[@thewebstylist]

Wow this looks amazing!

[@RobCooper]

That was very well done. Thank you.

[@Jim.Hummel]

Awesomeness! This helped clarify things nicely. I'm currently working on a site that does not have an accent or secondary color in its branding palette and I'm struggling with how to determine the best choice. Thanks for this continuing series. I appreciate you powering through this while you're still on the mend.

[@dynamic-homepages]

Thanks for the tutorial =)

[@Kal-el23]

Would be great if you created this swatch page for Bricks so we could quickly import it as color reference.

[@christianmagill3829]

A nice addition would be to automatically account for the hash tag when hex codes are pasted into the color fields.

[@grizfan93]

Very helpful video. Ironically, Ghost lists their official color palette as "Light backgrounds and tinted greys, accented with Ghost Green". So they call it "Ghost Green", but at the same time mention it for accents. No mention of that hot pink in their brand guidelines. Goes to show this process can be a minefield, especially when working with brand guidelines. I spent years in the corporate world, which means brand guidelines filled with lots of blues and greys. Hopefully, there's some collaboration between the person creating the brand colors, web design, and web development. If I could, I would make sure who ever does each of these tasks watches this video first.

[@AutomaticCSS]

Yep! Minefield is a good way to describe it.

[@PrinceAustrian]

Great video! I am waiting for the color schemes video, because i don`t understand how can i make contrast automatically, so that if for a section i select a dark background, the text automatically to be light and if i select light background, the text to switch automatically to dark.

[@AutomaticCSS]

Coming soon!

[@petarpavlov]

Now there are new Action and Shade colors. How would you utilize the Shade compared to Base and Neutral?

[@AutomaticCSS]

No, action and shade are deprecated. Shade has been deprecated for a long time. Action was deprecated for 3.0. What's taught in this lesson is the current standard.

[@stphnmwlkr]

Another excellent video. Any chance the grid layout will be available? It is easy enough to recreate, but looking to save time.

[@AutomaticCSS]

We'll release a new style guide at some point. This isn't a full grid of all the options. We need a smaller format.

[@jzajzz]

I should set up something like the color grid you have there in n a "style guide" sort orf page. Speaking of which what's going on with the style guides in frames .. are you replacing the old ones ?

[@AutomaticCSS]

Yes will replace

[@stefanionescu9881]

when can we find this style guide as a template in frames ? i can only see the deprecated one in there for now

[@AutomaticCSS]

We are working on new style guide sections

[@jonasaeschlimann3742]

Hello, Can I define the colours on a WordPress multisite per subsite?

[@AutomaticCSS]

Yes

[@Tom-l9h]

I just went through the community and saw an interesting question for maybe a video topic about css. What do you think about not loading/ disabling the default bricks frontend stylesheet, the minified one for better performance when using ACSS?

[@AutomaticCSS]

I’ll have to investigate further but right now I’m focused on WCEU and 3.0 stable.

[@Tom-l9h]

@@AutomaticCSS Great love to hear that. Take your time. Looking forward to the response.

[@Luca-ui3rn]

Hi Kevin, as i have seen, the action color has been removed, should you use Tertiary Color instead? Do the semantic colors also adapt automatically, or is the color code for the semantic colors always the same unless you change them? Many thanks in advance!

[@AutomaticCSS]

Action is usually primary. What do you mean adapt automatically?

[@Luca-ui3rn]

@@AutomaticCSS by “adapt automatically” i mean, do the semantic colors automatically adapt to the primary or secondary color? Or are the colors always the same by default with semantic colors?

[@Tom-l9h]

If we would like to create another color like accent-2 or so where would we do it? I know edge case but just for the book.

[@AutomaticCSS]

It's not a straightforward question. It depends on the design/use case. I would recommend posting your design or what you're trying to achieve in the support group and we can provide guidance there. in 90% of cases where people think they need more colors, they actually don't. There are various better approaches than creating an entirely new color.

[@JohnChvatalGSTV]

Kevin, where would you place an off-white color that is used on the background?

[@AutomaticCSS]

Is it not a shade of the base color or another color used on the site? Does it need to be compatible with color scheme?

[@JohnChvatalGSTV]

@@AutomaticCSS lets say its not a shade nor variation of base color. Does not need to have color scheme variations but I'd like to have a CSS class and color variable that references the color.

[@JacobBall75]

You could just create a single custom class and put the specific colour in there. You aren’t restricted to using just ACSS colours, you can always add your own in your custom styles. Alternatively you could just amend the HSL in your Base Ultra Light colour to the specific colour you’re wanting to use. Then you’d just use .base-ultra-light as your class.

[@JohnChvatalGSTV]

@@JacobBall75 that is an option. Problem is I have a feeling this method would break dark / light theming that is controlled by ACSS.

[@AutomaticCSS]

@@JohnChvatalGSTV That's what I meant by color scheme, though it's very easy to make a custom-defined color work with color scheme. We can even provide a recipe for it. Is this color used for individiual section and element backgrounds or is it just the default website background? It would be easier if you posted in the community, then I could give you example ways to do it. Hard to do on KZbin.