Readdy logo

HEX-färgpalettsgenerator

Utgå från en HEX-färg och skapa en komplett palett med tonskala, harmonifärger, semantiska variabler och kopieringsklar CSS.

Basfärg (HEX)
Stöder #RGB eller #RRGGBB, till exempel #0EA5E9

Snabbval

Palettöversikt
Se basfärgens relationer och bygg ett enhetligt system snabbare.

Basfärg (HEX)

#2563EB

Nyans: 221Mättnad: 83%Ljushet: 53%

Harmonifärger

Analog A
#45C7E4
Analog B
#6345E4
Komplementär
#E6AB2A
Triadisk A
#E2386D
Triadisk B
#6DE238
Tonskala (50–900)
Ljusa till mörka nyanser för bakgrunder, kanter, tillstånd och textkontrast.
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
Semantiska variabler
Använd rollerna direkt i gränssnittet för enhetlig produktdesign och varumärkesstil.
Primär

Primär

Huvudfärg för varumärke och CTA

#2563EB
Sekundär

Sekundär

Kompletterande varumärkesfärg

#6C59D5
Accent

Accent

Kontrastrika markeringar

#E3AA2D
Bakgrund

Bakgrund

Sidans bakgrundston

#F7F7F8
Yta

Yta

Kort och ytbehållare

#E8E9EE
Text

Text

Standardfärg för brödtext

#1B212C
CSS-variabler
Kopiera en gång och lägg in i din stilmall.
:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}

Skapa ett komplett färgsystem från en HEX-kod

Verktyget gör en basfärg till en strukturerad palett i realtid. Skriv ett HEX-värde, välj i färgväljaren eller slumpa en färg för nya idéer. Du ser direkt en palettöversikt med färgharmonier, tonskalor, semantiska färgvariabler och kopieringsklar CSS.

1

Steg 1: Ange eller välj basfärg

Skriv en HEX-kod, välj en färg i färgväljaren eller klicka på ”Slumpa färg” för att skapa en automatiskt.

2

Steg 2: Se palettöversikten

Se basfärgen tillsammans med automatiska harmonifärger som kompletterar och utökar designen.

3

Steg 3: Utforska tonskala och semantiska variabler

Granska tonskalan 50–900 med ljusa och mörka nyanser för bakgrunder, kanter, tillstånd och läsbar textkontrast. Semantiska variabler skapas också för praktisk gränssnittsdesign.

4

Steg 4: Kopiera CSS-variabler eller färgroller

Kopiera CSS-variablerna eller de semantiska rollerna med ett klick och klistra in dem i din stilmall.

Strukturerade färgpaletter för riktiga projekt

Den här HEX-generatorn ger mer än enkla färgprover. Den skapar strukturerade, systemklara paletter att använda direkt i produktgränssnitt, designsystem och varumärkesarbete.

  • Färger skapade med harmoni

    Skapa automatiskt kompletterande harmonifärger med visuell balans och kontrast.

  • Tonskala (50–900)

    Ljusa till mörka nyanser för gränssnittslager, tillstånd, bakgrunder och läsbar textkontrast.

  • Semantiska variabler för enhetliga gränssnitt

    Fördefinierade roller ger enhetliga färger för primära åtgärder, lyckade resultat, varningar och neutrala element.

  • Kopieringsklara CSS-variabler

    Exportera hela paletten som CSS-variabler med ett klick, redo för din stilmall.

Vanliga frågor

Ett verktyg som skapar en komplett färgpalett från ett enda HEX-värde, med tonvariationer och harmonifärger.
Ja. Ange valfri giltig HEX-färg, välj manuellt eller slumpa fram en färg.
Tonskalan 50–900 ger strukturerade nyanser för bakgrunder, kanter, hovring och tillgänglig textkontrast.
Kopiera variablerna och klistra in dem i CSS-filen eller designsystemets inställningar.

Skapa en skalbar färgpalett på sekunder