#4466EEBase color#5775F010%#6985F120%#7C94F330%#8FA3F540%#A2B3F750%#B4C2F860%#C7D1FA70%#DAE0FC80%#ECF0FD90%#FFFFFF100%#4466EEBase color#3D5CD610%#3652BE20%#3047A730%#293D8F40%#22337750%#1B295F60%#141F4770%#0E143080%#070A1890%#000000100%#4466EEBase color#4A69E310%#506BD820%#566ECD30%#5C70C240%#6273B750%#6876AC60%#6E78A170%#747B9680%#7A7D8B90%#808080100%Ein Farbnuancengenerator nimmt eine Grundfarbe und baut eine monochromatische Skala aus helleren und dunkleren Versionen davon auf, aus einer einzelnen Eingabe wie #4466EE erzeugt er eine Reihe von Tönungen, die in Richtung Weiß gehen, eine Reihe von Farbtönen, die in Richtung Schwarz gehen, und eine Reihe von Tönen, die in Richtung Grau gehen Jeder Swatch ist eine echte Farbe, die Sie als HEX, RGB oder HSL kopieren und direkt in CSS, eine Designdatei oder eine Designkonfiguration fallen lassen können.
Die drei Skalen stammen aus den klassischen Definitionen, die in der Farbtheorie verwendet werden Eine Tönung ist die Grundfarbe, die mit Weiß gemischt wird, was ihre Helligkeit erhöht, während der gleiche Farbton beibehalten wird Ein Farbton ist die Basis, die mit Schwarz gemischt wird, was sie verdunkelt Ein Ton ist die Basis gemischt mit Grau, was seine Intensität verringert und eine gedämpfte, anspruchsvollere Version der Farbe ergibt Wenn Sie alle drei von einem Eingang haben, können Sie eine kohärente Palette erstellen: einen Knopf und seinen Schwebezustand, einen Satz von Diagrammreihen oder die hellen und dunklen Oberflächen einer Schnittstelle, die alle von einer einzigen Markenfarbe abgeleitet sind.
Der Generator läuft vollständig in Ihrem Browser Die Farbe, die Sie eingeben, wird analysiert und die Skalen werden mit clientseitigem JavaScript berechnet, sodass nichts hochgeladen wird, es kein Konto gibt und Ihre Arbeit nie verfolgt wird. Es akzeptiert HEX, rgb (), hsl () und gängige CSS-Farbnamen, Sie können festlegen, wie viele Schritte jede Skala enthält, und jeden Swatch sofort aktualisieren. Sobald die Seite geladen wurde, funktioniert sie offline.
Geben Sie eine Farbe in eine beliebige gängige Syntax ein oder fügen Sie sie ein: einen HEX-Code wie #4466EE, einen rgb () oder hsl ()-Wert oder einen CSS-Farbnamen wie blaugrün.
Wählen Sie aus, wie viele Variationen jede Skala enthalten soll Weitere Schritte ergeben einen feineren Verlauf von der Basis in Richtung Weiß, Schwarz oder Grau.
Das Tool zeigt drei Skalen nebeneinander, wobei jeder Swatch mit seinem HEX-Wert und dem zur Zielfarbe hin gemischten Prozentsatz gekennzeichnet ist.
Klicken Sie auf einen beliebigen Swatch, um seinen Wert zu kopieren Wechseln Sie das Kopierformat zwischen HEX, RGB und HSL, um der Syntax zu entsprechen, die Ihr Projekt erwartet.
Eine Grundfarbe erzeugt drei volle Schuppen gleichzeitig: hellere Farbtöne, dunklere Farbtöne und gedämpfte Farbtöne in Richtung Grau.
Jeder Swatch ist als HEX, RGB und HSL verfügbar, sodass Sie ihn direkt in CSS, ein Designtool oder eine Themendatei einfügen können.
Stellen Sie 2 bis 20 Schritte pro Skala ein, um zu steuern, wie fein der Farbverlauf zwischen der Grundfarbe und Weiß, Schwarz oder Grau ist.
Akzeptiert 3 - und 6-stellige HEX, rgb () und hsl () Werte, und gängige CSS-Farbnamen, alle auf die gleichen Swatches normiert.
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX, RGB, and HSL values you can copy.
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!