Du siehst auf einer Website eine Schrift die dir gefällt, oder eine Farbe die du gerne für dein eigenes Projekt übernehmen würdest – aber woher bekommst du den genauen Wert? Ganz einfach: aus den DevTools. Kein Zusatztool, kein Umweg nötig.
Abschnitte: Schrift auslesen, Farbe auslesen, Das Farbformat wechseln.
Schrift auslesen
Klick mit Rechts auf einen Text der Seite und wähle Element untersuchen. Im Inspektor siehst du auf der rechten Seite die CSS-Regeln des Elements. Dort steht unter anderem font-family – das ist der Name der verwendeten Schrift.
Oft stehen dort mehrere Schriften hintereinander, zum Beispiel:
font-family: "Readex Pro", Arial, sans-serif;
Das ist eine sogenannte Font-Stack-Angabe: Der Browser nimmt die erste Schrift wenn sie verfügbar ist, sonst die nächste, und so weiter. Die erste in der Liste ist also die tatsächlich verwendete Schrift – in diesem Fall Readex Pro.
Wenn du wissen willst ob es sich um eine Google Font, eine selbst eingebundene Schrift oder eine Systemschrift handelt, schau im HTML-Baum ganz oben im <head>-Bereich nach einem <link>-Tag der auf fonts.googleapis.com zeigt – oder nach einem @font-face-Block in den CSS-Regeln.
Farbe auslesen
Genauso funktioniert es mit Farben. Wähle ein Element aus – zum Beispiel einen farbigen Button oder eine Überschrift – und schau in den CSS-Regeln nach color, background-color oder border-color. Dort steht der genaue Farbwert.
Neben dem Farbwert siehst du in den DevTools ein kleines farbiges Quadrat. Ein Klick darauf öffnet einen Farbwähler direkt in den DevTools. Du kannst damit die Farbe des Elements live verändern und ausprobieren – und du siehst dabei sofort den passenden Hex- oder RGB-Wert.
Das Farbformat wechseln
Farben tauchen in CSS in verschiedenen Formaten auf – zum Beispiel als Hex-Wert #3a86ff, als RGB rgb(58, 134, 255) oder als HSL hsl(217, 100%, 61%). Im Farbwähler der DevTools kannst du zwischen diesen Formaten wechseln – meistens mit einem Klick auf den Farbwert selbst oder einen kleinen Pfeil daneben.
Für die meisten Zwecke reicht der Hex-Wert. Wenn du jedoch transparente Farben brauchst – also Farben mit einem Alphawert – wechsle auf rgba, zum Beispiel rgba(58, 134, 255, 0.5) für eine halbtransparente Variante.
Welches Format du wann einsetzt und wie die Werte aufgebaut sind, erklärt das Nugget Farbpalette fürs Web – inklusive einer visuellen Übersicht der gebräuchlichsten Webfarben nach Farbton sortiert und einem Farbmischer zum freien Kombinieren.