Farben und Verläufe

HEX, RGB, HSL, OKLCH, Kontrast und Verläufe

Keine Datenbank: AIMRAN speichert weder deine Dateien noch Texte oder Ergebnisse

Was ist Farben und Verläufe?

Wähle oder füge eine Farbe ein und du siehst ihren Code in allen Formaten, die Webdesigner und Entwickler nutzen: HEX, RGB, HSL, HWB und OKLCH. Außerdem erzeugt das Tool hellere und dunklere Abstufungen derselben Farbe.

Es prüft auch, ob Text in dieser Farbe auf einem Hintergrund gemäß den Barrierefreiheitsrichtlinien gut lesbar ist, und hilft dir beim Erstellen von CSS-Verläufen zum Kopieren.

So funktioniert es

  1. Gib eine Farbe in beliebigem Format ein (#0071e3, rgb(…), hsl(…), oklch(…) oder ein CSS-Name) oder nutze die Farbauswahl.
  2. Kopiere unter „Formate“ das benötigte Format.
  3. Wähle unter „WCAG-Kontrast“ eine Hintergrundfarbe, um zu sehen, ob AA und AAA erfüllt sind.
  4. Klicke auf eine Abstufung, um sie als Hauptfarbe zu verwenden.
  5. Wähle unter „CSS-Verlauf“ linear, radial oder konisch, passe Winkel und Stopps an und kopiere das CSS.

Vorteile

Technische Details

Akzeptiert werden HEX mit 3, 4, 6 oder 8 Stellen, rgb()/rgba(), hsl()/hsla(), hwb(), oklch() und CSS-Farbnamen, jeweils mit Alphakanal. Die Umrechnungen für HSL und HWB entsprechen CSS Color Module Level 4; OKLCH wird aus linearem sRGB über den Oklab-Farbraum von Björn Ottosson berechnet. Der Kontrast folgt WCAG 2.x: relative Leuchtdichte L = 0,2126 R + 0,7152 G + 0,0722 B auf linearisierten Komponenten und Verhältnis (L1 + 0,05) / (L2 + 0,05); gefordert sind 4,5:1 für AA bei normalem Text, 3:1 für AA bei großem Text, 7:1 für AAA normal und 4,5:1 für AAA groß. Halbtransparente Farben werden vor der Messung auf den Hintergrund gerechnet. Die Abstufungen entstehen durch Mischen mit Weiß und Schwarz in Schritten von 15 %. Die Verläufe erzeugen linear-gradient, radial-gradient oder conic-gradient mit bearbeitbaren Stopps und Positionen.

Häufige Fragen

Wie wandle ich eine HEX-Farbe in RGB um?

Füge den HEX-Code ein, und das Tool zeigt sofort die Entsprechung in RGB, HSL, HWB und OKLCH. #0071e3 ist zum Beispiel rgb(0, 113, 227).

Welchen Mindestkontrast verlangt die Barrierefreiheit?

Die WCAG fordern für Stufe AA ein Verhältnis von 4,5:1 zwischen Text und Hintergrund bei normalem Text und 3:1 bei großem Text. Stufe AAA verlangt 7:1 bzw. 4,5:1.

Was ist OKLCH?

Ein modernes CSS-Farbformat auf Basis wahrgenommener Helligkeit, Buntheit und Farbton. Es erleichtert stimmige Paletten, weil eine Änderung der Helligkeit den sichtbaren Farbton nicht verschiebt.

Wie erstelle ich einen Farbverlauf in CSS?

Wähle unter „CSS-Verlauf“ Typ, Winkel und die Farben jedes Stopps und kopiere die erzeugte background-Eigenschaft.

Was ist der Unterschied zwischen HSL und HEX?

Beide beschreiben dieselbe Farbe. HEX drückt sie hexadezimal als Rot, Grün und Blau aus; HSL nutzt Farbton, Sättigung und Helligkeit, was sich intuitiver anpassen lässt.

Weitere Tools: Entwickler