How to Create New Custom Shades & Transparencies on the Fly in ACSS

AutomaticCSS (ACSS) has one of the most powerful, flexible, and editable color systems available in any CSS framework. It'll do exactly what you need out of the box for 98% of projects.
But, what about the other 2% of times when do need additional shades, transparencies, etc.? Are you out of luck?
Nope! ACSS has you covered in those cases as well. Our color partials allow you to easily create new custom shades and transparencies on the fly.
If you need any help, don't hesitate to reach out via the ACSS support community!
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: / @digitalambition

[@rubengarciajr]

I know i will never need this but i love watching these videos to learn and become a better frontend developer!

[@eucalyptech]

Usually I am part of the 98%... Now I can also be part of the remaining 2% 😄Thank you Kevin for your tutorial !

[@mrianforest]

12 minutes in...my mind is blown already

[@ReubenHochstetler]

I love these advanced tutorials for extending and adding to ACSS. While I haven’t run into a need for additional colors outside of the default palette, having these tutorials available as a ton of value to the ACSS product.

[@brianvanderspa]

It are the “golden nuggets” for me. Just like Ruben said, do not think I will use it, but just learning about new ways to use the power of ACSS and even learning extra about CSS in general… Exactly why I like these videos! Thanks Kevin!😁

[@kappesante]

yeah, it's the best.

[@AmandaLucaseu]

Really enjoying learning about partials and variables 👍🏻

[@thorsten-roever]

Thanks

[@Defcon1702]

Hey Kevin, in terms of the partials: Are I am able to redeclare with the partial a --base / --primary variable and it triggers the recalculation of classes like -bg--primary? Great video thanks!

[@AutomaticCSS]

No because those classes are defined by sass variables and not CSS variables.

[@mehdimoradi603]

Hi Kevin, I'm not sure it's a bug or not but when I disable some colors in acss settings like secondary, accent and etc! I still see the color pallet's names without any colors in the bricks editor
It doesn't seem right, when you disable, it means you don't need to see the names and empty colors in the bricks too

[@AutomaticCSS]

It’s not safe for us to remove color palettes because some users add additional colors to them. You can easily remove them yourself if you’d like.

[@erling5148]

Question where does the 1,15 come from
when I input hsl(202,89%,1,15%) the hex becomes #020303 which is very dark and not even close to what you have got

[@AutomaticCSS]

Where are you seeing 1.15

[@erling5148]

@@AutomaticCSS the L value for the hover in shades

[@vigilantezack]

meanwhile the client: ..... sends lists of precise hex values saying only THESE must be your colors and nothing else will do!

[@AutomaticCSS]

You can match hex colors by getting their HSL values and using those.