How the common color formats relate
Most Roblox color friction comes from switching between tools that describe the same color in different ways. Designers often start from HEX. Developers may think in RGB channels. Studio code often wants a Color3 expression.
The important thing is that these formats are different representations of the same underlying color choice. Once that is clear, the job becomes conversion, not guesswork.
- HEX is common in design references and brand palettes.
- RGB expresses the same color as red, green, and blue channel values.
- Color3 is the Roblox-side output developers often want to paste into Studio.
When to use Color3.fromRGB and Color3.new
For many Studio workflows, Color3.fromRGB is the easiest output to read because it matches whole-number RGB channels directly. Color3.new is useful when you are already working with normalized decimal values between zero and one.
The practical rule is simple: choose the output that matches the way you already think about the color. Do not make yourself translate formats twice if you do not need to.
- Use Color3.fromRGB when the source is already in whole-number RGB.
- Use Color3.new when you want normalized decimal channels.
- Keep both visible if you move between design and scripting often.
What counts as a valid color code
Not every color string creators paste is accepted, and knowing the rules saves a confusing error. HEX may be written with or without a leading #, and three-digit shorthand expands by doubling each digit — so #f00 becomes #FF0000, i.e. RGB 255, 0, 0. That shorthand only works because each digit stands for a pair, which is why #f00 and #ff0000 are the same color but #f000 is not valid at all.
Two more rules trip people up. Named colors like ‘red’ are not color codes — Roblox uses BrickColor names for that, so a converter expects HEX, RGB, normalized, or a Color3 expression instead. And channel values are validated, not clamped: an RGB channel must be 0–255 and a normalized channel must be 0–1, so a stray 300 in an RGB field, or 128 typed into a normalized field, is rejected as an error rather than quietly corrected.
- HEX: with or without #; #f00 expands to #FF0000 (255, 0, 0).
- Named colors (‘red’) are BrickColor names, not codes — use HEX, RGB, normalized, or Color3.
- Out of range is rejected, not clamped: 0–255 for RGB, 0–1 for normalized (300 returns an error).
A practical Studio workflow
A common workflow starts with a HEX color from Figma, Photoshop, or a brand sheet. From there, the useful next step is usually RGB for validation and then Color3 output for Studio.
That same flow is also useful for badge art or UI polish. If the palette starts outside Roblox, a converter keeps the Studio handoff clean and consistent.
- Example: HEX #3366FF becomes RGB 51, 102, 255.
- That same color can then be turned into a Color3.fromRGB output for Studio.
- A single conversion view reduces copy errors when you are matching UI colors across assets and scripts.
How to use this with our tools
Use the Roblox Studio Color Converter when you want all major formats visible at once, plus a preview so the color is easy to verify before you paste it into Studio.
If the color work connects to visual asset prep, the Roblox Badge Icon Safe Area Preview is a useful next stop because it helps you check whether icon artwork still reads cleanly once the composition tightens.
- Paste HEX when the source comes from a design tool.
- Copy the Color3 output that matches your scripting style.
- Keep the preview visible while you compare multiple palette options.