Konvertering av färger

Konverteringar – Detaljer – Harmonier – Bilder – Förhandsgranskning – Simulering av färgblindhet – CSS – Hjälp

Konverteringar

Här kan du se din färg konverterad till 15 olika färgformat som RGB, CMYK, HSV, HSL, CIELab, Android, Decimal och YUV.

🤖 Konvertera flera färger på en gång eller 📢 få konverteringar och harmonier via REST API.

• 📕 HOWCOLORS.WORK
• Distribution
• Hellhet & Mättnadsgradienter
• Analog
• Triad
• Komplementär
• Split Complementary
• Torget
• Rektangel
• Sweetspot
• Vit bakgrund
• Kontroll av färgkontrast
• Svart bakgrund
• Kontroll av färgkontrast
• RGB 73, 108, 60 Bakgrund
• Dikromatism
• Tritanomali
• Monokromi
• Text
• Border
• Background
• 📕 HOWCOLORS.WORK
• Konvertering
• Detaljer
• Harmonier
• SVG Images
• Previews
• Färgblindhetssimulering
• CSS-exempel
• Color Bucket
• Color Contrast Checker

📕 HOWCOLORS.WORK

En vägledning för CSS-färgnotation.

eller köp den på Leanpub!

Detaljer

RGB-färgen 73, 108, 60 är en mörk färg och den webbsäkra versionen är hex 336633. Ett komplement till den här färgen skulle vara 95, 60, 108, och gråskaleversionen är 92, 92, 92.
En 20 % ljusare version av den ursprungliga färgen är 123, 160, 108, och 26, 60, 16 är den 20 % mörkare färgen. Om du mättar färgen med 10 % får du 65, 108, 49, och om du avmattar med 10 % blir det 81, 108, 71.

Distribution

Hellhet & Mättnadsgradienter

De här gradienterna visar hur RGB- färgen 73, 108, 60 förändras genom att ljusstyrkan ändras med 10 procent. Den första figuren visar en förskjutning med +10 procent för varje färg och den andra figuren -10 procent.

Samma som ljushetsgradienterna men följande mättnadsgradienter visar en förändring av RGB-färgen 73, 108, 60 genom att ändra mättnaden med 10 procent i stället.

Harmonier

SVG-bilder

Ett urval av SVG-bilder som använder hex-versionen #496C3C av den aktuella färgen.

Förhandsgranskningar

Tritanomali

Monokromi

CSS-exempel

Text

CSS-egenskapen för att ändra färgen på texten till RGB 73, 108, 60 kallas ”color”. Färgegenskapen kan ställas in på klasser, ids eller direkt på HTML-elementet.

Detta exempel visar hur text i färgen rgb(73, 108, 60) ser ut.

📋 Copy Code

Om du vill lägga till en textskugga i den färgen använder du egenskapen text-skugga, du kan generera en textskugga direkt med vår 🔧 CSS Textskugggenerator.

Här ser du hur svart text med en 4 pixlar rgb(73, 108, 60) färgad skugga ser ut.

📋 Copy Code

Border

CSS-egenskapen för att ändra gränsen för ett element till RGB 73, 108, 60 kallas ”border”. Egenskapen border kan ställas in på klasser, ids eller direkt på HTML-elementet.

Detta exempel visar färgen som border, den kan tillämpas via CSS-egenskapen ”border” eller ”border-color”.

📋 Copy Code

Om endast borderfärgen ska ändras använd egenskapen border-color.

📋 Copy Code

Om du vill lägga till en boxskugga i den färgen använder du:

Här ser du hur en box med en 4 pixlars rgb(73, 108, 60)-färgad skugga ser ut.

📋 Copy Code

Background

CSS-egenskapen som ändrar bakgrundsfärgen för ett element till rgb(73, 108, 60) kallas ”background”. Bakgrundsegenskapen kan ställas in på klasser, ids eller direkt på HTML-elementet.

📋 Copy Code

Om endast bakgrundsfärgen ska ändras kan användas:

📋 Copy Code

Detta exempel visar färgen som bakgrund, den appliceras via CSS-egenskapen ”background”.

För att optimera och komprimera din CSS-kod kan du använda vår online CSS-kompressor och -optimering baserad på csstidy. Om du vill skapa en linjär eller radiell gradient som bakgrund eller kant kan du kolla in vår 🌈 CSS Gradient Generator.

