Rumble color palette
SocialRumble's color identity is defined by a distinctive green primary, complemented by dark and neutral tones for a bold, modern UI. The palette is designed for clarity and high contrast, supporting video and social content.
rumble.comRumble colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Rumble GreenPrimary133, 199, 66
- Rumble CharcoalSecondary34, 39, 43
- Rumble Deep GreenAccent26, 156, 60
Surfaces
Page, cards and dividers.- Rumble Dark BackgroundBackground24, 28, 31
- Rumble Surface GraySurface35, 40, 45
- Rumble Border GrayBorder49, 54, 59
Text
Three tiers of copy.- Rumble WhiteText255, 255, 255
- Rumble Light GraySecondary text176, 184, 191
- Rumble Muted GrayMuted text108, 117, 125
Semantic
Feedback and state colors.- Rumble Success GreenSuccess133, 199, 66
- Rumble Warning YellowWarning255, 193, 7
- Rumble Error RedError229, 57, 53
- Rumble Info BlueInfo33, 150, 243
Use Rumble's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
rumble-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #E53935;
--accent: #1A9C3C;
--border: #31363B;
--primary: #85C742;
--success: #85C742;
--surface: #23282D;
--warning: #FFC107;
--secondary: #22272B;
--text-muted: #6C757D;
--background: #181C1F;
--text-primary: #FFFFFF;
--text-secondary: #B0B8BF;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
Rumble gray, dark and neutral colors
Rumble 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.
- Rumble Dark BackgroundBackground
- HEX
- RGB
- HSL
- Rumble Surface GraySurface
- HEX
- RGB
- HSL
- Rumble Border GrayBorder
- HEX
- RGB
- HSL
- Rumble WhiteText
- HEX
- RGB
- HSL
- Rumble Light GraySecondary text
- HEX
- RGB
- HSL
- Rumble Muted GrayMuted text
- HEX
- RGB
- HSL
About Rumble's colors
Rumble's palette centers on a vibrant green, contrasted with deep grays and white for a clean, high-contrast interface. The use of green evokes energy and growth, while the dark neutrals provide a modern, video-focused backdrop.
Primary green is paired with dark backgrounds for emphasis.
Accent green is used for interactive elements.
Neutral grays balance the vivid green and support readability.
Psychology
The green primary color suggests vitality, action, and approachability, fitting for a social video platform. The dark tones reinforce a sense of focus and professionalism.
Evolution
Rumble's palette has remained stable since its launch, consistently using green as the core brand color. Minor adjustments have been made to dark and neutral tones for improved accessibility and modern UI trends.
Where Rumble uses each color
- Primary
Rumble Green is used for logos, primary buttons, and key highlights.
- Secondary
Rumble Charcoal appears in navigation bars and side panels.
- Accent
Rumble Deep Green is used for active states and hover effects.
- Backgrounds
Rumble Dark Background is the main app and site background.
- Text
Rumble White and Light Gray are used for primary and secondary text respectively.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and status indicators.
Rumble color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Rumble primary color hex code is #85C742. This green is used throughout the brand's interface and logo.
Rumble Green (#85C742) in RGB is (133, 199, 66). For CMYK, it is approximately (33, 0, 67, 22).
Rumble uses #22272B (Rumble Charcoal) and #181C1F (Rumble Dark Background) for its dark UI elements. These provide contrast with the primary green and support readability.
Use Rumble Green (#85C742) for primary actions and branding, with dark backgrounds (#181C1F) and white text (#FFFFFF) for clarity. Accent and semantic colors should be reserved for interactive and status elements.
The secondary color is Rumble Charcoal, #22272B, and the accent is Rumble Deep Green, #1A9C3C. 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 Rumble's colors consistently when it generates UI.
Make something in the spirit of Rumble
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.