Velg en fargekombinasjon online. Kule fargekombinasjoner jukseark

Gutter, vi legger sjelen vår i siden. Takk for det
for å oppdage denne skjønnheten. Takk for inspirasjon og gåsehud.
Bli med oss kl Facebook Og I kontakt med

Ordning nr. 1. Komplementær kombinasjon

Komplementære, eller ekstra, kontrasterende, er farger som er plassert på motsatte sider av Itten-fargehjulet. Kombinasjonen deres ser veldig livlig og energisk ut, spesielt med maksimal fargemetning.

Ordning nummer 2. Triad - en kombinasjon av 3 farger

Kombinasjonen av 3 farger som ligger i samme avstand fra hverandre. Gir høy kontrast samtidig som harmonien opprettholdes. En slik komposisjon ser ganske livlig ut selv når du bruker bleke og desaturated farger.

Opplegg nr. 3. En lignende kombinasjon

En kombinasjon av 2 til 5 farger plassert ved siden av hverandre på fargehjulet (ideelt sett 2-3 farger). Inntrykk: rolig, avslappende. Et eksempel på en kombinasjon av lignende dempede farger: gul-oransje, gul, gul-grønn, grønn, blå-grønn.

Ordning nr. 4. Separat-komplementær kombinasjon

En variant av en komplementær kombinasjon av farger, bare i stedet for den motsatte fargen, brukes fargene ved siden av den. Kombinasjonen av hovedfargen og to ekstra. Dette opplegget ser nesten like kontrasterende ut, men ikke så anspent. Hvis du ikke er sikker på at du kan bruke komplementære kombinasjoner riktig, bruk separate komplementære.

Opplegg nummer 5. Tetrad - en kombinasjon av 4 farger

Et fargevalg der én farge er den viktigste, to er komplementære, og en annen fremhever aksentene. Eksempel: blå-grønn, blå-fiolett, rød-oransje, gul-oransje.

Opplegg nummer 6. Firkant

Kombinasjoner av individuelle farger

Hvit: passer til alt. Den beste kombinasjonen med blått, rødt og svart.
Beige: med blå, brun, smaragd, svart, rød, hvit.
Grå: med fuchsia, rød, lilla, rosa, blå.
Rosa: med brun, hvit, mintgrønn, oliven, grå, turkis, babyblå.
Fuchsia (mørk rosa): med grå, brun, lime, mintgrønn, brun.
Rød: med gul, hvit, brun, grønn, blå og svart.
Tomatrød: blå, mintgrønn, sand, kremhvit, grå.
Kirsebærrød: asurblå, grå, lys oransje, sand, blekgul, beige.
Bringebærrød: hvit, svart, damaskrose.
Brun: lys blå, krem, rosa, fawn, grønn, beige.
Lysebrun: blekgul, kremhvit, blå, grønn, lilla, rød.
Mørk brun: sitrongul, himmelblå, mintgrønn, lilla rosa, lime.
Rødbrun: rosa, mørkebrun, blå, grønn, lilla.
Oransje: blå, blå, lilla, lilla, hvit, svart.
Lys oransje: grå, brun, oliven.
Mørk oransje: blek gul, oliven, brun, kirsebær.
Gul: blå, lilla, lyseblå, lilla, grå, svart.
Sitrongul: kirsebærrød, brun, blå, grå.
Blek gul: fuchsia, grå, brun, nyanser av rødt, brun, blått, lilla.
Gylden gul: grå, brun, asurblå, rød, svart.
Oliven: oransje, lysebrun, brun.
Grønn: gyllenbrun, oransje, salat, gul, brun, grå, krem, svart, kremhvit.
Salatfarge: brun, brun, fawn, grå, mørkeblå, rød, grå.
Turkis: fuchsia, kirsebærrød, gul, brun, krem, mørk lilla.
Elektriker er vakker i kombinasjon med gylden gul, brun, lys brun, grå eller sølv.
Blå: rød, grå, brun, oransje, rosa, hvit, gul.
Mørk blå: lys lilla, himmelblå, gulgrønn, brun, grå, blekgul, oransje, grønn, rød, hvit.
Syrin: oransje, rosa, mørk lilla, oliven, grå, gul, hvit.
Mørk lilla: gyldenbrun, blekgul, grå, turkis, mintgrønn, lys oransje.
Svart er allsidig, elegant, ser ut i alle kombinasjoner, best med oransje, rosa, salat, hvit, rød, lilla eller gul.

