#10B981 · Fargekodegenerator & Picker

Generer fargekoder, variasjoner, harmonier, og sjekk kontrastforhold.

Fargekonvertering

#10b981

Varianter

Formålet med denne seksjonen er å nøyaktig produsere nyanser (ren hvit tilsatt) og toner (ren svart tilsatt) av den valgte fargen din i 10% økninger.

Profftips: Bruk toner for hover-tilstander og skygger, nyanser for høydepunkter og bakgrunner.

Toner

Mørkere varianter laget ved å legge til svart til basisfargen din.

Nyanser

Lysere varianter laget ved å legge til hvit til basisfargen din.

Vanlige bruksområder

  • • UI-komponenttilstander (hover, aktiv, deaktivert)
  • • Skape dybde med skygger og høydepunkter
  • • Bygge konsistente fargesystemer

Designsystemtips

Disse variantene danner grunnlaget for en sammenhengende fargepalett. Eksporter dem for å opprettholde konsistens i hele prosjektet ditt.

Fargekombinasjoner

Hver harmoni har sin egen stemning. Bruk harmonier for å brainstorme fargekombinasjoner som fungerer godt sammen.

Hvordan bruke

Klikk på en hvilken som helst farge for å kopiere dens hex-verdi. Disse kombinasjonene er matematisk bevist å skape visuell harmoni.

Hvorfor det er viktig

Fargeharmonier skaper balanse og fremkaller spesifikke følelser i designene dine.

Komplementær

En farge og dens motsatte på fargehjulet, +180 grader av nyanse. Høy kontrast.

Best for: Høy-effekt design, CTAer, logoer

Delt-komplementær

En farge og to tilstøtende til dens komplementær, +/-30 grader av nyanse fra verdien motsatt hovedfargen. Drastisk som en rett komplementær, men mer allsidig.

Best for: Livlige, men balanserte oppsett

Triadisk

Tre farger jevnt fordelt langs fargehjulet, hver 120 grader av nyanse fra hverandre. Best å la én farge dominere og bruke de andre som aksenter.

Best for: Lekne, energiske design

Analoge

Tre farger med samme luminans og metning med nyanser som er tilstøtende på fargehjulet, 30 grader fra hverandre. Glatte overganger.

Best for: Naturinspirerte, beroligende grensesnitt

Monokromatisk

Tre farger med samme nyanse med luminansverdier +/-50%. Subtilt og raffinert.

Best for: Minimalistiske, sofistikerte design

Tetradisk

To sett med komplementære farger, adskilt med 60 graders fargetone.

Best for: Rike, mangfoldige fargepaletter

Fargelæreprinsipper

Balanse

Bruk én dominerende farge, støtt med sekundære, og bruk aksenter sparsomt.

Kontrast

Sørg for tilstrekkelig kontrast for lesbarhet og tilgjengelighet.

Harmoni

Farger bør fungere sammen for å skape en enhetlig visuell opplevelse.

Fargekontrastkontroll

Test fargekombinasjoner for å sikre at de oppfyller WCAG-tilgjengelighetsstandarder for tekstlesbarhet.

Kontrast

1.00
common.contrastFail
Veldig dårlig
Liten tekst
common.contrastFail
Stor tekst
common.contrastFail

WCAG-standarder

AA:Minimum kontrastforhold på 4.5:1 for normal tekst og 3:1 for stor tekst. Kreves for de fleste nettsteder.
AAA:Forbedret kontrastforhold på 7:1 for normal tekst og 4.5:1 for stor tekst. Anbefalt for optimal tilgjengelighet.
Utilstrekkelig kontrast for alle tekststørrelser - oppfyller ikke WCAG-standarder.

Avansert kontrastsjekker

Finjuster med skyveknapper, flere forhåndsvisninger og mer

Alle er et geni. Men hvis du dømmer en fisk etter dens evne til å klatre i et tre, vil den leve hele livet og tro at den er dum.

contrastChecker.quote1Author

Tekniske formater

Utforsk avanserte fargeromsrepresentasjoner og profesjonelle fargemodeller brukt i videoproduksjon, fotografering, vitenskapelige applikasjoner og fargestyringssystemer. Disse tekniske formatene gir presise fargespecifikasjoner for spesialiserte industrier og applikasjoner.

Praktiske formater

Konverter farger til praktiske formater for virkelige applikasjoner inkludert trykksimulering, LED-skjermer, terminalutgang og dataenkoding. Disse formatene hjelper deg med å implementere farger på tvers av ulike medier, plattformer og fysiske enheter.

Fargeanalyse

Analyser fargeegenskaper med avanserte målinger inkludert spektralsammensetning, fargerenhet, metamerismeeffekter og perseptuelle egenskaper. Disse verktøyene gir dyp innsikt i fargeatferd og utseende under forskjellige visningsforhold.

Blindhetssimulator

Sjekk hvordan en farge oppfattes av personer med ulike typer fargeblindhet for å lage mer tilgjengelige design. Å forstå fargeoppfatning hjelper med å sikre at innholdet ditt er tilgjengelig for alle.

Kreative aspekter

Utforsk de kunstneriske og psykologiske dimensjonene av farger, inkludert sesongmessige assosiasjoner, følelsesmessig påvirkning, naturlige forekomster, historiske pigmenter og fargeblandingsoppskrifter for kreative anvendelser.