0to255.com – Farbabstufungen auf Knopfdruck

Wer kennt das nicht: Man hat eine Primärfarbe festgelegt und braucht jetzt einen etwas dunkleren Ton für den Hover-Zustand eines Buttons – oder eine hellere Variante als Hintergrundfarbe. Ohne das richtige Werkzeug endet man schnell in einem Trial-and-Error-Loop im CSS.

0to255.com löst genau dieses Problem. Man gibt einen Hex-Farbwert ein und erhält sofort eine vollständige Abstufungspalette – von fast Weiß bis fast Schwarz – in gleichmäßigen Schritten. Per Klick wird der gewünschte Wert direkt in die Zwischenablage kopiert.

Wann ist das Tool nützlich?

• Button-States: Hover, Active und Disabled-Farben konsistent ableiten
• Hintergründe: Einen dezenten Tint der Brandingfarbe für Sektionshintergründe finden
• Schatten und Borders: Subtile, farbige Box-Shadows oder Rahmen ohne harte Grautöne
• Design-Systeme: Schnell eine Farbskala mit 5–10 Stufen für Styleguide-Tokens definieren

Direkt im CSS nutzen

Die generierten Werte lassen sich prima als CSS Custom Properties übernehmen:

:root {
  --color-primary-light: #ffd580;
  --color-primary:       #f49a00;
  --color-primary-dark:  #b87200;
}

So bleibt die Farbpalette konsistent über das gesamte Projekt hinweg – und Änderungen an der Primärfarbe ziehen sich durch alle Abstufungen, wenn man die Palette neu generiert.

Alternativen

Ähnliche Funktionen bieten coolors.co und Paletton. 0to255 punktet aber durch seine Schlichtheit – keine Registrierung, keine Ablenkung, einfach Farbe rein und Palette raus. Für schnelle Entscheidungen im Entwickleralltag kaum zu schlagen.

→ 0to255.com aufrufen