Å velge et fargeskjema for en nettside er et av de viktigste trinnene i designprosessen. Å velge en kombinasjon av farger er en ganske kompleks og kreativ prosess. Heldigvis er det mange tjenester som kan gi betydelig støtte for å ta det riktige valget.

Noen av ressursene som er nevnt i denne oversikten lar deg velge mellom et stort antall ferdige fargeskjemaer, mens andre lar deg interaktivt bygge ditt eget oppsett.

Kuler

Adobe Kuler inneholder et stort bibliotek med ferdiglagde fargeskjemaer. Du kan se diagrammet på nettet og laste det ned for bruk i Adobe Creative Suite-produktene.

Color Lovers har for tiden nesten 2 millioner brukerlagde fargeskjemaer. Du kan se dem sortert etter dato, vurdering, antall visninger.

ColoRotate har et bibliotek med ferdiglagde fargevalg. Du kan også lage ditt eget opplegg med det unike 3D-verktøyet. Fargeskjemaet kan brukes direkte i Photoshop og Fireworks ved hjelp av ColoRotate-plugin.

Color Scheme Designer lar deg velge type fargeskjema (mono, komplementær, triade, tetrad, analog). Da vil det være mulig å justere fargene og se effekten av opplegget på et eksempel.

ColorSchemer har et stort bibliotek med brukerlagde fargeskjemaer. Du kan sortere dem etter publiseringsdato, vurdering eller antall nedlastinger.

Pictaculous er et enkelt online fargeskjemagenereringsverktøy. Du kan laste opp et bilde og tjenesten genererer et diagram som skal brukes med bildet.

Farge Spire

Color Spire er en veldig brukervennlig tjeneste. Du velger en grunnfarge og den foreslår et fargevalg. Du kan også se utseendet til opplegget på en enkel mal.

En liten, stilig og pen fargevelger for HTML-sidedesign og andre oppgaver som krever matchende farger.

La oss se hva dette programmet kan gjøre.

Fargepunktinnstilling

Siden programmet ikke krever installasjon, lagrer du bare arkivet på harddisken, pakker det ut på et passende sted, åpner mappen og kjører filen med .exe-utvidelsen. Som standard starter programmet som en liten knapp:

Arbeider med programmet

Vi klikker på dette ikonet og programvinduet åpnes foran oss:

Skjerm

I denne fanen lar programmet deg "ta" hvilken som helst farge direkte fra skjermen. Det vil si fra hvilken som helst del av skjermen som var synlig på det tidspunktet programmet ble lansert. Hele skjermen vises i redusert størrelse i vinduet Velg område.

Hvis du klikker på en del i dette vinduet, vil det vises i det neste mindre vinduet "Velg en farge". Her kan du allerede sikte mer nøyaktig og ta fargen fra et bestemt punkt.

