Värvikoodi generaator ja Picker

    Genereeri värvikoodid, variatsioonid, harmooniad ja kontrolli kontrastsuse suhteid.

    Värvimuundus

    HEX

    #c9a0dc

    Light Wisteria

    HEX
    #c9a0dc
    HSL
    281, 46, 75
    RGB
    201, 160, 220
    XYZ
    50, 43, 73
    CMYK
    9, 27, 0, 14
    LUV
    71,33,-36
    LAB
    71, 26, -25
    HWB
    281, 63, 14

    Variatsioonid

    Selle jaotise eesmärk on täpselt toota sinu valitud värvi toone (lisatud puhas valge) ja varje (lisatud puhas must) 10% sammudega.

    Pro nõuanne: Kasuta varje hover-olekute ja varjude jaoks, toone esiletõstete ja taustade jaoks.

    Varjud

    Tumedamad variatsioonid, mis on loodud musta lisamisega sinu põhivärvile.

    Toonid

    Heledamad variatsioonid, mis on loodud valge lisamisega sinu põhivärvile.

    Levinud kasutusjuhud

    • Kasutajaliidese komponentide olekud (hover, aktiivne, keelatud)
    • Sügavuse loomine varjude ja esiletõstetega
    • Järjepidevate värvisüsteemide loomine

    Disainisüsteemi nõuanne

    Need variatsioonid moodustavad ühtse värvipaleti aluse. Ekspordi need, et säilitada järjepidevus kogu oma projektis.

    Värvikombinatsioonid

    Igal harmoonial on oma meeleolu. Kasuta harmooniaid, et leida värvikombosid, mis hästi kokku sobivad.

    Kuidas kasutada

    Klõpsa mis tahes värvil, et kopeerida selle hex väärtus. Need kombinatsioonid on matemaatiliselt tõestatud, et luua visuaalset harmooniat.

    Miks see on oluline

    Värviharmooniad loovad tasakaalu ja kutsuvad esile spetsiifilisi emotsioone sinu disainides.

    Komplement

    Värv ja selle vastand värvirattal, +180 kraadi tooni. Kõrge kontrast.

    #c9a0dc
    Parim: Mõjusa disaini, CTA-de, logode jaoks

    Lahutatud komplementaarne

    Värv ja kaks selle komplementaari kõrval asuvat värvi, +/-30 kraadi tooni peavärvi vastas. Julge nagu sirge komplement, kuid mitmekülgsem.

    Parim: Elavad, kuid tasakaalustatud paigutused

    Triadiline

    Kolm värvi, mis on värvirattal ühtlaselt jaotatud, igaüks 120 kraadi tooni kaugusel. Parim, kui üks värv domineerib ja teisi kasutatakse aktsentidena.

    Parim: Mängulised, energilised disainid

    Analoogsed

    Kolm sama luminantsuse ja küllastusega värvi, mille toonid on värvirattal kõrvuti, 30 kraadi kaugusel. Sujuvad üleminekud.

    Parim: Loodusest inspireeritud, rahustavad liidesed

    Monokromaatiline

    Kolm sama tooni värvi, mille luminantsusväärtused on +/-50%. Peen ja rafineeritud.

    Parim: Minimalistlikud, rafineeritud disainid

    Tetradiline

    Kaks komplekti täiendvärve, eraldatud 60 kraadi võrra tooni järgi.

    Parim: Rikkalikud, mitmekesised värviskeemid

    Värviteooria põhimõtted

    Tasakaal

    Kasuta ühte domineerivat värvi, toeta sekundaarsega ja kasuta aktsente säästlikult.

    Kontrast

    Tagage piisav kontrast loetavuse ja ligipääsetavuse jaoks.

    Harmoonia

    Värvid peaksid koos töötama, et luua ühtne visuaalne kogemus.

    Värvikontrasti kontrollija

    Testi värvikombinatsioone, et tagada nende vastavus WCAG juurdepääsetavuse standarditele teksti loetavuse osas.

    Teksti värv
    Taustavärv
    Kontrastsus
    1.00
    Fail
    Väga halb
    Väike tekst
    ✖︎
    Suur tekst
    ✖︎
    WCAG standardid
    AA:Minimaalne kontrastsuse suhe 4,5:1 tavalise teksti ja 3:1 suure teksti jaoks. Nõutav enamikul veebisaitidel.
    AAA:Tõhustatud kontrastsuse suhe 7:1 tavalise teksti ja 4,5:1 suure teksti jaoks. Soovitatav optimaalseks juurdepääsetavuseks.
    Ebapiisav kontrastsus kõigi tekstisuuruste jaoks - ei vasta WCAG standarditele.

    Täiustatud kontrastikontroll

    Peenhäälesta liuguritega, mitme eelvaatega ja rohkem

    Igaüks on geenius. Aga kui sa hindad kala tema võime järgi puu otsa ronida, elab ta kogu oma elu uskudes, et on rumal.

    - Albert Einstein

    Tehnilised formaadid

    Praktilised formaadid

    Värvianalüüs

    Pimeduse simulaator

    Loomingulised aspektid