Farben konvertieren

Konvertierungen – Details – Harmonien – Bilder – Vorschau – Farbenblindheitssimulation – CSS – Hilfe

Konvertierungen

Hier siehst du deine Farbe konvertiert in 15 verschiedene Farbformate wie RGB, CMYK, HSV, HSL, CIELab, Android, Decimal und YUV.

🤖 Mehrere Farben auf einmal konvertieren oder 📢 Konvertierungen und Harmonien über die REST API abrufen.

• 📕 HOWCOLORS.WORK
• Verteilung
• Helligkeit & Sättigungsgradienten
• Analog
• Triad
• Komplementär
• Split-Komplementär
• Quadrat
• Rechteck
• Sweetspot
• Weißer Hintergrund
• Farbkontrastprüfung
• Schwarzer Hintergrund
• Farbkontrastprüfung
• RGB 73, 108, 60 Hintergrund
• Dichromie
• Trichromacy
• Monochromie
• Text
• Border
• Hintergrund
• 📕 HOWCOLORS.WORK
• Conversion
• Details
• Harmonien
• SVG-Bilder
• Vorschauen
• Farbenblindheitssimulation
• CSS-Beispiele
• Farbeimer
• Color Contrast Checker

📕 HOWCOLORS.WORK

Ein Leitfaden zur CSS-Farbnotation.

oder kaufen Sie es auf Leanpub!

Details

Die RGB-Farbe 73, 108, 60 ist eine dunkle Farbe, und die websichere Version ist hex 336633. Ein Komplement dieser Farbe wäre 95, 60, 108, und die Graustufenversion ist 92, 92, 92.
Eine 20% hellere Version der Originalfarbe ist 123, 160, 108, und 26, 60, 16 ist die 20% dunklere Farbe. Wenn man die Farbe um 10% sättigt, erhält man 65, 108, 49, und wenn man um 10% entsättigt, ist es 81, 108, 71.

Verteilung

Helligkeit & Sättigungsgradienten

Diese Gradienten zeigen, wie sich die RGB-Farbe 73, 108, 60 ändert, wenn man die Helligkeit um 10 Prozent ändert. Die erste Abbildung zeigt eine Verschiebung um +10% für jede Farbe und die zweite Abbildung -10%.

Ähnlich wie die Helligkeitsverläufe, aber die folgenden Sättigungsverläufe zeigen eine Veränderung der RGB-Farbe 73, 108, 60 durch Änderung der Sättigung um 10% stattdessen.

Harmonien

SVG-Bilder

Eine Auswahl von SVG-Bildern mit der Hex-Version #496C3C der aktuellen Farbe.

Vorschauen

RGB 73, 108, 60 Hintergrund

Farbenblindheitssimulation

Farbenblindheit ist ein sehr komplexes Thema, und ich könnte die verschiedenen Ursachen nicht besser beschreiben, als Wikipedia es tut. Wenn Sie also mehr erfahren möchten, sollten Sie sich den Artikel über Farbenblindheit ansehen.

Dichromie

Trichromacy

Monochromie

CSS-Beispiele

Text

Die CSS-Eigenschaft zum Ändern der Farbe des Textes in RGB 73, 108, 60 heißt „color“. Die Farbeigenschaft kann auf Klassen, ids oder direkt auf das HTML-Element gesetzt werden.

Dieses Beispiel zeigt, wie Text in der Farbe rgb(73, 108, 60) aussieht.

📋 Copy Code

Wenn Sie einen Textschatten in dieser Farbe hinzufügen möchten, verwenden Sie die Eigenschaft text-shadow, Sie können einen Textschatten direkt mit unserem 🔧 CSS Text Shadow Generator erzeugen.

Hier sehen Sie, wie schwarzer Text mit einem 4 Pixel großen rgb(73, 108, 60) farbigen Schatten aussieht.

📋 Copy Code

Border

Die CSS-Eigenschaft, um den Rand eines Elements in RGB 73, 108, 60 zu ändern, heißt „border“. Die border-Eigenschaft kann auf Klassen, ids oder direkt auf das HTML-Element gesetzt werden.

Dieses Beispiel zeigt die Farbe als border, sie kann über die CSS-Eigenschaft „border“ oder „border-color“ angewendet werden.

📋 Copy Code

Wenn nur die Randfarbe geändert werden soll, verwenden Sie die Eigenschaft border-color.

📋 Copy Code

Wenn Sie einen Kastenschatten in dieser Farbe hinzufügen möchten, verwenden Sie:

Hier sehen Sie, wie ein Kasten mit einem 4 Pixel großen rgb(73, 108, 60) farbigen Schatten aussieht.

📋 Copy Code

Hintergrund

Die CSS-Eigenschaft, um die Hintergrundfarbe eines Elements auf RGB 73, 108, 60 zu ändern, heißt „background“. Die background-Eigenschaft kann auf Klassen, ids oder direkt auf das HTML-Element gesetzt werden.

📋 Copy Code

Wenn nur die Hintergrundfarbe geändert werden soll, kann verwendet werden:

📋 Copy Code

Dieses Beispiel zeigt die Farbe als Hintergrund, sie wird über die CSS-Eigenschaft „background“ angewendet.

Um Ihren CSS-Code zu optimieren und zu komprimieren, können Sie unseren Online-CSS-Kompressor und -Optimierer auf Basis von csstidy verwenden. Wenn Sie einen linearen oder radialen Farbverlauf als Hintergrund oder Umrandung erstellen möchten, sehen Sie sich unseren 🌈 CSS Gradient Generator an.

