◐
Farbe & Design
Alle 25 Farbe & Design auf Tapwerk — kostenlos, ohne Anmeldung, alles läuft direkt in deinem Browser.
#→oklchFarben umrechnen (HEX, RGB, HSL, OKLCH, Lab, CMYK)Eine CSS-Farbe in alle anderen Formate umrechnen›Aa◐Farbkontrast prüfen (WCAG & APCA)Kontrast Text/Hintergrund prüfen – mit nächster bestehender Farbe›50–950Farbabstufungen erstellenSkala 50–950 (wie Tailwind) oder Aufhellungen/Abdunklungen aus einer Farbe›◐◑Farbharmonien erzeugenKomplementär, analog, Triade, Split und Tetrade›🎨+Farben mischenZwei Farben in beliebigem Verhältnis mischen – mit Zwischenstufen›🎨?Farbnamen findenDie nächste der 148 CSS-Farbnamen für jeden Farbwert›▤🌈CSS-Farbverlauf-GeneratorLineare, radiale und konische Verläufe – mit weicher OKLCH-Interpolation›▢⌁CSS-Schatten-GeneratorWeiche, geschichtete Schatten für natürliche Tiefe›🔲✨Glas-Effekt CSS (Glassmorphism)Milchglas-Karten mit Hintergrund-Unschärfe – CSS kopieren›[btn]CSS-Button-GeneratorBarrierearme Button-Stile mit Hover-, Fokus- und Gedrückt-Zustand›Aa↕Schriftgrößen-SkalaModulare Schriftgrößen (große Terz, Quarte, Goldener Schnitt …) als CSS›↔AaZeilenlänge & Zeilenhöhe berechnenZeichen pro Zeile für eine Textbreite – und passende Zeilenhöhe›▫▢◻Abstands-Skala erstellen8-pt- (oder 4-pt-)Abstände als CSS-Variablen und Tailwind-Config›◼→🎨CSS-Filter für Icon-FarbenDen CSS-Filter finden, der ein schwarzes Icon/SVG in jede Farbe färbt›▦AaKontrast-Matrix für PalettenKontrast aller Farbpaare einer Palette – welche Kombis bestehen WCAG?›👁◐Paletten-Check für FarbfehlsichtigkeitPalette bei Protanopie, Deuteranopie, Tritanopie sehen – und kritische Paare finden›☀☾UI-Farbschema (hell & dunkel)CSS-Variablen für helles und dunkles Theme aus einer Markenfarbe – kontrastgeprüft›▦▧SVG-Muster-GeneratorNahtlose Hintergrundmuster (Punkte, Raster, Streifen, Zickzack …) als CSS›⬮〰SVG-Blob- & Wellen-GeneratorOrganische Formen und Wellen-Trenner als sauberes SVG›◉◎Mesh-Verlauf-GeneratorWeiche mehrfarbige „Aurora“-Hintergründe in reinem CSS›😀icoFavicon aus Emoji oder Buchstabenfavicon.ico, PNG-Größen, Apple-Touch-Icon und SVG-Favicon›🖼1200Social-Media-Vorschaubild (Open Graph)1200 × 630 Vorschaubilder für Links, Blogs und Posts›❝🖼Zitat-Bild erstellenEin Zitat als quadratisches Bild, Hochformat oder Story›AB◯Monogramm-Logo erstellenEin klares Initialen-Logo im Kreis, Quadrat oder Sechseck – SVG und PNG›🖥ℹBildschirm- & Viewport-InfoBildschirmauflösung, Viewport-Größe, Pixeldichte und Anzeige-Einstellungen›