Farben konvertieren

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

Konvertierungen

Hier sehen Sie Ihre Farbe konvertiert in 15 verschiedene Farbformate wie RGB, CMYK, HSV, HSL, CIELab, Android, Decimal und YUV.

🤖 Konvertieren Sie mehrere Farben auf einmal oder 📢 erhalten Sie Konvertierungen und Harmonien über die REST API.

📕 HOWCOLORS.WORK

Eine Anleitung zur CSS-Farbnotation.

oder kaufen Sie es auf Leanpub!

Details

Die Hex-Farbe B76E79 ist eine dunkle Farbe, und die websichere Version ist hex 996666, und der Farbname ist rose gold. Ein Komplement dieser Farbe wäre 6EB7AC, und die Graustufenversion ist 858585.
Eine 20% hellere Version der Originalfarbe ist F1A3AD, und 803D49 ist die 20% dunklere Farbe. Wenn Sie die Farbe um 10% sättigen, erhalten Sie B75C69, und wenn Sie um 10% entsättigen, ist es B78089.

Verteilung

Helligkeit & Sättigungsverläufe

Diese Verläufe zeigen, wie sich die Hex-Farbe B76E79 bei einer Veränderung der Helligkeit um 10 Prozent verändert. Die erste Abbildung zeigt eine Verschiebung um +10% für jede Farbe und die zweite Abbildung -10%.

Ähnlich wie bei den Helligkeitsverläufen, aber die folgenden Sättigungsverläufe zeigen eine Änderung der Hex-Farbe B76E79, wenn man stattdessen die Sättigung um 10% ändert.

Harmonien

SVG-Bilder

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

Vorschauen

Hex B76E79 Hintergrund

Farbenblindheitssimulation

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

Farbenblindheit

Trichromacy

Monochromie

CSS-Beispiele

Text

Die CSS-Eigenschaft, um die Farbe des Textes auf Hex B76E79 zu ändern, heißt „color“. Die Eigenschaft „color“ kann auf Klassen, ids oder direkt auf das HTML-Element gesetzt werden.

Dieses Beispiel zeigt, wie Text in der Farbe #B76E79 aussieht.

.text, #text, p{color:#B76E79}
📋 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 #B76E79-Farbschatten aussieht.

.shadow{ text-shadow: 4px 4px 2px #B76E79 } 
📋 Copy Code

Border

Die CSS-Eigenschaft, um den Rand eines Elements auf Hex B76E79 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.

.border, #border, table{ border:4px solid #B76E79 }
📋 Copy Code

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

.border{ border-color:#B76E79 }
📋 Copy Code

Wenn Sie einen Box-Schatten in dieser Farbe hinzufügen möchten, verwenden Sie:

Hier sehen Sie, wie eine Box mit einem 4 Pixel großen #B76E79 farbigen Schatten aussieht.

.boxshadow{ -moz-box-shadow:4px 4px 4px 4px #B76E79; -webkit-box-shadow:4px 4px 4px 4px #B76E79; box-shadow:4px 4px 4px 4px #B76E79 }
📋 Copy Code

Hintergrund

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

.background, #background, body{ background:#B76E79 }
📋 Copy Code

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

.background{ background-color:#B76E79 }
📋 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, schauen Sie sich unseren 🌈 CSS Gradient Generator an.

📕 HOWCOLORS.WORK

Eine Anleitung zur CSS-Farbnotation.

oder kaufen Sie es bei Leanpub!

How-to use Converting Colors

Conversion

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

Einige Farbformate verwenden die gleiche Notation, und die Konvertierung errät die Zusammensetzung der Suchanfrage. Wenn Sie zum Beispiel versuchen, die Zeichenkette „351°, 40%, 72%“ 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(351°, 40%, 72%)“ liefert Ihnen die korrekte HSV-Farbe, da das Format nicht erraten werden muss. Andere Beispiele wären „CIELAB(54.66, 30.32, 6.37)“, „CIELCH(55, 30.982, 11.862)“, „YXY(22.5996, 0.3960, 0.3134)“ und „CMYK(0.00, 0.40, 0.34, 0.28)“.

Details

Im Detailbereich erhalten Sie zunächst eine Zusammenfassung der Farbe und, falls vorhanden, eine Beschreibung wie „dunkel gedämpftes Rot“. Sie können die Farbverteilung in verschiedenen Formaten sehen. Im RGB-Format erfahren Sie zum Beispiel den Anteil von Rot, Grün und Blau in Ihrer Farbe.

Zuletzt erhalten Sie Helligkeits- und Sättigungsverläufe Ihrer Farbe in 10%-Schritten. Wenn Sie also eine hellere oder dunklere Version benötigen, können Sie diese hier auswählen.

Harmonien

Die Harmonien zeigen Ihnen grundsätzlich Farben, die gut zu der Farbe passen, die Sie gerade sehen. Wenn Ihnen eine der Harmonien gefällt, können Sie daraus direkt einen 🌈 CSS-Gradienten oder 🔧 CSS-Textschatten erstellen oder die Harmonie als 🖌️ Farbeimer ansehen.

SVG-Bilder

Dieser kurze Abschnitt zeigt Ihnen 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 möchten sehen, wie Ihre Farbe auf einem weißen oder schwarzen Hintergrund aussieht? Dann sollten Sie sich den Bereich „Previews“ auf der Farbseite anschauen.

Sie sehen auch den Farbkontrast Ihrer Farbe auf diesen Hintergründen und erhalten einen Link zum Farbkontrast-Checker mit Ihrer vorgewählten Farbe.

Farbenblindheitssimulation

Wenn Sie eine Farbe für Ihr Projekt auswählen, sollten Sie bedenken, wie diese Farbe von Personen mit einer Farbsehschwäche wahrgenommen wird. Deshalb habe ich diesen Abschnitt hinzugefügt, der Ihnen Vorschauen 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 Bereich „CSS-Beispiele“ gibt Ihnen genau das, eine Hilfestellung, wie Sie die aktuelle Farbe in CSS einsetzen 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 erlaubt 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 sich 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. Mit My Color Contrast Checker können Sie die von Ihnen ausgewählten Farben gemäß den Web Content Accessibility Guidelines (WCAG) 2.0 überprüfen.