Ontwerptools
14 toolsKies kleuren, bouw CSS-effecten, controleer contrast en maak visuele elementen.
- CSS-kleurverlopen genererenMaak mooie CSS-kleurverlopen met voorbeeldweergave
- Kaderschaduw genererenGenereer CSS-eigenschappen voor box-shadow
- Hoekafronding genererenMaak CSS-eigenschappen voor border-radius
- Handtekening genererenMaak afbeeldingen van handgeschreven handtekeningen met 30 lettertypen of door te tekenen
- Voortgangsbalk makenOntwerp geanimeerde voortgangsbalken
- Watermerk makenVoeg tekst- of logowatermerken toe aan afbeeldingen ter bescherming
- WCAG-contrast controlerenControleer kleurcontrastverhoudingen op naleving van de WCAG AA- en AAA-toegankelijkheidseisen
- Favicon genererenMaak favicons van tekst, emoji of afbeeldingen voor uw website
- Fotocollage makenMaak mooie fotocollages met meerdere indelingen
- Kleurkiezer en paletgeneratorKies kleuren en genereer kleurenpaletten
- RGB naar HEX naar HSLConverteer tussen RGB-, HEX- en HSL-kleurformaten
- CSS-animaties genererenMaak CSS-keyframe-animaties met een visuele tijdlijneditor
- CSS Flexbox-oefenomgevingInteractieve oefenomgeving om Flexbox-indelingen te leren en te genereren
- CSS Grid genererenVisuele editor voor CSS Grid-indelingen met codegeneratie
Visuele details maken en controleren
Maak kleuren, CSS-effecten, lay-outfragmenten en kleine visuele elementen voor een project. Een voorbeeld van een effect helpt bij het kiezen, maar het eindresultaat hangt af van het omringende ontwerp, het venster en de inhoud. Controleer het contrast en het responsieve gedrag, en niet alleen hoe een los element eruitziet.
Van visuele keuze naar bruikbare uitvoer
CSS-kleurverlopen genereren maakt kleurverlopen, Kleurkiezer en paletgenerator helpt bij het kiezen van een palet en WCAG-contrast controleren vergelijkt voorgrond- en achtergrondkleuren. Test het resultaat met uw werkelijke tekstgroottes en statussen.
Veelgestelde vragen
Maakt een voldoende contrastverhouding een pagina volledig toegankelijk?
Nee. Contrast is maar één controle. Toetsenbordnavigatie, labels, zichtbare focus, documentstructuur en andere toegankelijkheidseisen zijn ook belangrijk.
Hoe zet ik een voorbeeld van een kleurverloop om in een stijl voor mijn website?
CSS-kleurverlopen genereren levert een kleurverloopdeclaratie op. Pas die toe op het bedoelde element en test met de werkelijke afmetingen, tekst en achtergrond die op de pagina worden gebruikt.
Kan ik twee kleuren vergelijken voordat ik ze voor tekst kies?
WCAG-contrast controleren berekent een contrastverhouding voor voorgrond- en achtergrondkleuren. Gebruik de werkelijke kleuren en controleer de criteria die passen bij de tekstgrootte en het lettergewicht.
Hoe schakel ik tussen HEX, RGB en HSL?
RGB naar HEX naar HSL wijzigt de notatie van een kleurwaarde. De notatie beschrijft de kleur; er wordt niet automatisch een palet gemaakt en een goed contrast is niet gegarandeerd.