Konvertering af farver

Konverteringer – Detaljer – Harmonier – Billeder – Forhåndsvisning – Farveblindhedssimulering – CSS – Hjælp

Konverteringer

Her kan du se din farve konverteret til 15 forskellige farveformater som RGB, CMYK, HSV, HSL, CIELab, Android, Decimal og YUV.

🤖 Konverter flere farver på én gang eller 📢 få konverteringer og harmonier via REST API’et.

• 📕 HOWCOLORS.WORK
• Distribution
• Brightness & Saturation Gradients
• Analog
• Triad
• Komplementær
• Splitkomplementær
• Firkantet
• Rektangel
• Sweetspot
• Hvid baggrund
• Kontrol af farvekontrast
• Sort baggrund
• Kontrol af farvekontrast
• RGB 73, 108, 60 Baggrund
• Dichromi
• Tritanomali
• Monokromi
• Text
• Border
• Background
• 📕 HOWCOLORS.WORK
• Konvertering
• Detaljer
• Harmonier
• SVG-billeder
• Previews
• Farveblindhedssimulering
• CSS Eksempler
• Color Bucket
• Color Contrast Checker

📕 HOWCOLORS.WORK

En vejledning i CSS-farvenotationer.

eller køb den på Leanpub!

Detaljer

RGB-farven 73, 108, 60 er en mørk farve, og den websafe-version er hex 336633. Et supplement til denne farve ville være 95, 60, 108, og gråskalaversionen er 92, 92, 92.
En 20 % lysere version af den oprindelige farve er 123, 160, 108, og 26, 60, 16 er den 20 % mørkere farve. Hvis du mætter farven med 10 %, får du 65, 108, 49, og hvis du afmatter med 10 %, er den 81, 108, 71.

Distribution

Brightness & Saturation Gradients

Disse gradienter viser, hvordan RGB-farven 73, 108, 60 ændres ved at ændre lysstyrken med 10 procent. Den første figur viser et skift med +10 % for hver farve og den anden figur -10 %.

Som ligner lysstyrkegradienterne, men de følgende mætningsgradienter viser en ændring af RGB-farven 73, 108, 60 ved at ændre mætningen med 10 % i stedet.

Harmonier

SVG-billeder

Et udvalg af SVG-billeder, der anvender hex-versionen #496C3C af den aktuelle farve.

Forhåndsvisninger

Tritanomali

Monokromi

CSS Eksempler

Text

C CSS-egenskaben til at ændre tekstens farve til RGB 73, 108, 60 kaldes “color”. Egenskaben color kan indstilles på klasser, id’er eller direkte på HTML-elementet.

Dette eksempel viser, hvordan tekst i farven rgb(73, 108, 60) ser ud.

📋 Copy Code

Hvis du vil tilføje en tekstskygge i den farve, skal du bruge text-shadow-egenskaben, du kan generere en tekstskygge direkte med vores 🔧 CSS Text Shadow Generator.

Her ser du, hvordan sort tekst med en 4 pixel rgb(73, 108, 60)-farvet skygge ser ud.

📋 Copy Code

Border

CSS-egenskaben til at ændre et elements kant til RGB 73, 108, 60 hedder “border”. Border-egenskaben kan indstilles på klasser, id’er eller direkte på HTML-elementet.

Dette eksempel viser farven som border, den kan anvendes via CSS-egenskaben “border” eller “border-color”.

📋 Copy Code

Hvis det kun er borderfarven, der skal ændres, skal du bruge egenskaben border-color.

📋 Copy Code

Hvis du vil tilføje en boksskygge i den pågældende farve, skal du bruge:

Her ser du, hvordan en boks med en 4 pixel rgb(73, 108, 60)-farvet skygge ser ud.

📋 Copy Code

Background

CSS-egenskaben til at ændre et elements baggrundsfarve til RGB 73, 108, 60 hedder “background”. Egenskaben baggrund kan indstilles på klasser, id’er eller direkte på HTML-elementet.

📋 Copy Code

Hvis kun baggrundsfarven skal ændres kan bruges:

📋 Copy Code

Dette eksempel viser farven som baggrund, den anvendes via CSS-egenskaben “background”.

For at optimere og komprimere din CSS-kode kan du bruge vores online CSS-kompressor og -optimering baseret på csstidy. Hvis du vil oprette en lineær eller radial gradient som baggrund eller kant, kan du tjekke vores 🌈 CSS Gradient Generator.

📕 HOWCOLORS.WORK

