HEX to RGB for Unity — Stop Eyeballing Color Values

webdev color-converter tools

The Figma chip says #6366F1. You type 99, 102, 241 into Unity’s color picker by hand, miss a digit, and the button is suddenly a different indigo on device than in the mock. Or you paste floats like 99f, 102f, 241f into a Color constructor and get a nuclear glow because Unity expected 0–1 ranges.

Color conversion is arithmetic. The bugs are unit mistakes and color-space assumptions.

HEX → channels without drama

#RRGGBB or #RRGGBBAA:

  • R = 0x63 → 99
  • G = 0x66 → 102
  • B = 0xF1 → 241

For Unity Color (float):

Color FromHex(string hex)
{
    hex = hex.TrimStart('#');
    byte r = Convert.ToByte(hex.Substring(0, 2), 16);
    byte g = Convert.ToByte(hex.Substring(2, 2), 16);
    byte b = Convert.ToByte(hex.Substring(4, 2), 16);
    byte a = hex.Length >= 8
        ? Convert.ToByte(hex.Substring(6, 2), 16)
        : (byte)255;
    return new Color(r / 255f, g / 255f, b / 255f, a / 255f);
}

For Color32, keep the bytes:

new Color32(99, 102, 241, 255);

Never mix: new Color(99, 102, 241) is wrong. Unity will clamp/interpret those as enormous floats in linear light depending on context — either way, it will not match the mock.

When you need a quick check across HEX, RGB, and HSL before pasting into C#, a HEX/RGB color converter beats mental math during a play mode session.

Alpha is not optional in UI

Fades, disabled states, and overlays live in the alpha channel. Designers often hand off #6366F1 at 40% opacity as a separate property, not #6366F166. Confirm whether opacity is:

  • In the hex (AA)
  • A Figma layer opacity (multiply on top of fill)
  • A separate Unity CanvasGroup.alpha

Double-applying opacity (hex alpha and CanvasGroup) is a classic “why is this so faint?” ticket.

sRGB vs linear — when “close enough” fails

Unity’s Color Picker and shaders care about color space. If the project uses linear color space (common), textures marked sRGB are sampled differently than raw float colors assigned in scripts. Symptoms:

  • UI Image colors match editor but VFX tints look washed or too dark
  • Team argues two “identical” RGB triples look different on materials vs uGUI

Practical rule for UI: keep brand colors in one scriptable source (ScriptableObject or const class) as HEX strings or Color32, convert in one place, and reuse. Do not retype triples per prefab.

public static class BrandColors
{
    public static readonly Color Primary = FromHex("#6366F1");
    public static readonly Color Danger  = FromHex("#EF4444");
}

Web ↔ Unity handoff table

SourceUnity targetWatch for
#RRGGBBColor / Color32Divide by 255 for Color
rgb(99 102 241 / 40%)Include alphaPercent vs 0–1
HSL from CSSConvert to RGB firstHue units differ by tool
Photoshop 0–100%Scale to 0–255Not the same as Unity floats

FAQ

Why does the Inspector show 0–255 but scripts use 0–1?
Color32 uses bytes; Color uses floats. The Inspector can display either depending on field type.

Can I paste CSS rgb() into Unity?
Not directly. Convert to 0–255 or 0–1 first.

Should art use linear textures for UI sprites?
UI sprites are usually sRGB. Match import settings to how colors were authored.

Convert once, store once, reference everywhere. Eyeballing indigo is how “almost brand” ships to production.