HedgieTools

Színpaletta-generátor

Indulj ki a fő színedből, és megkapod a teljes felületi palettát: másodlagos, harmadlagos, siker, figyelmeztetés, veszély és semleges színek, árnyalatokkal és kontrasztellenőrzéssel.

A fő színed

Írj be egy értéket, vagy válassz színt: a paletta többi része erre épül.

Másodlagos és harmadlagos
Értékformátum

Írj be egy HEX-értéket, például #2563EB, vagy kattints a négyzetre a szín kiválasztásához.

A palettád

Kattints egy értékre vagy egy árnyalatra (50–950) a másoláshoz. A ceruzával a javasolt szín helyett a sajátodat adhatod meg: ez akkor is megmarad, ha módosítod a fő színt.

  • —

    Elsődleges

    a te színed
  • —

    Másodlagos

    komplementer
  • —

    Harmadlagos

    közel komplementer
  • —

    Információ

    kék
  • —

    Siker

    zöld
  • —

    Figyelmeztetés

    narancs
  • —

    Veszély

    piros
  • —

    Semleges

    színezett szürke

Világos és sötét tokenek

A felületed funkcionális színei, a világos és a sötét témához előkészítve. Mindegyik a paletta egy árnyalatára hivatkozik. Kattints rá a másoláshoz.

  • --backgroundOldal háttere
  • --surfaceKártyák és panelek
  • --surface-mutedMásodlagos területek
  • --borderSzegélyek és elválasztók
  • --textFő szöveg
  • --text-mutedMásodlagos szöveg
  • --primaryGombok és linkek
  • --primary-hoverRámutatáskor
  • --on-primarySzöveg elsődleges színen
  • --focus-ringFókuszkeret
  • --secondaryMásodlagos kiemelőszín
  • --tertiaryHarmadlagos kiemelőszín
  • --infoInformációk
  • --info-softInformáció háttere
  • --successSiker
  • --success-softSiker háttere
  • --warningFigyelmeztetés
  • --warning-softFigyelmeztetés háttere
  • --dangerVeszély, hiba
  • --danger-softHiba háttere

Hozzáillő színek

Klasszikus színharmóniák a fő színed körül illusztrációkhoz, diagramokhoz vagy kiemelésekhez.

  • Komplementer

    az ellentétes szín

  • Osztott komplementer

    lágyabb az ellentétesnél

  • Analóg

    a szomszédos színek

  • Triád

    három kiegyensúlyozott szín

  • Tetrád

    négy szín négyzetben

  • Monokróm

    egy színezet, többféle intenzitás

Előnézet és kontraszt

A paletta néhány felületi elemen, és hogy a WCAG-szabályok szerint mennyire olvashatók az egyes párosítások.

Előnézet témája
OldalcímMásodlagos, kevésbé fontos szöveg a cím alatt.
Egy kártya linkkel és gombokkal.
ElsődlegesMásodlagosHarmadlagos
Információ · Frissítés érhető el.
Siker · A módosításaidat elmentettük.
Figyelmeztetés · Az előfizetésed hamarosan lejár.
Hiba · A fizetés nem sikerült.
  • Szöveg a háttéren
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Másodlagos szöveg a háttéren
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Link a háttéren
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Elsődleges gomb
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Másodlagos gomb
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Harmadlagos szöveg a háttéren
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Információs üzenet
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Sikerüzenet
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Figyelmeztető üzenet
    Arány—Normál szöveg—Nagy szöveg—AAA—
  • Hibaüzenet
    Arány—Normál szöveg—Nagy szöveg—AAA—

Exportálás

Itt kapod meg a palettát a fent kiválasztott formátumban (HEX).

Adj meg egy fő színt a kód létrehozásához.

CSS-változók a palettához (--color-primary-500…). A tokenek ezekre a változókra hivatkoznak; a sötét témát a html elem data-theme="dark" attribútumával kapcsolhatod be.

A színpaletta-generátorról

Válaszd ki a márkád fő színét, és megkapod köré mindazt, amire egy felületnek szüksége van: kísérőszíneket, állapotszíneket, semleges színeket, árnyalatokat, világos és sötét tokeneket, kontrasztellenőrzést és beilleszthető kódot – mindezt a böngésződ elhagyása nélkül.

Teljes paletta egyetlen színből

Az eszköz a fő színedből levezet egy másodlagos és egy harmadlagos színt, a stílusához illő állapotszíneket (információ, siker, figyelmeztetés, veszély), valamint enyhén színezett szürkéket a hátterekhez és a szövegekhez.

Használatra kész árnyalatok

Minden szín tizenegy árnyalatban érhető el, a legvilágosabbtól (50) a legsötétebbig (950): hátterekhez, szegélyekhez, rámutatási állapotokhoz és szövegekhez. Ha egy javasolt szín nem tetszik, cseréld le a sajátodra: az árnyalatai követik.

Világos és sötét tokenek

Háttér, felület, szegély, szöveg, rámutatás, fókusz és értesítések háttere: minden funkcionális szín a paletta egy árnyalatára hivatkozik, egy értékkel a világos és eggyel a sötét témához.

Ellenőrzött kontraszt

Minden szöveg–háttér párosítást a WCAG-szabályok alapján értékelünk: normál szövegnél 4,5:1, nagy szövegnél 3:1, az AAA szinthez pedig 7:1 a követelmény.

Exportálás: CSS, Tailwind, JSON

Másold ki bármelyik értéket HEX, RGB, HSL vagy OKLCH formátumban, vagy tölts le egy CSS-változófájlt, egy Tailwind v4 témát, egy Tailwind v3 konfigurációt, JSON-t vagy egy egyszerű listát. Minden a böngésződben történik: semmit sem küldünk el, és semmit sem mentünk.

Kapcsolódó eszközök