En CSS-vejledning om farvenotation.

eller køb den på Leanpub!

Sådan bruger du Konvertering af farver

Konvertering

For at konvertere skal du indsætte en streng i et af disse farveformater, f.eks. “496C3C”, i indtastningsfeltet og klikke på konverter. Resultatet vil være i afsnittet Konverteringer, og i de følgende afsnit kan du få yderligere oplysninger om farven.

Somme farveformater bruger den samme notation, og konverteringen vil gætte sammensætningen af søgeforespørgslen. Hvis du f.eks. forsøger at konvertere strengen “104°, 44%, 42%”, kan det være en HSV- eller HSL-farve, konverteringen vil i dette tilfælde antage HSL.

Da dette kan føre til forkerte konverteringer, kan du definere, hvilket format du videregiver, ved at indpakke din farvestreng i parenteser med formatet foran. Søgestrengen “HSV(104°, 44%, 42%)” vil give dig den korrekte HSV-farve, da der ikke er behov for at gætte formatet. Andre eksempler kunne være “CIELAB(41.95, -22.52, 22.92)”, “CIELCH(42, 32.133, 134.485)”, “YXY(12.4678, 0.3233, 0.4517)” og “CMYK(0.32, 0.00, 0.44, 0.58)”.

Detaljer

I detaljerafsnittet får du først et resumé af farven og, hvis det er tilgængeligt, en beskrivelse som “mørk dæmpet rød”. Du kan se farvefordelingen i forskellige formater. I RGB-formatet får du f.eks. at vide, hvor meget rødt, grønt og blåt der er i din farve.

Sidst får du lysstyrke- og mætningsgradienter for din farve i trin på 10 %. Så hvis du har brug for en lysere eller mørkere version, kan du vælge den herfra.

Harmonier

Harmonierne viser dig grundlæggende de farver, der passer godt sammen med den farve, du ser i øjeblikket. Hvis du kan lide en af harmonierne, kan du direkte oprette en 🌈 CSS Gradient eller 🔧 CSS Text Shadow ud fra den eller se harmonien som en 🖌️ Color Bucket.

SVG-billeder

Dette korte afsnit viser dig et udvalg af SVG-filer, der bruger den aktuelle farve. Du kan downloade disse filer og bruge dem i dine projekter, f.eks. som baggrundsbillede.

Previews

Du vil gerne se, hvordan din farve ser ud på en hvid eller sort baggrund? Så bør du tjekke afsnittet “Previews” på farvesiden.

Du kan også se farvekontrasten for din farve på disse baggrunde og får et link til farvekontrastkontrollen med din farve forvalgt.

Farveblindhedssimulering

Når du vælger en farve til dit projekt, skal du måske huske på, hvordan denne farve opfattes af personer med en farveblindhedssvækkelse. Derfor har jeg tilføjet dette afsnit, der viser dig forhåndsvisninger af din farve for forskellige farvesynsmangler.

CSS Eksempler

Hvis du er ny i webudvikling, vil du måske gerne se, hvordan du anvender din farve som forgrunds-, baggrunds- eller kantfarve. Afsnittet “CSS Eksempler” giver dig præcis dette, hjælp til, hvordan du bruger den aktuelle farve i CSS.

Hvis du ser en farve i et format, der ikke er tilgængeligt i CSS, vil du se farven konverteret til et kompatibelt format.

Color Bucket

Har du besluttet dig for farver til dit næste projekt og ønsker at downloade dem som en palet eller dele dem med venner for at diskutere din beslutning? Så bør du tage et kig på farvebunken. Den giver dig mulighed for at gemme op til 10 farver, opretter automatisk farvepaletter for hver af disse farver baseret på lysstyrken og giver dig en WCAG-matrix.

Du kan downloade hver af farvepaletterne eller de valgte farver som en GIMP-, Adobe® ASE- eller Tailwind CSS-palette. Derudover kan du se alt som en 🌈 CSS Gradient, 🔧 CSS Text Shadow eller 📷 Color Palette Image.

For at tilføje en farve til din farvebunke, sætter jeg et link “❤️ Add this color to the bucket” i overskriften på hver side på dette websted.

Color Contrast Checker

Når du beslutter dig for farver til et projekt, er det vigtigt at have farvekontrasten i tankerne. Med My Color Contrast Checker kan du kontrollere de farver, du har valgt, i henhold til retningslinjerne for tilgængelighed for webindhold (WCAG) 2.0.