📕 HOWCOLORS.WORK

En guide för CSS-färgnotation.

eller köp den på Leanpub!

Så här använder du Konvertering av färger

Konvertering

För att konvertera klistrar du in en sträng i ett av dessa färgformat, till exempel ”496C3C”, i inmatningsfältet och klickar på konvertera. Resultatet kommer att finnas i avsnittet Konverteringar, och i de följande avsnitten får du ytterligare information om färgen.

Vissa färgformat använder samma notation, och konverteringen kommer att gissa sammansättningen av sökfrågan. Som exempel, om du försöker konvertera strängen ”104°, 44%, 42%” kan det vara en HSV- eller HSL-färg, konverteringen kommer att anta HSL i det här fallet.

Eftersom detta kan leda till felaktiga konverteringar kan du definiera vilket format du lämnar genom att omsluta din färgsträng i parenteser med formatet framför. Söksträngen ”HSV(104°, 44%, 42%)” ger dig rätt HSV-färg eftersom du inte behöver gissa formatet. Andra exempel är ”CIELAB(41.95, -22.52, 22.92)”, ”CIELCH(42, 32.133, 134.485)”, ”YXY(12.4678, 0.3233, 0.4517)” och ”CMYK(0.32, 0.00, 0.44, 0.58)”.

Detaljer

I detaljavsnittet får du först en sammanfattning av färgen och, om det finns tillgängligt, en beskrivning som ”mörk dämpad röd”. Du kan se färgfördelningen i olika format. I RGB-formatet får du till exempel veta mängden rött, grönt och blått i din färg.

Sist får du ljusstyrka och mättnadsgradienter för din färg i 10 %-steg. Så om du behöver en ljusare eller mörkare version kan du välja den här.

Harmonier

Harmonierna visar i princip färger som passar bra ihop med den färg du för tillfället tittar på. Om du gillar en av harmonierna kan du direkt skapa en 🌈 CSS Gradient eller 🔧 CSS Text Shadow från den eller visa harmonin som en 🖌️ Color Bucket.

SVG Images

Detta korta avsnitt visar dig ett urval av SVG-filer som använder den aktuella färgen. Du kan ladda ner dessa filer och använda dem i dina projekt, till exempel som bakgrundsbild.

Previews

Vill du se hur din färg ser ut på en vit eller svart bakgrund? Då bör du kolla in avsnittet ”Förhandsgranskningar” på färgsidan.

Du ser också färgkontrasten för din färg på dessa bakgrunder och får en länk till färgkontrastkontrollen med din färg förvald.

Färgblindhetssimulering

När du väljer en färg för ditt projekt kan du tänka på hur den här färgen uppfattas av en person med färgsynsbrist. Därför har jag lagt till det här avsnittet som visar förhandsgranskningar av din färg för olika färgseende brister.

CSS-exempel

Om du är ny inom webbutveckling kanske du vill se hur du tillämpar din färg som förgrunds-, bakgrunds- eller kantfärg. Avsnittet ”CSS Examples” ger dig exakt detta, hjälp med hur du använder den aktuella färgen i CSS.

Om du visar en färg i ett format som inte är tillgängligt i CSS, kommer du att se färgen konverterad till ett kompatibelt format.

Color Bucket

Har du bestämt dig för färger för ditt nästa projekt och vill ladda ner dem som en palett eller dela dem med vänner för att diskutera ditt beslut? Då bör du ta en titt på färghink. Den låter dig lagra upp till 10 färger, skapar automatiskt färgpaletter för var och en av dessa färger baserat på ljusstyrkan och ger dig en WCAG-matris.

Du kan ladda ner var och en av färgpaletterna eller de valda färgerna som en GIMP-, Adobe® ASE- eller Tailwind CSS-palett. Dessutom kan du visa allt som en 🌈 CSS Gradient, 🔧 CSS Text Shadow eller 📷 Color Palette Image.

För att lägga till en färg till din färghink har jag lagt in en länk ”❤️ Lägg till den här färgen till hinken” i rubriksektionen på varje sida på den här webbplatsen.

Color Contrast Checker

När du bestämmer dig för färger för ett projekt är det viktigt att ha färgkontrasten i åtanke. Med min kontroll av färgkontraster kan du kontrollera de färger du har valt enligt riktlinjerna för tillgänglighet till webbinnehåll (WCAG) 2.0.

.