Roblox Color Codes: Hex, RGB & Color3 Picker

Choose a color for your next Part or interface. Enter a hex value or RGB channels, inspect the swatch, and take matching Color3 expressions into Roblox Studio.

Choose your color

Your Color3 code

#0D4EF1 · RGB 13, 78, 241

-- Three ways to represent the same color
local rgbColor = Color3.fromRGB(13, 78, 241)
local hexColor = Color3.fromHex("0D4EF1")
local normalizedColor = Color3.new(13 / 255, 78 / 255, 241 / 255)

-- Use the color with a compatible property in your script.
-- Example: part.Color = rgbColor

Sample colors

Custom starting swatches, not official BrickColor names or palette IDs.

Convert the value you already have

If your design file gives you a hex color, select Hex and paste it into the field. A three-digit value such as #F80 expands to #FF8800. If you have separate red, green, and blue values, switch to RGB and enter whole numbers from 0 to 255. The current valid color carries across when you switch formats.

The generated code shows three equivalent constructions. Keep the one that makes your source color easiest to recognize. A team working from hex design tokens may prefer the hex expression; a script with RGB constants may be clearer with the RGB constructor. All three outputs refer to the same selected channels.

Color3.new and Color3.fromRGB use different scales

The official Color3 reference lists new, fromRGB, and fromHex. Color3.new uses normalized components, while fromRGB accepts the familiar 0–255 scale. This tool writes each normalized component as an exact channel divided by 255, avoiding a rounded decimal in the copied expression.

For pure red, the expressions are Color3.fromRGB(255, 0, 0), Color3.fromHex("FF0000"), and Color3.new(255 / 255, 0 / 255, 0 / 255). To check your own conversion, start with black, white, or one pure channel, then return to the intended color. A familiar boundary value makes a scale mistake easier to spot.

Custom colors and BrickColor IDs are different

A hex color is not a numeric BrickColor palette ID. The BrickColor reference describes the separate predefined palette type. This picker creates Color3 expressions and labels its swatches as custom examples. It does not assign an official BrickColor name or find the nearest palette entry.

If an existing script expects BrickColor, inspect that script’s property and constructor before pasting a Color3 value. A color that looks similar on the screen does not make two data types interchangeable. Keep the original representation in a note when translating an existing asset’s appearance.

Apply the color to a compatible property

The download contains color variables and a commented assignment example. It does not select an object or modify a Roblox place. In your own script, choose an existing Part and assign the selected variable to its Color property. For an interface, identify the intended color property on that specific GUI object.

Use a small practice scene to compare the result under your actual lighting and materials. The browser swatch previews the selected color value; it does not reproduce Roblox rendering. When a result looks different, inspect the material, lighting, and surrounding colors before changing the numeric value.

For animated color changes, continue with the TweenService guide. For a menu or status panel, use the GUI tutorial. Pair status colors with a readable label or shape so players do not need color alone to understand the state.

What the picker accepts

This editor accepts 3- or 6-digit hex values, with or without a leading #, and integer RGB channels from 0 to 255. Invalid or empty input disables copying and downloading until corrected. Hex values with an alpha channel are excluded: configure transparency separately on the object that needs it.

Conversion happens in your browser. Reloading restores the default color. The tool generates Luau text; test its use inside your own Studio project before shipping a change.