EN DE

Leitfäden

HEX-zu-Color3-Leitfaden

Lerne, wie du HEX-Farben sauber in Roblox-Color3-Werte übersetzt und Design-Farben ohne Ratespiel in Studio übernimmst.

HEX ist oft der Startpunkt, Color3 das Ziel

Viele Roblox-Workflows beginnen mit einer Farbe aus einem Design-Tool, Styleguide oder Screenshot. Dort liegt der Wert oft als HEX-Code vor, in Studio brauchst du am Ende aber eine Color3-Darstellung oder klare RGB-Werte.

Die eigentliche Aufgabe ist deshalb nicht, eine neue Farbe zu erfinden, sondern eine vorhandene Referenz sauber in das Roblox-Format zu übersetzen.

  • HEX ist häufig die Design- oder Markenreferenz.
  • RGB ist die nachvollziehbare Zwischenstufe.
  • Color3 ist das Roblox-nahe Ziel für Properties und Skripte.

Welche Ausgabeform im Projekt am sinnvollsten ist

Wenn dein Team mit ganzzahligen Farbkanälen denkt, wirkt Color3.fromRGB meist am natürlichsten. Wenn du bereits normalisierte Dezimalwerte nutzt, kann Color3.new besser passen. Wichtiger als die Theorie ist, dass du dich in einem Projekt nicht unnötig zwischen mehreren Stilen verlierst.

Ein Live-Vorschaubild hilft trotzdem, weil mathematisch korrekte Farben in UI oder Icon-Kontext anders wirken können als im Mockup.

  • Wähle eine Ausgabeform, die dein Team schnell lesen kann.
  • Halte denselben Stil innerhalb eines Projekts möglichst konsistent.
  • Prüfe die Farbe visuell, nicht nur als Zahl.

Eine durchgerechnete Umwandlung, Kanal für Kanal

Einen Wert einmal komplett durchzurechnen macht die Zuordnung greifbar. Nimm die HEX-Farbe #E2231A. In Paare zerlegt ergibt das E2, 23 und 1A, also 226, 35 und 26 im Dezimalsystem — das ist dein RGB und direkt dein Color3.fromRGB(226, 35, 26). Für Color3.new teilst du jeden Kanal durch 255: 226 ÷ 255 ≈ 0,8863, 35 ÷ 255 ≈ 0,1373, 26 ÷ 255 ≈ 0,1020, also Color3.new(0.8863, 0.1373, 0.1020).

Beide Zeilen beschreiben exakt dasselbe Rot, nur in den zwei Konstruktoren, die Studio versteht. Kurzes HEX funktioniert genauso, sobald es ausgeschrieben ist: #f00 wird zu #FF0000, also RGB 255, 0, 0. Die einzige Zahl, die überrascht, ist der Rückweg — Color3.new(0.5, 0.5, 0.5) wird als RGB 128 gespeichert und liest sich zurück als 0,5020, weil 128 ÷ 255 nicht genau 0,5 ergibt. Wenn du exakte Bytes brauchst, nimm die fromRGB-Form.

  • #E2231A → E2, 23, 1A → 226, 35, 26 (dezimal).
  • Color3.fromRGB(226, 35, 26); jeden Kanal durch 255 teilen → Color3.new(0.8863, 0.1373, 0.1020).
  • Rückweg-Eigenheit: 0,5 → Byte 128 → 0,5020, also nutze fromRGB, wenn exakte Bytes zählen.

Wie du das mit unseren Tools nutzt

Der Roblox Studio Color Konverter ist die direkte Wahl, wenn du HEX in RGB, normalisierte Werte und Color3-Ausgaben übersetzen möchtest. Wenn du mehrere Farben gleichzeitig als Theme oder Palette exportierst, ergänzt der Roblox-Farbpalette-zu-Color3-Exporter denselben Workflow.

Für BrickColor-nahe Entscheidungen kann zusätzlich der Roblox-BrickColor- und Color3-Konverter helfen, wenn du prüfen willst, welche Roblox-Farbbenennung am ehesten passt.

  • Konvertiere zuerst den einzelnen HEX-Wert sauber.
  • Exportiere danach bei Bedarf eine ganze Palette.
  • Nutze Vorschau und Color3-Ausgabe gemeinsam, bevor du den Wert in Studio übernimmst.

Zurück nach oben

FAQ

Warum reicht ein HEX-Code in Roblox Studio nicht direkt aus?
Weil Studio in der Praxis meist mit RGB- oder Color3-nahen Werten arbeitet.
Soll ich eher Color3.fromRGB oder Color3.new nutzen?
Das hängt davon ab, ob dein Workflow mit ganzzahligen RGB-Kanälen oder normalisierten Dezimalen arbeitet.
Warum ist eine Vorschau trotz korrekter Umrechnung sinnvoll?
Weil dieselbe Farbe in UI, Icon oder Beleuchtung unterschiedlich wirken kann.
Wann ist ein Palette-Exporter hilfreicher als ein Einzelkonverter?
Wenn du mehrere Farben als zusammenhängendes Theme oder UI-Set nach Roblox übertragen möchtest.

Empfohlenes Tool nutzen

Passendes Roblox-Tool direkt öffnen

Lerne, wie du HEX-Farben sauber in Roblox-Color3-Werte übersetzt und Design-Farben ohne Ratespiel in Studio übernimmst.