Også i høyre del av dette vinduet er det hjelpeknapper for kopiering til utklippstavlen, og under knappene "Refresh" (oppdaterer innholdet på skjermen) og "Apply" (lagrer den valgte fargen og bytter vinduet til "Utvalg" "-fanen).

Utvalg

Her er hovedverktøyene for enkel fargematching: "Til", "Circle", "Web" og "Win", som byttes ved hjelp av ekstra faner.

Å jobbe med disse verktøyene er ikke vanskelig. Bare klikk på fargen du liker, juster den med RGB-glidebryterne (eller HSV - hvis dette formatet er nærmere deg), og se om det passer eller ikke.

Hvis du liker den valgte fargen, kan du kopiere koden fra linjen "Tekstrepresentasjon". Dessuten kan koden også velges i alle standardformatene ved å klikke på den lille pilen for å åpne listen.

Vær også oppmerksom på det tredje fargevinduet i øvre høyre hjørne. I tillegg til den valgte fargen (vertikal stripe), viser den ytterligere tre farger som passer godt sammen med den valgte.

Dermed foreslår programmet umiddelbart flere matchende farger som kan brukes på andre elementer i designet.

Programmet har mange forskjellige hjelpeknapper. For å finne ut hva formålet er, er det bare å holde musepekeren over dem og lese tipsene som vises helt nederst i programvinduet.

Innstillinger

Her kan du justere noen parametere som skrifttype og størrelse og noen kosmetiske egenskaper til programmet. Det vil være mer praktisk å jobbe med programmet hvis du fjerner merket for boksene "Åpne i "Skjerm"-fanen" og "Kjør i minivindumodus".

Om programmet

I denne siste fanen kan du finne utviklerens kontakter og se om en ny versjon av programmet er utgitt ved å gå til nettsiden hans.

Fordeler og ulemper med programmet

det finnes mange forskjellige verktøy for fargevalg (sirkel, fliser, etc.);
lar deg enkelt sammenligne farger ved å flytte programvinduet nær andre elementer på skjermen;
det er hint for alle knappene.

litt vanskelig grensesnitt;
kjører minimert og på "Skjerm" -fanen er ikke veldig praktisk (selv om du kan slå den av i innstillingene);
ikke alle vil like fargen på programvinduet.

konklusjoner

Programmet er ganske kraftig for en gratis, det gir nesten alt du trenger for å enkelt velge farger når du lager et nettsteddesign. Det er noen mindre feil som fargen på programvinduet (lilla - ikke for alle), men de forstyrrer ikke arbeidet med det.

P.S. Det er tillatt å fritt kopiere og sitere denne artikkelen, forutsatt at en åpen aktiv lenke til kilden er angitt og forfatterskapet til Ruslan Bogdanov er bevart.

P.P.S. Hvis programmet virket komplisert for deg, er det enklere alternativer:

Farge er et av de viktigste elementene i en designers arbeid. Men som konsept er det ganske vanskelig å mestre: de mange kombinasjonene av paletter gjør det ofte vanskelig å bestemme hvordan man best skal style grensesnittet til nettsider og applikasjoner. Tidligere har vi publisert anmeldelser av valgfrie verktøy og. Og i dag ønsker vi å utvide emnet ved å legge ut en oversettelse av artikkelen Essential Color Tools for UX Designers av Nick Babich på bloggen.

Dette innlegget inneholder en liste over de beste fargetilpasningstjenestene for nettsteder og UX-design som vil spare deg for mye tid. Gjennom disse prosjektene vil du lære:

hvor du kan hente inspirasjon fra;
hvordan lage din egen palett;
hvordan gjøre design tilgjengelig for personer med nedsatt fargesyn.

1. Leter etter inspirasjon

Naturens farger

Tegn fra verden rundt deg. Alt du trenger er å se deg rundt. Moteklær, bokomslag, interiørdesign... det er så mange fantastiske ting rundt deg. Men de beste fargekombinasjonene er naturens farger. Fang et vakkert øyeblikk og prøv å lage ditt eget utvalg basert på et spesifikt bilde.

De beste fargekombinasjonene finnes i naturen. Du kan få et fargevalg fra et hvilket som helst bilde

Behance

I den populære tjenesten finner du interessante verk inkludert i de beste nettporteføljene til ekte fagfolk innen sitt felt. Denne siden er også en stor inspirasjonskilde. For å se nye verdige eksempler på prosjekter, velg bare fargen du ønsker.

Drible farger

Dribbble er en av de beste som vil komme godt med når du lager et brukergrensesnitt. Hvis du vil visuelt forstå hvordan andre har brukt en bestemt farge, gå til dribbble.com/colors og skriv inn verdien du ønsker.

Når du velger en farge for nettstedet, her kan du angi minimumsprosenten - eksperiment, for eksempel, prøv å sette 30% blått.

Prøv å angi en minimumsprosent av en bestemt farge i Dribbble

designinspirasjon

Designspiration er et nyttig verktøy først og fremst for de som allerede har ideer til fargekombinasjoner og ønsker å se eksempler på slike kombinasjoner. Velg mellom 1 til 5 alternativer, og du vil finne bilder som samsvarer med de angitte parameterne.

I Designspiration finner du ulike eksempler på fargekombinasjoner

Tineye Multicolr

Med Tineye Multicolr fargetilpasningstjeneste kan du bestemme ønsket bildeskala og til og med angi prosentandelen av hver av dem (forhold). Siden er integrert med en database med 20 millioner Creative Commons-bilder fra Flickr. Dette er definitivt en av de raskeste måtene å finne den perfekte paletten på.

Colorzilla

ColorZilla er en utvidelse for installasjon i Chrome og Mozilla Firefox nettlesere. Den inkluderer verktøy som pipette, palettsurfing, oppretting og mer.

ColorZilla-utvidelsen tilgjengelig i Chrome og Firefox

Shutterstock Spektrum

En av de beste måtene å få en ide om hvordan fargeskjemaet vil se ut, er å se på de tilsvarende bildene. De fleste løsninger som tilbyr fargevalg for nettsteddesign inkluderer denne funksjonen, men Shutterstock Spectrum har et utrolig brukervennlig grensesnitt og forhåndsvisning, som virkelig kan komme godt med.

Dessuten trenger du ikke et abonnement, siden en foreløpig vurdering av bildet vil være ganske nok (selv til tross for at det har et "vannmerke").

W3-skoler

Nylig gjennomgikk en blogg et utvalg fra W3Schools. Den inneholder mye informasjon om emnet, alt fra navnene/nyanskodene deres, teorien om palettkombinasjoner og slutter med en beskrivelse av forskjellige formater: HEX, RGB, CMYK, HWB osv. Du finner også enkle generatorer, omformere og lignende "minitjenester". Alt i alt interessant å se.

2. Lag en fargepalett

Materialdesign Fargeverktøy

Material Design Color Tool nettsteds fargevelgertjeneste lar deg lage, dele og forhåndsvise et grovt brukergrensesnitt for valgene dine. En av dens nyttige funksjoner er å måle tilgjengelighetsnivået for enhver kombinasjon av farger.

kjølere

Coolors er et nettsted for å lage en flerfargepalett. Bare fiks en bestemt farge og trykk på mellomromstasten. Verktøyet er også bra ved at du vil få mer enn ett resultat, men du kan generere flere alternativer ved å endre kun de første dataene.

Fargevalg i Coolors basert på bilde

Adobe Color CC

Fargetilpasningstjenesten Adobe Color CC (tidligere Kuler) er nå ganske populær. Den er fritt tilgjengelig på Internett, men det finnes også en deskriptorversjon. Med denne nettapplikasjonen vil du lage paletten din ved å bruke fargehjulet:

Eller du kan få et spesifikt resultat fra det ferdige bildet:

Valg av farge for nettstedet i henhold til bildet

Det er hundrevis av ferdige kombinasjoner her, se etter dem i "Se"-delen:

Hvis du bruker skrivebordsversjonen, kan du eksportere fargesystemet du har laget til InDesign, Photoshop og Illustrator med ett klikk.

palett

Det sammenlignes ofte med tidligere Adobe Color CC, da disse designene er veldig like. Den eneste forskjellen er at i Paletton er du ikke begrenset til fem alternativer, men du kan eksperimentere med flere grensesnitttoner.

I tillegg kan du se på. Sammen med andre lar applikasjonen deg jobbe hvor som helst, bare ved å bruke smarttelefonen. I tillegg til å lage / eksportere fargepaletter direkte, kan du her velge bestemte farger fra bilder eller bruke grunnleggende alternativer.

3. Gjør paletten tilgjengelig

For tiden er fargeoppfatningsforstyrrelser mye mer vanlig enn vi tror. Omtrent 285 millioner mennesker i verden opplever synsproblemer. Du bør alltid sjekke om den du velger er tilgjengelig for slike brukere.

WebAIM fargekontrastkontroll

Noen toner er perfekt kombinert med hverandre, mens andre er helt motsatt. Et stort antall prosjekter består ikke A/A-testen, og dette er et faktum. Det er veldig viktig å sjekke den visuelle utformingen av grensesnittet og kontrasten til toner, spesielt hvis det er mye tekst på siden. For disse formålene, bruk når du velger fargene på nettstedet.

WebAIM Color Contrast Checker er et nettbasert verktøy som sjekker fargekoder i heksadesimale verdier.

kjølere

Vi har allerede nevnt denne tjenesten ovenfor. Blant annet vil Coolors også hjelpe deg å sjekke din oppfunne palett for fargeblindhet.

Type fargeblindhet i et opplegg

I stedet for "Normal"-modus, velg typen synsproblem du ønsker å simulere. Som et resultat vil du forstå nøyaktig hvordan en person som ikke er i stand til å skille mellom bestemte farger, vil se designet ditt.

Dette er hvordan en person med protanomali ser en palett

NoCoffee Vision Simulator for Chrome

Ved hjelp av nettsiden til NoCoffee Vision Simulator kan du se hvordan personer med fargeblindhet eller nedsatt syn vil oppfatte enkelte nettsider. For eksempel, ved å spesifisere alternativet "Achromatopsia" i delen "Fargemangel", vil du se nettsiden i grått.

Slik ser et CNN-prosjekt ut for en person med deuteranopi

Konklusjon

Alle fargetilpasningstjenestene for nettsteder og UX-design nevnt i artikkelen vil definitivt hjelpe deg i søket etter et interessant og effektivt utvalg. Men husk, den beste måten å lære å lage fantastiske paletter på er å øve og eksperimentere mye.

Farge er mye brukt i design - det lar deg "gjenopplive" innholdet - for å skape en semantisk forbindelse av elementer, for å fylle arbeidet med følelser og stemning. Nybegynnere designere velger tilfeldige farger, men det finnes måter å bruke farger mer meningsfullt på. Tenk på 4 slike metoder, organisert i henhold til prinsippet fra enkle til komplekse.

1. Bruk en kjent skala

Mer enn 500 fargekombinasjoner av kjente merker har blitt samlet på nettstedet brandcolors.net. Yandex, Google, Burger King bruker den samme paletten i alle produktene deres. Disse merkene og fargene deres er kjente og elsket av mange. Skriv inn navnet i søkefeltet eller bla gjennom siden, klikk på ønsket merke og farge: koden vil bli kopiert til utklippstavlen.

2. Velg en ferdig profesjonell palett

Den enkleste måten er å ta en ferdig kombinasjon av farger. Det er ikke nødvendig å finne opp hjulet på nytt hver gang, for harmoniske kombinasjoner har vært kjent i lang tid. Gå til colordrop.io og velg. Det er hundrevis av profesjonelle 4-farge paletter på nettstedet. Etter å ha valgt den du ønsker, klikk og kopier fargekodene fra panelet som åpnes til høyre.

I tillegg inneholder tjenesten et ferdig utvalg av 24 flate designfarger. Klikk til venstre under navnet "Flate farger" og ta koden til nyansen du liker.

3. Bestem fargepaletten til bildet eller bildet du liker

Denne metoden er litt vanskeligere. Men også mer effektivt.

På nettstedet coolors.co i topppanelet til venstre, finn kameraikonet, klikk på det. Et bildeopplastingsvindu åpnes.
Du kan velge et bilde eller bilde med fargeskjemaet du liker fra datamaskinen eller kopiere lenken til en tom kolonne.
Tjenesten vil bestemme kombinasjonen av farger (nedenfor, under det opplastede bildet).
Du kan endre de individuelle fargene på denne paletten ved å merke dem og velge et punkt på bildet du vil ta fargen fra.
"Collage"-knappen lagrer den resulterende paletten med fargekoder på datamaskinen.
"Auto"-knappen genererer nye kombinasjoner basert på det samme bildet.
Klikk "OK" og gå til hovedsiden til nettstedet for videre arbeid med paletten.

Hovedsiden til nettstedet er ikke mindre funksjonell. Her kan du plukke opp nyanser av individuelle farger eller sette sammen en ny palett ved å erstatte individuelle farger.

4. Lag ditt eget fargevalg online

Ved å laste opp et bilde til samme side coolors.co kan du ikke bare bestemme fargekoden, men også lage dine egne kombinasjoner. For å gjøre dette, trykk på mellomromstasten - tjenesten oppretter automatisk en kombinasjon av 5 farger.

På hver farge 4-knappikoner:

Alternative nyanser - Fargenyanser (mørkere og lysere),
Dra (Flytt farge til høyre eller venstre på paletten),
Juster (Juster nyanse, metning, lysstyrke, etc.),
Lås (fiks farge).