Met Automatic.css bouw je automatisch een doordacht systeem van kleuren: schaalbaar, consistent en volledig aanpasbaar via variabelen.
Waarom kleur in code vaak een puinhoop wordt
Zeg eens eerlijk: hoeveel #F5F5F5-achtigen staan er in je CSS?
Of: hoeveel tinten blauw gebruik je, waarvan er maar twee echt nodig waren?
👉 Kleuren worden vaak ad hoc toegevoegd
👉 Hex-codes worden herhaald in plaats van hergebruikt
👉 Aanpassingen worden frustrerend: “Welke blauw was dat nou?”
Zonder structuur loop je al snel vast:
- Componenten krijgen net verschillende tinten
- Toegankelijkheid sneuvelt (te weinig contrast)
- Design consistency wordt handwerk
Hoe doet Automatic.css dit anders?
In Automatic.css is kleur geen losse waarde.
Het is een variabelensysteem. En dat systeem doet het volgende:
- Maakt automatisch een kleurenpalet rond jouw gekozen basiskleuren
- Bouwt een schaal van licht naar donker: bijv.
primary-ultra-lighttotprimary-ultra-dark - Geeft je volledige controle via SCSS-achtige configuratiebestanden
- Maakt alles toepasbaar als utility-class én als variabele
Voorbeeld: je definieert --primary als basiskleur.
ACSS genereert automatisch:
--primary-ultra-light
--primary-light
--primary
--primary-dark
--primary-ultra-dark
En dan ook nog varianten voor backgrounds, borders en tekst.
Dat betekent:
- Je hoeft nooit meer zelf te kiezen “welke tint blauw past hier?”
- Je designs blijven coherent, zelfs als je na maanden iets aanpast
- Donker thema? Wissel gewoon de basiskleur — alle tinten schalen mee
Waarom dat schaalbaar en onderhoudbaar is
👉 Eén centrale plek voor al je kleuren = minimale kans op fouten
👉 Geen hex-codes meer in componenten = maximale flexibiliteit
👉 Makkelijk thematisch werken: brandingkleur wijzigen = design wijzigt automatisch mee
👉 Volledige grip op contrast & toegankelijkheid: jij bepaalt de verhoudingen
En ja, als je een kleur net ietsje anders wil maken voor een bepaalde component?
Dan gebruik je --primary-dark in plaats van --primary.
Of je maakt een extra --brand-secondary aan, die automatisch ook een schaal krijgt.
Bonus voor nerds (zoals wij)
Je kunt zelfs:
- De tintverdeling van je kleurenschaal beïnvloeden (via interpolatie)
- Variabelen gebruiken in utility-classes (ja, dat werkt gewoon)
- Automatisch koppelen aan je dark/light modes met conditional tokens
En het beste: je hoeft het niet allemaal zélf te bedenken.
ACSS is gebouwd met deze principes als uitgangspunt.
Kleuren die samenwerken in plaats van tegenwerken
Kleurbeheer via variabelen is niet alleen iets voor grote teams of design systems.
Het is een slimme manier om rust te brengen in je front-end.
En om sneller, consistenter en creatiever te werken.
👉 Ontdek de kracht van kleurvariabelen in Automatic.css
👉 Of beter: probeer het zelf. Je kleuren zullen je dankbaar zijn.