Roblox color palette
GamingRoblox's brand color system is defined by a bold black primary, complemented by a range of grayscale neutrals and a signature red accent, reflecting its gaming platform identity. The palette is minimal, focusing on clarity and strong visual hierarchy.
roblox.comRoblox colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Roblox BlackPrimary0, 0, 0
- Roblox WhiteSecondary255, 255, 255
- Roblox RedAccent255, 0, 0
Surfaces
Page, cards and dividers.- Roblox Dark GrayBackground26, 26, 26
- Roblox Surface GraySurface35, 37, 39
- Roblox Border GrayBorder57, 59, 61
Text
Three tiers of copy.- Roblox Text WhiteText255, 255, 255
- Roblox Text GraySecondary text176, 179, 184
- Roblox Muted GrayMuted text124, 127, 133
Semantic
Feedback and state colors.- Roblox Success GreenSuccess67, 181, 129
- Roblox Warning OrangeWarning250, 166, 26
- Roblox Error RedError255, 71, 71
- Roblox Info BlueInfo59, 136, 195
Use Roblox's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
roblox-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B88C3;
--error: #FF4747;
--accent: #FF0000;
--border: #393B3D;
--primary: #000000;
--success: #43B581;
--surface: #232527;
--warning: #FAA61A;
--secondary: #FFFFFF;
--text-muted: #7C7F85;
--background: #1A1A1A;
--text-primary: #FFFFFF;
--text-secondary: #B0B3B8;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
4.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.8:1
Pass
Roblox gray, dark and neutral colors
Roblox runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Roblox Dark GrayBackground
- HEX
- RGB
- HSL
- Roblox Surface GraySurface
- HEX
- RGB
- HSL
- Roblox Border GrayBorder
- HEX
- RGB
- HSL
- Roblox Text WhiteText
- HEX
- RGB
- HSL
- Roblox Text GraySecondary text
- HEX
- RGB
- HSL
- Roblox Muted GrayMuted text
- HEX
- RGB
- HSL
About Roblox's colors
Roblox uses a high-contrast palette centered around black and white, with red as a distinctive accent. The grayscale neutrals support a modern, immersive UI for gaming environments.
Primary black contrasts with white for clarity.
Red accent draws attention to key actions and branding.
Grays create depth and hierarchy in interface elements.
Psychology
Black conveys authority and sophistication, aligning with Roblox's platform status. Red is energetic and draws user focus to important elements.
Evolution
Roblox's palette has remained stable, with black and red as core brand colors since its early years. The grayscale neutrals have been refined for better accessibility and modern UI standards.
Where Roblox uses each color
- Primary
Roblox Black is used for the logo, navigation bar, and main UI backgrounds.
- Secondary
Roblox White is used for text, icons, and contrasting UI elements.
- Accent
Roblox Red appears in the logo, notifications, and call-to-action buttons.
- Backgrounds
Roblox Dark Gray is the default background for app screens and modals.
- Text
Roblox Text White and Text Gray are used for primary and secondary text across the platform.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status indicators and alerts.
Roblox color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Roblox primary color hex code is #000000. This is used for the logo and core UI elements.
Roblox Black is RGB(0, 0, 0) and CMYK(0, 0, 0, 100). The hex code is #000000.
Roblox uses a range of grays including #1A1A1A (Dark Gray), #232527 (Surface Gray), and #393B3D (Border Gray) to structure its interface. These neutrals provide depth and separation between UI components.
Use #000000 for primary branding and navigation, #FF0000 for accents and calls to action, and the grayscale tones for backgrounds and surfaces. Maintain high contrast for accessibility and follow official guidelines for semantic colors.
The secondary color is Roblox White, #FFFFFF, and the accent is Roblox Red, #FF0000. Together with the primary they make up the three brand colors at the top of this page.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Roblox's colors consistently when it generates UI.
Make something in the spirit of Roblox
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.