Hexfärgväljare och omvandlare (RGB, HSL, HSV)

Konvertera hex till RGB, HSL och HSV, kopiera harmony-prover och exportera CSS eller JSON – direkt i din webbläsare.

JavaScript krävs för interaktiva funktioner. Vänligen aktivera JavaScript i din webbläsare för att använda det här verktyget.

Hexfärgad

Ange #RGB eller #RRGGBB (med eller utan #). Ogiltiga värden behåller den senaste goda konverteringen.

Konverteringar

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Harmony swatches

Harmoni typ

Antal prover

Nyans/nyansremsa

Nyans/skuggsteg

Exportera färgrutor

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
}

Välj eller klistra in en hex-färg, konvertera till RGB, HSL och HSV, generera komplementära/analoga/triadiska/monokroma färgrutor, kopiera värden och exportera CSS eller JSON. Gratis, snabb och körs helt i din webbläsare.

Hur man använder denna hex-färgväljare

Skriv eller klistra in ett hexadecimalt värde eller använd den inbyggda väljaren. Sidan konverterar den till RGB, HSL och HSV omedelbart, genererar harmoniprover och en nyans-/nyansremsa och håller allt kopieringsklart. Dela din inställning med URL-adressen – tillståndet lagras i frågesträngen.

Hex-, RGB-, HSL- och HSV-referens

Hex är en kompakt RGB-kodning. RGB beskriver röd/grön/blå kanaler. HSL uttrycker nyans, mättnad och ljushet; HSV använder nyans, mättnad och värde (ljusstyrka). Det här verktyget använder deterministisk matematik i din webbläsare – inga uppladdningar och inga externa API:er.

Komplementär, analog, triadisk och monokromatisk

Komplementär roterar nyansen 180°. Analoga steg nyans av en fast vinkel runt din bas. Triadic använder 120° offset. Monokromatisk håller nyans och varierar ljushet. Räknekontroller gäller för analoga och monokromatiska lägen.

CSS-variabler och JSON-export

Export producerar anpassade :root-egenskaper med stabila namn (till exempel --color-base, --color-analogous-1) och JSON med baseHex, harmoniläge och urvalslistor för skript eller designtokens.

Vanliga frågor

Expanderas #ABC till sex siffror?

Ja. Tresiffrig hex expanderas per sifferpar, så #ABC blir #AABBCC.

Vad händer om min hex är ogiltig?

Du ser ett inline-fel. Den sista giltiga färgen stannar i konverteringsraderna, väljaren och exporten tills du anger en giltig hex igen.

Hur beräknas harmonifärger?

De är deterministiska: komplementär är en 180° nyansförskjutning i HSL; analoga använder fasta nyanssteg; triadic använder 120° offset; monokromatisk varierar lätthet samtidigt som nyans och mättnad behålls från basen.

Vad finns i JSON-exporten?

Stabila nycklar: baseHex, harmony, harmonyCount där tillämpligt, harmonySwatches (hexsträngar), tintShadeStrip och stripCount—lämpliga för verktyg eller dokumentation.

Kan jag dela mina färger?

Ja. URL-adressen uppdateras med hex, harmoniläge, antal och remsstorlek så att du kan bokmärka eller dela en exakt inställning.