FiveM HUD Color Palette Generator
Generate harmonious color palettes for your FiveM HUD. Export as CSS variables or Lua config.
What this tool is for
A HUD looks amateurish when its colours were picked one at a time. Colour theory fixes that: pick one base tone and derive the rest from fixed angles on the colour wheel. This generator does the maths and hands you the result as CSS variables for your NUI and as a Lua table for a config file, so the same palette is used on both sides.
How to use it
- Step 1:
Set your base colour, usually the accent colour your server already uses in its logo.
- Step 2:
Choose a scheme. Analogous stays calm and is right for status bars, complementary gives you a strong signal colour for warnings.
- Step 3:
Check the shades against your background. HUD text sits over the game image, so contrast matters more than on a website.
- Step 4:
Copy the palette as CSS variables for the NUI side, or as a Lua table for the config.
Frequently asked questions
Which scheme fits a FiveM HUD?
Analogous or monochromatic for anything permanent, because low contrast between elements keeps the HUD calm. Reserve one complementary colour for alerts. A triadic scheme on a permanent HUD makes the screen restless.
Why does my colour look different in game than in the browser?
The game applies its own post processing and the HUD is drawn over a moving image. Mid tones lose contrast badly at night. Always check a palette against a dark scene, not against the editor background.
How do I use these colours in Lua?
Native drawing functions take RGBA as four numbers from 0 to 255, not hex strings. The Lua output already gives you that form, so you can pass it straight to DrawRect or SetTextColour.
Should the colours live in the config or in the CSS?
Put them in the config and pass them into the NUI once at startup. Server owners then change one file instead of editing stylesheets, and the Lua drawing code and the NUI cannot drift apart.
Related tools
FiveM Color Picker - RGB, HEX & Vehicle Colors
Interactive FiveM color picker with RGB, HEX, HSL values and predefined vehicle color palettes. Copy Lua code for SetVehicleColours.
HEX to RGB Converter for FiveM Development
Bidirectional HEX to RGB converter for FiveM development. Get Lua code, CSS output, HSL values, and preset vehicle colors instantly.
FiveM Config.lua Validator & Checker
Validate FiveM Config.lua files instantly. Check for syntax errors, missing commas, unclosed strings, unmatched brackets. Highlights errors with line numbers.