📕 HOWCOLORS.WORK

A CSS color notation guide.

oder kaufen Sie es bei Leanpub!

How-to use Converting Colors

Conversion

Um zu konvertieren, fügen Sie eine Zeichenfolge in einem dieser Farbformate, z. B. „496C3C“, in das Eingabefeld ein und klicken Sie auf convert. Das Ergebnis befindet sich im Abschnitt Konvertierungen, und in den folgenden Abschnitten finden Sie weitere Details zur Farbe.

Einige Farbformate verwenden dieselbe Notation, und die Konvertierung wird die Zusammensetzung der Suchanfrage erraten. Wenn Sie beispielsweise versuchen, die Zeichenkette „104°, 44%, 42%“ zu konvertieren, könnte es sich um eine HSV- oder HSL-Farbe handeln, die Konvertierung nimmt in diesem Fall HSL an.

Da dies zu falschen Konvertierungen führen kann, können Sie festlegen, welches Format Sie übergeben, indem Sie Ihre Farbzeichenkette in Klammern mit dem Format davor einschließen. Der Suchstring „HSV(104°, 44%, 42%)“ wird Ihnen die korrekte HSV-Farbe liefern, da das Format nicht erraten werden muss. Andere Beispiele wären „CIELAB(41.95, -22.52, 22.92)“, „CIELCH(42, 32.133, 134.485)“, „YXY(12.4678, 0.3233, 0.4517)“ und „CMYK(0.32, 0.00, 0.44, 0.58)“.

Details

Im Abschnitt „Details“ erhalten Sie zunächst eine Zusammenfassung der Farbe und, falls vorhanden, eine Beschreibung wie „dunkles gedämpftes Rot“. Sie können die Farbverteilung in verschiedenen Formaten sehen. Im RGB-Format erfahren Sie beispielsweise den Rot-, Grün- und Blauanteil Ihrer Farbe.

Zuletzt erhalten Sie Helligkeits- und Sättigungsgradienten Ihrer Farbe in 10%-Schritten. Wenn du also eine hellere oder dunklere Version brauchst, kannst du sie hier auswählen.

Harmonien

Die Harmonien zeigen dir grundsätzlich Farben, die gut zu der Farbe passen, die du gerade siehst. Wenn dir eine der Harmonien gefällt, kannst du direkt einen 🌈 CSS-Farbverlauf oder 🔧 CSS-Textschatten daraus erstellen oder die Harmonie als 🖌️ Color Bucket ansehen.

SVG-Bilder

Dieser kurze Abschnitt zeigt dir eine Auswahl an SVG-Dateien, die die aktuelle Farbe verwenden. Sie können diese Dateien herunterladen und in Ihren Projekten verwenden, zum Beispiel als Hintergrundbild.

Vorschauen

Sie wollen sehen, wie Ihre Farbe auf einem weißen oder schwarzen Hintergrund aussieht? Dann sollten Sie sich den Abschnitt „Previews“ auf der Farbseite ansehen.

Sie sehen auch den Farbkontrast Ihrer Farbe auf diesen Hintergründen und erhalten einen Link zur Farbkontrastprüfung mit Ihrer vorgewählten Farbe.

Farbenblindheitssimulation

Wenn Sie eine Farbe für Ihr Projekt auswählen, sollten Sie daran denken, wie diese Farbe von Personen mit einer Farbsehschwäche wahrgenommen wird. Deshalb habe ich diesen Abschnitt hinzugefügt, der Ihnen eine Vorschau Ihrer Farbe für verschiedene Farbsehschwächen zeigt.

CSS-Beispiele

Wenn Sie neu in der Web-Entwicklung sind, möchten Sie vielleicht sehen, wie Sie Ihre Farbe als Vorder-, Hintergrund- oder Rahmenfarbe anwenden können. Der Abschnitt „CSS-Beispiele“ gibt Ihnen genau das, eine Hilfestellung, wie Sie die aktuelle Farbe in CSS verwenden können.

Wenn Sie eine Farbe in einem Format betrachten, das in CSS nicht verfügbar ist, dann sehen Sie die Farbe in ein kompatibles Format umgewandelt.

Farbeimer

Sie haben sich für Farben für Ihr nächstes Projekt entschieden und möchten diese als Palette herunterladen oder mit Freunden teilen, um Ihre Entscheidung zu diskutieren? Dann sollten Sie einen Blick auf den Farbeimer werfen. Es ermöglicht Ihnen, bis zu 10 Farben zu speichern, erstellt automatisch Farbpaletten für jede dieser Farben basierend auf der Helligkeit und gibt Ihnen eine WCAG-Matrix.

Sie können jede der Farbpaletten oder die ausgewählten Farben als GIMP-, Adobe® ASE- oder Tailwind CSS-Palette herunterladen. Zusätzlich können Sie alles als 🌈 CSS Gradient, 🔧 CSS Text Shadow oder 📷 Color Palette Image ansehen.

Um eine Farbe zu Ihrem Farbeimer hinzuzufügen, habe ich einen Link „❤️ Add this color to the bucket“ in den Kopfbereich jeder Seite auf dieser Website gesetzt.

Color Contrast Checker

Wenn Sie sich für Farben für ein Projekt entscheiden, ist es wichtig, den Farbkontrast im Auge zu behalten. My Color Contrast Checker ermöglicht es Ihnen, die von Ihnen ausgewählten Farben gemäß den Web Content Accessibility Guidelines (WCAG) 2.0.

zu überprüfen.