← Palettes · [email protected]

Roblox

Roblox's brand palette as captured from the live roblox.com "Foundation" design-system tokens (--color-extended-*, --color- surface-*, --color-content-*, --color-system-*, --light-mode-*, --dark-mode-* token families). The brand is dual-mode by construction with a strong dark-mode default on the consumer site: a near-black "Surface 0" canvas (#121215 dark / #FFFFFF light) carries the chrome, with the "System Emphasis" blue (#335FFF, light variant #1446FF, dark variant #528BFF) as the primary identifying action color. The brand has moved away from its earlier red-orange identity toward this calibrated blue palette under the recent Foundation rebrand. A complete extended ramp covers every hue (blue, green, red, yellow, orange, magenta, pink, purple, turquoise, gray) in 14 steps — this atom captures the most-used identity stops and the documented system roles.

29 swatches 15 light roles 15 dark roles robloxgamingplatformbluedual-modedark-default

Swatches

emphasis-blue

#335FFF

Primary brand action — --color-system-emphasis and --color-extended-blue-700. The Foundation system's identifying action color across both modes.

emphasis-blue-link

#1446FF

Inline-link variant for light mode — --light-mode-content- link and --color-extended-blue-800.

emphasis-blue-bright

#528BFF

Link variant for dark mode — --dark-mode-content-link and --color-extended-blue-600.

emphasis-blue-pale

#8FB4FF

Pale link / tertiary blue — --color-extended-blue-400.

emphasis-blue-light

#EBF1FF

Lightest blue surface — --color-extended-blue-100. Soft branded background tint.

emphasis-blue-deep

#002DD6

Deep blue — --color-extended-blue-1000. Pressed-state brand action.

emphasis-blue-deepest

#00145C

Deepest blue — --color-extended-blue-1400. The "soft emphasis foreground" color (--color-action-soft-emphasis- foreground).

ink

#121215

Primary dark canvas — --dark-mode-surface-0 and --color-extended-gray-1200. The deepest Foundation surface.

ink-elevated

#191A1F

Dark elevated surface — --dark-mode-surface-100 and --color-extended-gray-1100. The body background on the consumer site (observed as the live body backgroundColor).

ink-surface

#202227

Mid dark surface — --dark-mode-surface-200 and --color-extended-gray-1000.

ink-card

#272930

Elevated card on dark — --dark-mode-surface-300 and --color-extended-gray-900.

paper

#FFFFFF

Primary light canvas — --light-mode-surface-0 and --color-surface-0.

paper-elevated

#F7F7F8

Light elevated surface — --light-mode-surface-100 and --color-extended-gray-100.

paper-divider

#EEEFF1

Quiet divider — --color-extended-gray-200.

paper-line

#E6E7EA

UI line — --color-extended-gray-300.

content-emphasis

#202227

Primary text on light — --light-mode-content-emphasis and --color-extended-gray-1000.

content-default

#494D5A

Secondary text on light — --color-content-default and --color-extended-gray-700.

content-muted

#6A6F81

Tertiary text — --color-content-muted and --color- extended-gray-600.

content-soft

#BCBEC8

Quiet text on dark / quaternary text — --color-extended- gray-500 and --dark-mode-content-muted.

content-soft-light

#D5D7DD

Pale text on dark — --dark-mode-content-default and --color-extended-gray-400.

system-success

#39C582

Success green — --color-system-success and --color- extended-green-500.

system-warning

#F2BA2A

Warning amber — --color-system-warning and --color- extended-yellow-400.

system-alert

#DF281F

Alert / error red — --color-system-alert and --color- extended-red-800.

system-alert-dark

#F04433

Alert text on dark — --dark-mode-action-alert-foreground.

accent-magenta

#C00AE8

Magenta accent — --color-extended-magenta-800. Used for sub-brand and creator-tag accents.

accent-purple

#9348F0

Purple accent — --color-extended-purple-800.

accent-turquoise

#127D98

Turquoise accent — --color-extended-turquoise-800.

accent-orange

#C05014

Orange accent — --color-extended-orange-800.

accent-pink

#CD377B

Pink accent — --color-extended-pink-800.

Mode role mappings

Light mode (15 roles)

accent → emphasis-blue-link

accent-hover → emphasis-blue-deep

background → paper

border → paper-line

error → system-alert

primary → emphasis-blue

primary-hover → emphasis-blue-deep

success → system-success

surface → paper-elevated

surface-elevated → paper

text-primary → content-emphasis

text-secondary → content-default

text-tertiary → content-muted

warning → system-warning

warning-hover → accent-orange

Dark mode (15 roles)

accent → emphasis-blue-bright

accent-hover → emphasis-blue-pale

background → ink-elevated

border → ink-card

error → system-alert-dark

primary → emphasis-blue

primary-hover → emphasis-blue-bright

success → system-success

surface → ink-surface

surface-elevated → ink-card

text-primary → paper-elevated

text-secondary → content-soft-light

text-tertiary → content-soft

warning → system-warning

warning-hover → accent-orange

Provenance

Source: https://www.roblox.com/
Attribution: Roblox Corporation — palette values captured from the deployed "Foundation" design-system tokens on roblox.com (--color-system-emphasis, --color-extended-blue-*, --color-surface-*, --color-content-*, --light-mode-*, and --dark-mode-* CSS custom-property families). Roblox, the Roblox logo, the Robux icon, and associated marks are trademarks of Roblox Corporation.
Imported: 2026-05-19
Notes: Derived from live site CSS at https://www.roblox.com/ on 2026-05-19; Roblox's published press-kit page (https://about.roblox.com/press-kit/) provides logo downloads but no hex color specifications. The captured tokens come from the "Foundation" design-system theme declared on the consumer site (--config-theme-name: "Foundation"). The display typeface is Builder Sans (proprietary, declared via --config-text-font as "Builder Sans" with Helvetica Neue / Helvetica / Arial fallbacks) and is not publicly distributed. This atom references inter@1 as the open-source rendering substitute.