Spalvų konvertavimas
#f3d69d
New Orleans
Variacijos
Šio skyriaus tikslas yra tiksliai sukurti jūsų pasirinktos spalvos atspalvius (pridėjus gryną baltą) ir šešėlius (pridėjus gryną juodą) 10% intervalais.
Profesionalo patarimas: Naudok šešėlius hover būsenoms ir šešėliams, atspalvius akcentams ir fonams.
Šešėliai
Tamsesnės variacijos, sukurtos pridedant juodą prie jūsų pagrindinės spalvos.
Atspalviai
Šviesesnės variacijos, sukurtos pridedant baltą prie jūsų pagrindinės spalvos.
Dažni naudojimo atvejai
- • UI komponentų būsenos (hover, aktyvus, išjungtas)
- • Gylio kūrimas su šešėliais ir akcentais
- • Nuoseklių spalvų sistemų kūrimas
Dizaino sistemos patarimas
Šios variacijos sudaro nuoseklios spalvų paletės pagrindą. Eksportuok jas, kad išlaikytum nuoseklumą visame projekte.
Spalvų deriniai
Kiekviena harmonija turi savo nuotaiką. Naudok harmonijas, kad sugalvotum spalvų derinius, kurie gerai dera tarpusavyje.
Kaip naudoti
Spustelėk bet kurią spalvą, kad nukopijuotum jos hex reikšmę. Šie deriniai matematiškai įrodyti, kad sukuria vizualinę harmoniją.
Kodėl tai svarbu
Spalvų harmonijos sukuria pusiausvyrą ir sukelia specifines emocijas tavo dizainuose.
Komplementas
Spalva ir jos priešingybė spalvų rate, +180 laipsnių atspalvio. Didelis kontrastas.
Padalintas komplementas
Spalva ir dvi gretimos jos komplementui, +/-30 laipsnių atspalvio nuo pagrindinės spalvos priešingos vertės. Drąsus kaip tiesus komplementas, bet universalesnis.
Triadinė
Trys spalvos, tolygiai išdėstytos spalvų rate, kiekviena 120 laipsnių atspalvio atstumu. Geriausia leisti vienai spalvai dominuoti ir naudoti kitas kaip akcentus.
Analoginė
Trys tos pačios šviesumo ir sodrumo spalvos su atspalviais, kurie yra gretimi spalvų rate, 30 laipsnių atstumu. Sklandūs perėjimai.
Monochrominė
Trys tos pačios atspalvio spalvos su šviesumo vertėmis +/-50%. Subtilus ir rafinuotas.
Tetradinė
Dvi papildomų spalvų poros, atskirtos 60 laipsnių atspalviu.
Spalvų teorijos principai
Balansas
Naudok vieną dominuojančią spalvą, palaikyk antrine ir akcentuok retai.
Kontrastas
Užtikrink pakankamą kontrastą skaitymui ir prieinamumui.
Harmonija
Spalvos turėtų veikti kartu, kad sukurtų vieningą vizualinę patirtį.
Spalvų kontrasto tikrintuvas
Išbandyk spalvų derinius, kad įsitikintum, jog jie atitinka WCAG prieinamumo standartus teksto įskaitomumui.
Teksto spalva
Fono spalva
Kontrastas
WCAG standartai
Išplėstinis kontrasto tikrintuvas
Tobulinkite su slankikliais, keliais peržiūros būdais ir daugiau
Kiekvienas yra genijus. Bet jei vertinsi žuvį pagal jos gebėjimą lipti į medį, ji visą gyvenimą manytų, kad yra kvaila.