Farbschattierungen Generator
Beliebige Basisfarbe auswählen und sofort eine 10-stufige Palette (50–900) per HSL-Helligkeitsskalierung generieren — wie Tailwind CSS. HEX, RGB und CSS-Variablen kopieren.
:root {
--color-primary-50: #f1f1fe;
--color-primary-100: #dedffc;
--color-primary-200: #b9baf9;
--color-primary-300: #8588f4;
--color-primary-400: #484cef;
--color-primary-500: #1418e1;
--color-primary-600: #1013ad;
--color-primary-700: #0b0e7e;
--color-primary-800: #080954;
--color-primary-900: #04052f;
}Wie Schattierungen generiert werden
Das Tool konvertiert die Basisfarbe in HSL, erhält Farbton und Sättigung und wendet eine feste Helligkeitskurve über 10 Stufen an — von 97 % Helligkeit bei Stufe 50 bis 10 % bei Stufe 900.
CSS Custom Properties
Jede Schattierung wird einer CSS-Variable wie --color-primary-500 zugeordnet. Den Präfix frei benennen und den generierten :root-Block direkt ins Stylesheet einfügen.
Verwandte Werkzeuge
Farbverlauf-Paletten-Generator
Gleichmäßige RGB-Farbverläufe zwischen zwei Farben mit 3–20 Schritten. HEX, CSS linear-gradient oder Tailwind-Array kopieren.
Farbkontrast-Analysator
WCAG-2.1-Kontrastverhältnisse prüfen. Bestanden/Nicht bestanden für AA und AAA — plus automatische Vorschläge und Live-Textvorschau.
Farbblindheits-Simulator
Bild hochladen und sehen, wie es bei Protanopie, Deuteranopie, Tritanopie und Achromatopsie aussieht.
Online-Farbwähler — HEX, RGB & HSL
Wählen Sie visuell jede Farbe mit einem Canvas-basierten HSV-Wähler. Exportieren Sie als HEX, RGB oder HSL.
Farbrad Online — interaktiver HSL-Farbwähler
Interaktives HSL-Farbrad. Klicken Sie auf jeden Punkt, um seinen Farbton und die Sättigung auszuwählen.
Bild-Farbwähler — Farben aus Fotos
Laden Sie ein beliebiges Bild hoch und klicken Sie, um Farben direkt aus Pixeln zu entnehmen.
HEX zu RGB Farbkonverter
Wandle HEX-Farbcodes sofort in RGB-, HSL-, HSV- und CMYK-Werte um.
RGB zu HEX Farbkonverter
Stelle R-, G-, B-Werte mit Schiebereglern oder Eingaben ein und erhalte die HEX- und HSL-Ausgabe.
Farbkontrast-Prüfer Online — WCAG AA & AAA
Prüfen Sie das WCAG-2.1-Farbkontrastverhältnis für AA- und AAA-Konformität. Live-Textvorschau.
Farbmischer & Farbverlauf-Generator
Mischen Sie zwei Farben mit einem Verhältnisregler. Erhalten Sie eine vollständige Farbverlaufspalette.
CSS-Farbnamen — Alle 148 Farben
Durchsuche alle 148 CSS-Farbnamen mit ihren HEX- und RGB-Werten.
Material-Design-Farbtabelle & Palette
Material-Design-Farbpalette — 19 Farbfamilien × 10 Abstufungen.
Minecraft-Farbcodes & Formatierung
Alle Minecraft-§-präfixierten Farb- und Formatierungscodes mit Vorschau.
Roblox-Farbcodes & BrickColor-IDs
Vollständige Roblox-BrickColor-Palette mit Farb-IDs und RGB-Werten.
Farbpaletten-Generator
Harmonische Farbpaletten aus einer Basisfarbe generieren — komplementär, triadisch und analog.
Farbformat-Konverter
Farben sofort zwischen HEX, RGB, HSL, HSV, CMYK und CSS-Farbnamen umwandeln.