Hex-kleurkiezer en -converter (RGB, HSL, HSV)

Converteer hex naar RGB, HSL en HSV, kopieer harmoniestalen en exporteer CSS of JSON, rechtstreeks in uw browser.

JavaScript is vereist voor interactieve functies. Schakel JavaScript in uw browser in om deze tool te gebruiken.

Hex-kleur

Voer #RGB of #RRGGBB in (met of zonder #). Ongeldige waarden behouden de laatste goede conversie.

Conversies

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Harmonie-stalen

Harmonie type

Aantal staaltjes

Tint/schaduwstrip

Tint/schaduw stappen

Stalen exporteren

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Kies of plak een hexadecimale kleur, converteer naar RGB, HSL en HSV, genereer complementaire/analoge/triadische/monochroom stalen, kopieer waarden en exporteer CSS of JSON. Gratis, snel en draait volledig in uw browser.

Hoe u deze hex-kleurenkiezer gebruikt

Typ of plak een hexadecimale waarde, of gebruik de systeemeigen kiezer. De pagina converteert het onmiddellijk naar RGB, HSL en HSV, genereert harmoniestalen en een tint/schaduwstrook en houdt alles klaar voor kopiëren. Deel uw configuratie met de URL: de status wordt opgeslagen in de queryreeks.

Hex-, RGB-, HSL- en HSV-referentie

Hex is een compacte RGB-codering. RGB beschrijft rood/groen/blauw-kanalen. HSL drukt tint, verzadiging en lichtheid uit; HSV gebruikt tint, verzadiging en waarde (helderheid). Deze tool maakt gebruik van deterministische wiskunde in uw browser: geen uploads en geen externe API's.

Complementair, analoog, triadisch en monochromatisch

Complementair draait tint 180°. Analoge stappen kleuren door een vaste hoek rond je basis. Triadic maakt gebruik van 120° offsets. Monochromatisch houdt de tint vast en varieert de lichtheid. Telcontroles zijn van toepassing op analoge en monochrome modi.

CSS-variabelen en JSON-export

Exporteren produceert :root aangepaste eigenschappen met stabiele namen (bijvoorbeeld --color-base, --color-analogous-1) en JSON met baseHex, harmoniemodus en staallijsten voor scripts of ontwerptokens.

Veelgestelde vragen

Wordt #ABC uitgebreid naar zes cijfers?

Ja. De driecijferige hex wordt per cijferpaar uitgebreid, zodat #ABC #AABBCC wordt.

Wat gebeurt er als mijn hex ongeldig is?

U ziet een inlinefout. De laatste geldige kleur blijft in de conversierijen, de kiezer en de exports staan totdat u opnieuw een geldig vakje invoert.

Hoe worden harmoniekleuren berekend?

Ze zijn deterministisch: complementair is een kleurverschuiving van 180° op de HSL; analoog gebruikt vaste tintstappen; triadic gebruikt 120° offsets; monochromatisch varieert de lichtheid terwijl de tint en verzadiging van de basis behouden blijven.

Wat zit er in de JSON-export?

Stabiele toetsen: baseHex, Harmony, HarmonyCount waar van toepassing, HarmonySwatches (hexadecimale snaren), tintShadeStrip en stripCount – geschikt voor gereedschap of documentatie.

Kan ik mijn kleuren delen?

Ja. De URL wordt bijgewerkt met hex, harmoniemodus, aantallen en stripgrootte, zodat u een exacte opstelling kunt bookmarken of delen.