NL

Kleuren mengen

Met deze tool kun je kleuren mengen en de mengkleur direct aflezen als HEX, RGB en HSL. Ook kun je een kleur lichter, donkerder of gedempter maken en een kleurverloop met maximaal 15 stappen maken.

Bron: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Bijgewerkt: .

HEX zoals #E63946, rgb(230, 57, 70) of hsl(...)
HEX, rgb() of hsl()
%
0 % = alleen kleur 1, 100 % = alleen kleur 2; bij lichter maken: aandeel wit
2 tot 15 kleuren van kleur 1 tot de doelkleur
Mijn toolboxJe invoer wordt alleen in deze browser opgeslagen.

Mengkleur

#965A72rgb(150, 90, 114) · hsl(336, 25%, 47%)
  • 1/5#E63946
  • 2/5#BE4A5C
  • 3/5#965A72
  • 4/5#6D6B87
  • 5/5#457B9D

Resultaat

Mengkleur (HEX)
#965A72
RGB
rgb(150, 90, 114)
HSL
hsl(336, 25%, 47%)
CSS (color-mix)
color-mix(in srgb, #E63946 50%, #457B9D 50%)
Stappen van het verloop
  • #E63946
  • #BE4A5C
  • #965A72
  • #6D6B87
  • #457B9D

Zo wordt het berekend

De tool mengt schermkleuren, dus lichtwaarden – geen verf van pigmenten. Daarom geven rood en blauw paars (#800080), terwijl blauw en geel een neutraal grijs geven en geen groen zoals bij waterverf.

Zo wordt gemengd

Voor elk kleurkanaal wordt een tussenwaarde berekend. De mengruimte bepaalt hoe precies:

Lichter, donkerder, dempen

Meng je een kleur met wit, dan wordt hij lichter (tint); met zwart donkerder (schaduw), met grijs gedempter (toon). Het percentage bepaalt de sterkte, de stappen geven een hele reeks – handig voor hover-standen of kleurschalen.

De uitdrukking color-mix() kun je direct in een stylesheet kopiëren. Bijpassende paletten maakt de kleurenpalet-tool, formaten zet de kleurcode-omzetter om en de contrastcontrole bewaakt de leesbaarheid van tekst.

Veelgestelde vragen

Wat krijg je als je blauw en geel mengt?

Op het scherm een neutraal grijs (sRGB-gemiddelde #808080), omdat je lichtkleuren mengt. Met waterverf of acrylverf geven blauw en geel groen, omdat pigmenten subtractief werken.

Hoe meng ik twee kleuren in gelijke delen?

Voer beide kleuren in en laat het aandeel van de tweede op 50 % staan. Voor een derde van kleur 2 vul je 33 in.

Hoe maak ik een kleur lichter of donkerder?

Kies “Kleur lichter maken” of “Kleur donkerder maken” en pas het percentage aan: bij 20 % wit wordt de kleur iets lichter, bij 80 % bijna wit.

Welke mengruimte kies ik?

sRGB komt overeen met het standaardgedrag van CSS en de meeste programma’s. Oklab geeft gelijkmatiger verlopen, lineair licht komt overeen met over elkaar vallende lichtbronnen.

Hoe gebruik ik het resultaat in CSS?

Kopieer de waarde onder “CSS (color-mix)” en gebruik die als kleur in elke moderne browser, of neem gewoon de HEX-waarde.

Bronnen en wettelijke basis

Bijgewerkt op: · Redactioneel beleid

Vergelijkbare tools