Softonic

Färgtongeneratör

Steg 1 / 2
Nästa

En nyans uppstår när man blandar en färg med vitt – varje steg blir ljusare. Generatorn tar din grundfärg och skapar en stege av gradvis ljusare nyanser, användbar för färgpalettsintervall i designsystem (100 → 400), subtila bakgrundsfyllningar, hover-tillstånd på mörka primärfärger och bakgrunder för emblem eller varningar där accentfärgen behöver finnas med men hållas diskret.

Hur nyanser genereras

  1. 1

    Välj en grundfärg

    Använd färgväljaren för att välja en grundfärg. Fungerar bäst med grundfärger av medelhög ljushet; nästan vita grundfärger har litet utrymme att ljusna ytterligare.

  2. 2

    Välj antal steg

    Mellan 3 och 20 steg, standard 10. Med 10 får du en fullständig designsystemsskala; för snabbt gränssnittsarbete räcker färre steg.

  3. 3

    Blanda med vitt i ökande procentandelar

    Med 10 steg blandar den första nyansen cirka 9 % vitt och den sista cirka 91 %. Interpoleringen sker direkt i RGB-rymden, så mättnaden avtar när ljusheten ökar.

  4. 4

    Läs av hexvärdena

    Varje färgruta visar sitt hexvärde. Använd dem i dina CSS-variabler, Tailwind-skala eller Sass-karta.

Exempel på nyansskala från #3B82F6

Tabellen nedan visar vad verktyget producerar med standardinställningen 10 steg:

Steg Hex Vitt Typisk roll
0 #3B82F6 Bas Huvudvarumärke (blå-500)
1 #4C8DF6 9,1 % Lätt markering på mörk bakgrund
2 #5E98F7 18,2 % motsvarar blå 400
3 #70A4F8 27,3 %
4 #82AFF9 36,4 % blått-300
5 #94BAFA 45,5 %
6 #A5C6FA 54,5 %
7 #B7D1FB 63,6 %
8 #C9DCFC 72,7 % Subtil bakgrund (blå-100/200)
9 #DBE8FD 81,8 %
10 #EDF3FE 90,9 % blå-50

Ljus nyans + mörk nyans = designsystemets skala

Kombinera nyanser (ljusare) och toner (mörkare) kring en enda grund för att skapa en hel skala:

  • 50, 100, 200, 300, 400: nyanser (från den ljusaste till något ljusare än bastonen)
  • 500: bas
  • 600, 700, 800, 900: nyanser (lätt mörkare än bastonen till den mörkaste)

Detta är kompatibelt med Tailwind, Material, Open Color, Radix UI och de flesta populära designsystemen. Skalor med 10–11 steg är vanliga.

Där nyanser sticker ut i gränssnittet

  • Bakgrunder för varningar och märken: text i error-500 på en error-50-bakgrund = omedelbar igenkänning utan att skrika visuellt.
  • Hover-tillstånd på mörka bakgrunder: knappar på en mörk yta ljusnar mot en ljusare nyans vid hovring.
  • Sekventiella skalor i datavisualisering: en värde-till-färg-mappning där höga värden är mättade och låga värden tonar bort mot vitt.
  • Platshållare för avatar-/diagramkategorier: en nyans av primärfärgen när bild eller data saknas.
  • Ytlager: kortets bakgrund tonas lätt med varumärkesfärgen för en subtil varumärkesnärvaro.

Varför de ljusaste nyanserna förlorar mättnad

Generatorn blandar direkt i RGB-rymden. När vitt läggs till sjunker mättnaden snabbare än den upplevda ljusheten stiger, så de översta stegen ser bleka eller gråaktiga ut. Det är normalt beteende vid RGB-blandning:

  • RGB-blandning (detta verktyg): enkelt och förutsägbart. Mättnaden avtar jämnt; mycket ljusa steg ser avmättade ut.
  • OKLCH- eller LAB-interpolering: används av designprogram för att hålla kroman stabilare vid ljusning. Den här generatorn erbjuder inte dessa modeller; om du behöver nyanser med stabil färgton, skapa dem i ett OKLCH-kapabelt designprogram.
  • Ljushet i HSL: höjer ljusheten utan att blanda vitt; resultatet kan se pastellartat ut snarare än som färg.

Nedre gräns för nyanser i ett användbart gränssnitt

Mycket ljusa nyanser (steg 8+) närmar sig rent vitt och blir visuellt omöjliga att skilja på en vit bakgrund. Användbara som:

  • Subtila markeringar bakom texten.
  • Nästan osynliga radstrimmor i täta tabeller.

Men detta är inte lämpligt för knappar eller etiketter där användaren behöver se en tydlig färg. Kombinera ljusa nyanser med mörkare element (ram, text) för att ge dem en tydlig grund.

Vanliga frågor

Generatorn blandar direkt i RGB, och RGB-interpolering drar ner mättnaden när ljusheten stiger, så de översta stegen glider mot vitt. Interpolerar du i OKLCH eller LAB behålls däremot en synlig antydan av grundfärgtonen; använd ett OKLCH-kapabelt designprogram när det spelar roll.

Liknande men inte identiskt. Att blanda med vitt minskar både mättnad och ljusstyrka proportionellt, medan HSL-ljushetsjustering höjer L oberoende. Nyanser känns mer naturliga (som färg), medan HSL-ljushet kan dra mot orealistiska pasteller.

Ja – mörkt läge kräver vanligtvis en annan “ljushetsstege” eftersom bakgrunderna redan är mörka. Många system vänder på skalan (50 i mörkt läge motsvarar vitt-på-mörkt av 900 i ljust läge).

Generera en femstegs stege av ljusa nyanser (50–500) och en femstegs stege av mörka nyanser (500–900) från samma grundfärg. Slå ihop dem till en komplett designsystemsskala med 10–11 steg.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.

Förenklare för boolesk algebra

Utvärdera ett booleskt uttryck för varje kombination av indata och visa den fullständiga sanningstabellen. Stöder upp till fem variabler och operatorerna &, |, ! och ^.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.