Farben in CSS werden über Hex-Codes definiert. Sie kennen diese alphanumerischen sechsstelligen Codes wie #990000. Vielleicht haben Sie ein paar davon auswendig gelernt. Wie der gerade erwähnte, ist ein schönes Dunkelrot. #cccccc ist ein helles Grau, lauter Nullen ist Schwarz, lauter Fs ist Weiß usw. Das ist nützliches Wissen, aber Webseiten haben oft alle möglichen Farben und Sie benötigen eine Methode, um die Hex-Codes für gewünschte Farben zu erhalten. Aber wie? Oh, lassen Sie mich die Wege zählen
- Adobe Photoshop. Wenn Sie Photoshop haben, gibt es eine Reihe von Tricks, um Hex-Codes zu ermitteln. Der direkteste Weg ist, das Bild zu öffnen, von dem Sie die Farbe extrahieren möchten (oft ein schneller Screenshot), das Pipettenwerkzeug auszuwählen, mit der rechten Maustaste auf den Bereich zu klicken, von dem Sie die Farbe kopieren möchten, und „Farbe als HTML kopieren“ auszuwählen. Eine schnellere, raffiniere Methode ist, irgendwo auf ein geöffnetes Bild zu klicken, die Maustaste gedrückt zu halten und zu ziehen, und dann können Sie Farben von überall auf Ihrem Bildschirm aufnehmen. Um den Hex-Code zu erhalten, doppelklicken Sie einfach auf die Vordergrundfarbe und kopieren Sie sie aus dem Farbwähler.
- Name That Color. Dies ist mein Lieblings-Online-Farbwähler auf der ganzen Welt =). Sie wählen den Farbton aus dem Kreis am Rand und dann den Farbton/die Schattierung aus dem Quadrat in der Mitte. Ein großer schöner Balken gibt Ihnen einen guten Überblick über Ihre Farbe und Sie können den Hex-Code aus der Box darunter kopieren. Aber das Beste daran ist, dass es Namen für alle Farben gibt. #E5D79F ist so unpersönlich… nennen wir es, wie es ist, Zombie!
- Colorzilla. Eine weitere Möglichkeit, Hex-Code-Farben direkt aus Ihrem Browser zu extrahieren, ist diese ausgezeichnete Firefox-Erweiterung. Sie benutzen doch Firefox, nicht wahr =). Klicken Sie einfach auf die kleine Pipette in der unteren Leiste und klicken Sie irgendwo in das Browserfenster. Der Hex-Code wird direkt in der unteren Leiste angezeigt, oder Sie können mit der rechten Maustaste auf die Pipette klicken und die Farbe in verschiedenen Formaten kopieren.
Ich mag den Photoshop-Trick wirklich, das wusste ich vorher nicht
In CSS können Sie bei der Verwendung der hexadezimalen Schreibweise für Farben, wenn eine Farbe aus drei Paaren von Hexadezimalziffern besteht, diese effizienter schreiben, indem Sie jede zweite Ziffer weglassen: #000 ist dasselbe wie #000000, #369 ist dasselbe wie #336699
Quelle
http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/
Ja, das ist ein guter Punkt. Ich bin kein großer Fan von CSS-Kurzschriften im Allgemeinen, da sie CSS oft schwieriger zu lesen machen, aber diese hier ist meiner Meinung nach in Ordnung, da #369 genauso nichtssagend ist wie #336699.
Es ist wichtig zu bedenken, dass, wenn Sie eine Farbe in 3 Ziffern „abkürzen“ können, dies bedeutet, dass die Farbe „websicher“ ist. Das bedeutet im Grunde, dass sie zu den 216 Farben gehört, die sich zwischen Betriebssystemen nicht unterscheiden. Dies ist jedoch eine fast tote Praxis, also verwenden Sie ruhig vollständige 6-stellige Hex-Codes.
Ich denke, sie sind sparsamer, da sie uns helfen, Bytes zu sparen.
Hier ist ein Schätzchen . . . http://www.nattyware.com/pixie.html
Cool, danke, dass du eine Windows-spezifische Lösung dafür bereitstellst, Graham.
Meine Website zieht regelmäßig Bilder für die Hero-Sektion auf der Landingpage, gibt es eine Möglichkeit, die Farbinformationen aus den Bildern zu extrahieren, um das Stylesheet automatisch zu bearbeiten?