Readdy logo

HEX-väripalettigeneraattori

Aloita yhdestä HEX-väristä ja luo kokonainen paletti: sävyasteikko, harmoniavärit, semanttiset tokenit ja kopioitavat CSS-muuttujat.

Pohjaväri (HEX)
Tukee #RGB- tai #RRGGBB-muotoa, esimerkiksi #0EA5E9

Pikavalinnat

Paletin yleiskuva
Näe pohjavärisi suhteet ja rakenna yhtenäinen järjestelmä nopeammin.

Pohjaväri (HEX)

#2563EB

Sävy: 221Kylläisyys: 83%Vaaleus: 53%

Harmoniavärit

Lähiväri A
#45C7E4
Lähiväri B
#6345E4
Vastaväri
#E6AB2A
Kolmiväri A
#E2386D
Kolmiväri B
#6DE238
Sävyasteikko (50–900)
Vaaleasta tummaan valmiit sävyt taustoihin, reunoihin, tiloihin ja tekstikontrastiin.
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
Semanttiset tokenit
Käytä rooleja suoraan käyttöliittymässä pitääksesi tuotteen ja brändin ulkoasun yhtenäisenä.
Ensisijainen

Ensisijainen

Brändin ja CTA:n pääväri

#2563EB
Toissijainen

Toissijainen

Brändiä tukeva väri

#6C59D5
Korostus

Korostus

Vahvan kontrastin korostukset

#E3AA2D
Tausta

Tausta

Sivun taustasävy

#F7F7F8
Pinta

Pinta

Kortit ja pintasäiliöt

#E8E9EE
Teksti

Teksti

Leipätekstin oletusväri

#1B212C
CSS-muuttujat
Kopioi kerran ja lisää tyylitiedostoon.
: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;
}

Näin luot värijärjestelmän yhdestä HEX-koodista

Työkalu muuttaa pohjavärin jäsennellyksi paletiksi reaaliajassa. Syötä HEX-arvo, käytä värivalitsinta tai kokeile satunnaista väriä. Näet heti paletin väriharmoniat, sävyasteikot, semanttiset tokenit ja valmiit CSS-muuttujat.

1

Vaihe 1: Syötä tai valitse pohjaväri

Kirjoita HEX-värikoodi, valitse väri valitsimesta tai luo se automaattisesti painamalla Satunnainen väri.

2

Vaihe 2: Katso paletin yleiskuva

Näe pohjavärisi sekä automaattisesti luodut sopusointuiset värit, jotka täydentävät ja laajentavat ulkoasuasi.

3

Vaihe 3: Tutki sävyasteikkoa ja semanttisia tokeneita

Tarkastele vaaleasta tummaan etenevää asteikkoa 50–900 taustoihin, reunoihin, tiloihin ja tekstikontrastiin. Mukana myös käyttöliittymän semanttiset tokenit.

4

Vaihe 4: Kopioi CSS-muuttujat tai tokenit

Kopioi luodut CSS-muuttujat tai semanttiset roolit yhdellä napsautuksella ja liitä ne suoraan tyylitiedostoosi.

Jäsennellyt väripaletit oikeisiin projekteihin

HEX-väripalettigeneraattori tarjoaa enemmän kuin värinäytteet: saat jäsennellyn, järjestelmään sopivan paletin heti käyttöliittymiin, suunnittelujärjestelmiin ja brändityöhön.

  • Värien luonti harmonian pohjalta

    Luo automaattisesti täydentävät värit, jotka säilyttävät visuaalisen tasapainon ja kontrastin.

  • Sävyasteikko 50–900

    Vaaleasta tummaan optimoidut sävyt käyttöliittymän tasoihin, tiloihin, taustoihin ja luettavaan tekstikontrastiin.

  • Semanttiset tokenit yhtenäiseen käyttöliittymään

    Valmiit roolit tukevat johdonmukaista käyttöä ensisijaisissa toiminnoissa, onnistumistiloissa, varoituksissa ja neutraaleissa elementeissä.

  • Valmiit CSS-muuttujat

    Vie koko palettisi CSS-muuttujina yhdellä napsautuksella suoraan tyylitiedostossa käytettäväksi.

Usein kysytyt kysymykset

Se luo täydellisen väripaletin yhdestä HEX-väriarvosta, mukaan lukien sävyvaihtelut ja harmoniset värit.
Kyllä. Syötä kelvollinen HEX-väri, valitse se käsin tai luo satunnainen väri.
Sävyasteikko 50–900 tarjoaa jäsennellyt sävyt taustoihin, reunoihin, osoitintiloihin ja saavutettavaan tekstikontrastiin.
Kopioi muuttujat ja liitä ne CSS-tiedostoon tai suunnittelujärjestelmän asetuksiin.

Luo skaalautuva väripaletti sekunneissa