HedgieTools

Väripalettigeneraattori

Aloita pääväristäsi ja saat koko käyttöliittymäpaletin: toissijaisen ja tertiäärisen värin, onnistumis-, varoitus- ja vaaravärin sekä neutraalit värit, kaikki sävyineen ja kontrastitarkistuksineen.

Pääväri

Kirjoita arvo tai valitse väri: muu paletti rakennetaan sen ympärille.

Toissijainen ja tertiäärinen
Arvon muoto

Kirjoita HEX-arvo, esimerkiksi #2563EB, tai valitse väri napsauttamalla neliötä.

Palettisi

Kopioi arvo tai sävy (50–950) napsauttamalla sitä. Kynällä voit korvata ehdotetun värin omallasi: se pysyy samana, vaikka vaihtaisit pääväriä.

  • —

    Ensisijainen

    oma värisi
  • —

    Toissijainen

    vastaväri
  • —

    Tertiäärinen

    lähes vastaväri
  • —

    Tiedoksi

    sininen
  • —

    Onnistuminen

    vihreä
  • —

    Varoitus

    oranssi
  • —

    Vaara

    punainen
  • —

    Neutraali

    sävytetty harmaa

Vaalean ja tumman teeman tokenit

Käyttöliittymäsi käyttövärit valmiina vaaleaan ja tummaan teemaan. Jokainen viittaa paletin sävyyn. Kopioi napsauttamalla.

  • --backgroundSivun tausta
  • --surfaceKortit ja paneelit
  • --surface-mutedToissijaiset alueet
  • --borderReunat ja erottimet
  • --textPääteksti
  • --text-mutedToissijainen teksti
  • --primaryPainikkeet ja linkit
  • --primary-hoverHover-tila
  • --on-primaryTeksti ensisijaisen värin päällä
  • --focus-ringFokusreunus
  • --secondaryToissijainen korostus
  • --tertiaryTertiäärinen korostus
  • --infoLisätietoja
  • --info-softTietoilmoituksen tausta
  • --successOnnistuminen
  • --success-softOnnistumisen tausta
  • --warningVaroitus
  • --warning-softVaroituksen tausta
  • --dangerVaara, virhe
  • --danger-softVirheen tausta

Sopivat värit

Klassiset väriharmoniat pääväristäsi kuvituksiin, kaavioihin tai korostuksiin.

  • Vastavärit

    vastakkainen väri

  • Jaetut vastavärit

    pehmeämpi kuin vastaväri

  • Lähivärit

    vierekkäiset värit

  • Kolmisointu

    kolme tasapainoista väriä

  • Nelisointu

    neljä väriä neliössä

  • Yksivärinen

    yksi värisävy, eri voimakkuuksia

Esikatselu ja kontrasti

Paletti muutamassa käyttöliittymäelementissä ja kunkin väriparin luettavuus WCAG-sääntöjen mukaan.

Esikatselun teema
Sivun otsikkoToissijainen, vähemmän tärkeä teksti otsikon alla.
Kortti, jossa on linkki ja painikkeita.
EnsisijainenToissijainenTertiäärinen
Tiedoksi · Päivitys on saatavilla.
Onnistuminen · Muutoksesi on tallennettu.
Varoitus · Tilauksesi päättyy pian.
Virhe · Maksu epäonnistui.
  • Teksti taustalla
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Toissijainen teksti taustalla
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Linkki taustalla
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Ensisijainen painike
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Toissijainen painike
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Tertiäärinen teksti taustalla
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Tietoilmoitus
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Onnistumisilmoitus
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Varoitusilmoitus
    Suhde—Normaali teksti—Suuri teksti—AAA—
  • Vaarailmoitus
    Suhde—Normaali teksti—Suuri teksti—AAA—

Vienti

Vie paletti yllä valitussa muodossa (HEX).

Syötä pääväri, niin koodi luodaan.

Paletin CSS-muuttujat (--color-primary-500…). Tokenit viittaavat näihin muuttujiin; ota tumma teema käyttöön lisäämällä html-elementtiin data-theme="dark".

Tietoa väripalettigeneraattorista

Valitse brändisi pääväri ja saat kaiken, mitä käyttöliittymä sen ympärille tarvitsee: rinnakkaisvärit, tilavärit, neutraalit, sävyt, vaalean ja tumman teeman tokenit, kontrastitarkistukset ja valmiin koodin liitettäväksi – poistumatta selaimestasi.

Koko paletti yhdestä väristä

Työkalu johtaa pääväristäsi toissijaisen ja tertiäärisen värin, sen tyyliin sopivat tilavärit (tieto, onnistuminen, varoitus, vaara) sekä hieman sävytetyt harmaat taustoille ja tekstille.

Käyttövalmiit sävyt

Jokaisesta väristä saat yksitoista sävyä vaaleimmasta (50) tummimpaan (950) taustoille, reunoille, hover-tiloille ja tekstille. Jos ehdotettu väri ei miellytä, korvaa se omallasi: sen sävyt seuraavat mukana.

Vaalean ja tumman teeman tokenit

Tausta, pinta, reunat, teksti, hover, fokus ja ilmoitusten taustat: jokainen käyttöväri viittaa paletin sävyyn, ja sillä on yksi arvo vaaleaa ja toinen tummaa teemaa varten.

Tarkistettu kontrasti

Jokainen tekstin ja taustan väripari arvioidaan WCAG-sääntöjen mukaan: 4,5:1 normaalille tekstille, 3:1 suurelle tekstille ja 7:1 AAA-tasolle.

Vienti CSS-, Tailwind- ja JSON-muotoon

Kopioi jokainen arvo HEX-, RGB-, HSL- tai OKLCH-muodossa tai lataa CSS-muuttujatiedosto, Tailwind v4 -teema, Tailwind v3 -asetukset, JSON tai pelkkä luettelo. Kaikki tapahtuu selaimessasi: mitään ei lähetetä eikä tallenneta.

Samankaltaiset työkalut