jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS Relative Color Syntax Generator

Genereer CSS relatieve kleursyntax voor alfa-, lichtere, donkerdere en kanaalaangepaste varianten.

Tool laden...

Wat is CSS Relative Color Syntax Generator?

CSS relatieve kleursyntaxis laat u starten van een bestaande kleur en de kanalen individueel aanpassen. Met rgb(from kleur r g b / alpha) of hsl(from kleur h s l / alpha) kunt u helderheid, verzadiging, alpha of individuele kanalen aanpassen. Krachtiger dan color-mix() voor precieze kanaalmanipulatie.

Snel antwoord

CSS relatieve kleursyntaxis laat u een nieuwe kleur maken door individuele kanalen van een bestaande kleur aan te passen. Krachtiger dan color-mix() voor precieze manipulatie zonder preprocessor.

Last updated: 2026-06-11

Beperkingen

  • Vereist Chrome 119+, Safari 16.4+, Firefox 128+.
  • Syntaxis varieert per kleurruimte.
  • Complexe geneste expressies kunnen onleesbaar worden.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Voer een basiskleur in hex, RGB of HSL in.
  2. Kies de uitvoerkleurruimte en de kanaalaanpassingen.
  3. De tool genereert de relatieve kleursyntaxis CSS.
  4. Kopieer de declaratie in uw stylesheet.

Waarvoor je het kunt gebruiken

  • Maak semi-transparante varianten van een merkkleur.
  • Genereer lichtere of donkerdere tinten via het helderheidskanaal.
  • Verhoog of verlaag verzadiging voor hover en active staten.

Gebruik

Praktische voorbeelden

Voorbeeld

Merkkleur met alpha

Een ontwerper converteert een hex-kleur naar 80% opacity met rgb(from #3b82f6 r g b / 0.8).

Voorbeeld

Lichtere kaarten via oklch

Een thema genereert lichtere kaartachtergronden door het L-kanaal in oklch aan te passen.

Veelgemaakte fouten

  • Verkeerde kleurruimte voor de gewenste manipulatie.
  • Te diep nesten van relatieve kleuren, wat leesbaarheid schaadt.
  • Geen terugval voor niet-ondersteunde browsers.

Verificatie

  1. Test de gegenereerde CSS in Chrome DevTools.
  2. Controleer of een statische terugval vóór de relatieve syntaxis staat.

FAQ

Vragen over CSS Relative Color Syntax Generator

Verschil color-mix() en relatieve kleursyntaxis?

color-mix() mengt twee kleuren. Relatieve syntaxis past kanalen van een kleur aan.

Welke browsers ondersteunen dit?

Chrome 119+, Edge 119+, Safari 16.4+, Firefox 128+.

Welke kleurruimtes kan ik gebruiken?

rgb, hsl, hwb, oklch, oklab, lab, lch, srgb-linear. oklch heeft de voorkeur voor perceptueel uniforme aanpassingen.

Praktisch gebruik dat niet kan met color-mix()?

Individuele kanaalmanipulatie — bijvoorbeeld helderheid verhogen met behoud van tint: oklch(from var(--brand) calc(l + 0.1) c h).

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool