Farvevælger

Farvevælger er et gratis værktøj, som lader dig vælge en farve direkte i browseren og få farveværdien i det ønskede format.

Hvad viser en farvevælger?

En farvevælger viser en numerisk repræsentation af den farve, du vælger på farvehjulet. Den samme synlige farve kan angives i flere formater, oftest hexadecimal, RGB, RGBA, HSL eller HSLA.

Formaterne beskriver farver på forskellige måder. Hexadecimal og RGB angiver værdierne for de røde, grønne og blå kanaler. HSL bruger nuance, mætning og lyshed, hvilket kan gøre systematiske justeringer lettere. Formater med en alfakanal beskriver også opacitet.

• Hexadecimale værdier består af et nummertegn efterfulgt af hexadecimale cifre, for eksempel #336699.
• RGB-værdier angiver normalt hver kanal som et tal fra 0 til 255, for eksempel rgb(51, 102, 153).
• HSL-værdier beskriver en vinkel for farvenuancen og procentværdier for mætning og lyshed, for eksempel hsl(210, 50%, 40%).
• RGBA og HSLA tilføjer gennemsigtighed. En alfaværdi på 0 er helt gennemsigtig, mens 1 er helt uigennemsigtig.

CSS understøtter også navngivne farver, men navnene dækker kun et fast udvalg og egner sig dårligere til præcise designtokens. Genererede numeriske værdier er som regel lettere at overføre mellem designsystemer, stylesheets og programkode.

Hvordan bruger jeg farvevælgeren?

Vælg feltet Color, klik på det ønskede punkt på farvehjulet, og brug derefter resultatet i det format, som dit program kræver. Alt foregår i din browser, og den valgte farve uploades aldrig til en server.

Hvis du arbejder med en eksisterende brugerflade, bør du tage udgangspunkt i det format, der allerede bruges i kodebasen. Så undgår du unødvendige farvekonverteringer, og pull requests bliver lettere at gennemgå. Når du undersøger data fra tredjeparter, skal du først afklare, om værdierne indeholder opacitet, før du erstatter dem med en farve, der umiddelbart ser tilsvarende ud.

En praktisk arbejdsgang før udgivelse er at vælge eller genskabe den ønskede farve, kopiere den relevante notation og kontrollere den i komponentens faktiske tilstand. Test normaltilstand, hover, fokus og deaktiveret tilstand hver for sig, da opacitet og nedarvede typografier kan ændre det endelige, viste resultat.

Sådan læser du resultatet

Læs resultatet ud fra den anvendte farvemodel, og kontrollér en eventuel alfakomponent, før du kopierer værdien ind i koden. I RGB styrer hver kanal intensiteten af henholdsvis den røde, grønne eller blå komponent. I HSL bevæger farvenuancen sig rundt på et farvehjul, mens mætning styrer farvens intensitet, og lyshed styrer balancen mellem sort og hvid.

Farvesyntaks skal være præcis, når den bruges i CSS eller strukturerede data. Almindelige fejl ved manuel redigering er blandt andet:

• at udelade det indledende nummertegn i en hexadecimal CSS-værdi;
• at bruge fem eller syv hexadecimale cifre, som ikke er gyldige standardlængder for hex;
• at bruge procentangivelser, hvor en RGB-implementering forventer kanalværdier;
• at glemme kommaer i ældre RGB-syntaks eller blande inkompatibel gammel og moderne syntaks;
• at kopiere en værdi med alfakanal til software, som kun accepterer sekscifret hex;
• at bruge et decimalkomma som 0,5, hvor CSS kræver et decimalpunktum som 0.5.

Farvevælgeren genererer farveværdier, men fungerer ikke som en generel CSS-validator. Den kan ikke afgøre, om en omgivende deklaration, et JSON-dokument eller en temafil er gyldig. Syntaksfejl uden for selve farveværdien skal derfor stadig kontrolleres med den relevante parser eller det relevante udviklingsværktøj.

Eksempler på farvekonvertering

En sekscifret hexadecimal farve bruger par af cifre til henholdsvis rød, grøn og blå. Følgende repræsentationer beskriver eksempelvis den samme uigennemsigtige farve.

Hexværdi #336699

Tilsvarende RGB-værdi rgb(51, 102, 153)

Tilsvarende HSL-værdi hsl(210, 50%, 40%)

Trecifret hex er en forkortet notation. Hvert ciffer gentages for at danne en sekscifret værdi.

Kort hexværdi #fff

Udvidet hexværdi #ffffff

Tilsvarende RGB-værdi rgb(255, 255, 255)

Ottecifret hex indeholder en alfaværdi efter de røde, grønne og blå cifferpar. Vær opmærksom på systemer, der bruger en anden rækkefølge af kanalerne eller ikke understøtter ottecifret notation. En ensfarvet flade, der umiddelbart ser identisk ud, kan også give et andet resultat, når opacitet anvendes oven på en anden baggrund.

