Softonic

Kleurenblender

Stap 1 / 2
Resultaten

Voer twee HEX-kleuren in, kies het aantal stappen en de Kleurenblender toont de startkleur, de eindkleur en de gelijkmatig verdeelde kleuren ertussen. Handig voor snelle UI-kleurrampen, gradientplanning, pictogramstatussen en het controleren van exacte HEX-stops voordat je verder werkt in CSS of een designbestand.

Hoe de HEX-mix wordt berekend

  1. 1

    Voer twee HEX-kleuren in

    Gebruik 3- of 6-cijferige HEX, met of zonder #. Voorbeelden: #FF6B35, #1E3A8A, F60.

  2. 2

    Kies 2-20 stappen

    Het eerste staal is de eerste kleur en het laatste staal is de tweede; de middelste stalen worden ertussen berekend.

  3. 3

    Interpoleer RGB-kanalen

    De tool zet HEX om naar rode, groene en blauwe kanaalwaarden, interpoleert elk kanaal lineair en rondt af naar het dichtstbijzijnde gehele getal.

  4. 4

    Lees de HEX-stops

    Elk staal wordt getoond met een 6-cijferige HEX-code in hoofdletters die je kunt selecteren en hergebruiken in je ontwerp of stijlblad.

Wat deze tool doet

Kleurenblender werkt alleen met standaard HEX-kleurnotatie. De tool accepteert korte HEX zoals #F60 en volledige HEX zoals #FF6B35, normaliseert de waarden intern en toont elk resultaat als 6-cijferige HEX-code in hoofdletters.

De mix is een eenvoudige lineaire interpolatie in RGB/sRGB-kanalen:

  1. Zet elke HEX-kleur om naar R-, G- en B-waarden van 0 tot 255.
  2. Bereken voor elke stap t van 0 tot 1.
  3. Gebruik voor elk kanaal start + (einde - start) * t.
  4. Rond elk kanaal af naar het dichtstbijzijnde gehele getal en zet het resultaat terug om naar HEX.

Omdat de eindpunten zijn inbegrepen, betekent 2 stappen “alleen start en einde”. Met 7 stappen van #FF6B35 naar #1E3A8A is de uitvoer:

Stap Positie HEX
1 0% #FF6B35
2 16,67% #DA6343
3 33,33% #B45B51
4 50% #8F5360
5 66,67% #694A6E
6 83,33% #44427C
7 100% #1E3A8A

Goede toepassingen

  • UI-statusrampen: maak tussenkleuren voor hover, actief, geselecteerd of uitgeschakeld.
  • Gradientplanning: bepaal exacte HEX-stops voordat je in een andere tool een CSS-gradient schrijft.
  • Pictogram- en illustratievarianten: houd een kleine set verwante kleuren consistent.
  • Design-QA: vergelijk het kanaalgebaseerde middelpunt in plaats van op het oog te gokken.

Grenzen om rekening mee te houden

Deze blender accepteert geen rgb(), hsl(), kleurnamen, alpha-waarden of 8-cijferige HEX. De tool exporteert geen RGB, HSL, LAB, LCH, CSS-snippets, contrastchecks of toegankelijkheidsbeoordelingen. Gebruik daarvoor na het ophalen van de HEX-stops een converter, contrastchecker of gradientgenerator.

Veelgestelde vragen

Alleen HEX: 3 of 6 cijfers, met of zonder # ervoor. De tool leest geen rgb(), hsl(), alpha-kanalen of kleurnamen.

Ja. De eerste stap is de eerste kleur en de laatste stap is de tweede kleur. Alle overige stappen zijn de geïnterpoleerde kleuren ertussen.

De mix wordt kanaal voor kanaal berekend in RGB/sRGB. Dat is voorspelbaar en makkelijk in code te hergebruiken, maar het is niet hetzelfde als perceptuele LAB- of LCH-interpolatie.

Nee. De tool toont alleen kleurstalen en HEX-codes. Gebruik de gegenereerde HEX-waarden in je CSS of stuur ze naar een contrastchecker als toegankelijkheidsratio’s belangrijk zijn.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Binair naar hex-converter

Converteer binaire invoer naar een gewone hexwaarde in hoofdletters. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.