Hvilket farveformat skal jeg vælge?

Vælg den farvenotation, som destinationen allerede forventer, medmindre der er en klar grund til at ændre den. Sekscifret hex er kompakt og almindeligt i CSS-variabler og filer med designtokens. RGB er praktisk, når softwaren viser kanalværdierne direkte, mens HSL er nyttigt til at skabe beslægtede farver ved at justere lyshed eller mætning.

• Brug sekscifret hex til en uigennemsigtig webfarve, når en kort og letlæselig notation er vigtig.
• Brug kun ottecifret hex, når destinationsmiljøet udtrykkeligt understøtter en alfaværdi i denne notation.
• Brug RGB eller RGBA, når du arbejder med de enkelte røde, grønne og blå kanaler.
• Brug HSL eller HSLA til programmatiske temavariationer baseret på nuance, mætning eller lyshed.
• Brug Farvekonvertering, når du allerede har en værdi og vil konvertere den frem for at vælge en ny farve visuelt.

En RGB-værdi på skærmen bør ikke bruges som trykspecifikation. Professionel trykning kan kræve CMYK-værdier, en ICC-farveprofil, prøvetryk og en aftale med trykkeriet. En matematisk konvertering kan ikke i sig selv garantere, at en trykt farve svarer til farven på en bagbelyst skærm.

Hvornår er det unødvendigt at vælge eller konvertere en farve?

Det er unødvendigt at vælge eller konvertere en farve, hvis den eksisterende værdi allerede har det format, som destinationen kræver. Gentagne konverteringer kan medføre forskelle på grund af afrunding, inkonsekvent brug af store og små bogstaver eller unødvendige ændringer i kildefiler.

Det kan også være bedre at beholde et navngivet designtoken, for eksempel en temavariabel, frem for at erstatte det med en bogstavelig værdi. Tokens bevarer relationen mellem komponenter og gør det muligt at ændre en farve centralt. Tilsvarende behøver en farve, der kun bruges maskinelt, ikke en mere menneskeligt læsbar repræsentation, medmindre nogen skal kunne kontrollere eller vedligeholde den.

En farvevælger kan ikke på egen hånd afgøre, om en farve har tilstrækkelig kontrast, overholder en brandspecifikation eller fortsat kan skelnes af personer med nedsat farvesyn. Kontrollér kombinationer af forgrunds- og baggrundsfarver med et dedikeret kontrastværktøj, og gennemgå brugerfladen i dens rette sammenhæng.

Ofte stillede spørgsmål

Kan jeg bruge resultatet i CSS-variabler?

Ja, hvis den valgte notation er gyldig CSS i de browsere og byggeværktøjer, du understøtter. Gem hele værdien i en brugerdefineret egenskab, og henvis derefter til den med funktionen var(). Hvis projektet behandler kanalerne separat, kan det være mere praktisk at gemme dem efter projektets eksisterende konvention.

Hvorfor ser den samme farve anderledes ud på en anden skærm?

Skærme varierer med hensyn til kalibrering, lysstyrke, panelteknologi og understøttelse af farverum. Browserens farvestyring og operativsystemets skærmprofil kan også påvirke gengivelsen. Identiske numeriske værdier garanterer derfor ikke et ens fysisk udseende på alle enheder.

Ændrer store og små bogstaver farven i en hexværdi?

Nej. Der skelnes ikke mellem store og små bogstaver i de hexadecimale cifre A til F, så #AABBCC og #aabbcc repræsenterer den samme farve. Følg kodearkivets eksisterende konvention for store og små bogstaver, så du undgår ændringer, der kun vedrører formatering.

Kan en farveværdi indeholde bogstaver med accent eller ikke-latinske tegn?

Standardnotationerne hexadecimal, RGB og HSL bruger ASCII-cifre, bogstaver og tegnsætning. Bogstaver med accent og ikke-latinske tegn indgår ikke i disse numeriske farvesyntakser. De kan forekomme i omgivende variabelnavne eller metadata, hvis det relevante sprog og filens tegnkodning tillader det.

Er en gennemsigtig farve det samme som ingen farve?

Nej. En helt gennemsigtig farve har stadig kanalværdier, selv om de ikke er synlige i sig selv. De skjulte kanaler kan have betydning ved animation, interpolation, sammensætning af lag eller senere ændringer af opaciteten. Bevar dem derfor, når programmet er afhængigt af denne adfærd.

Skal jeg afrunde decimaltal i farvekanaler?

Afrund kun decimaltal i farvekanaler og alfaværdier til den præcision, som destinationen accepterer, og som er nødvendig for at få et ensartet resultat. For mange decimaler gør værdierne sværere at gennemgå, mens for kraftig afrunding kan give en lille farveforskel. Kontrollér efter afrundingen den viste komponent mod den tilsigtede baggrund og i de relevante interaktionstilstande.