Brave color palette
TechBrave's color identity centers on a vivid orange primary, complemented by deep neutrals and accent hues for clarity and contrast. The palette is designed for high visibility and strong brand recognition across digital and print touchpoints.
brave.comBrave colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Brave OrangePrimary251, 84, 43
- Brave GoldSecondary247, 164, 29
- Brave CharcoalAccent58, 58, 58
Surfaces
Page, cards and dividers.- Brave WhiteBackground255, 255, 255
- Brave Light GraySurface245, 246, 250
- Brave Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Brave BlackText34, 34, 34
- Brave Medium GraySecondary text90, 90, 90
- Brave Muted GrayMuted text138, 138, 138
Semantic
Feedback and state colors.- Brave GreenSuccess29, 185, 84
- Brave GoldWarning247, 164, 29
- Brave RedError229, 57, 53
- Brave BlueInfo66, 133, 244
Use Brave's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
brave-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4285F4;
--error: #E53935;
--accent: #3A3A3A;
--border: #E5E5E5;
--primary: #FB542B;
--success: #1DB954;
--surface: #F5F6FA;
--warning: #F7A41D;
--secondary: #F7A41D;
--text-muted: #8A8A8A;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #5A5A5A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
Brave background, border and text colors
The quiet part of the Brave palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Brave WhiteBackground
- HEX
- RGB
- HSL
- Brave Light GraySurface
- HEX
- RGB
- HSL
- Brave Border GrayBorder
- HEX
- RGB
- HSL
- Brave BlackText
- HEX
- RGB
- HSL
- Brave Medium GraySecondary text
- HEX
- RGB
- HSL
- Brave Muted GrayMuted text
- HEX
- RGB
- HSL
About Brave's colors
Brave's palette is anchored by a bold orange, symbolizing energy and innovation, balanced by deep neutrals for readability. The use of accent colors provides visual hierarchy and accessibility.
Primary orange contrasts with deep charcoal for emphasis.
Gold and blue accents highlight actions and information.
Neutral grays maintain clarity and focus in UI elements.
Psychology
Orange evokes enthusiasm, confidence, and approachability, aligning with Brave's mission of empowerment. The strong neutrals reinforce trust and professionalism.
Evolution
Brave's palette has remained consistent since its launch, with minor adjustments to gray tones for improved accessibility. The primary orange has always been central to the brand's identity.
Where Brave uses each color
- Primary
Used in the logo, primary buttons, and key highlights throughout the website and browser UI.
- Secondary
Appears in secondary buttons, icons, and call-to-action highlights.
- Accent
Utilized for navigation bars, footers, and dark mode backgrounds.
- Backgrounds
White and light gray backgrounds are standard for content areas and app screens.
- Text
Black and medium gray are used for primary and secondary text, ensuring legibility.
- Semantic
Green, gold, red, and blue are reserved for status indicators, alerts, and notifications.
Brave color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Brave primary color is #FB542B, known as Brave Orange. This color is used in the logo and key brand elements.
Brave Orange (#FB542B) has an RGB value of 251, 84, 43. In CMYK, it is approximately 0, 67, 83, 2.
Brave uses several grays: Brave Charcoal (#3A3A3A), Brave Border Gray (#E5E5E5), and Brave Muted Gray (#8A8A8A). These neutrals are used for backgrounds, borders, and muted text.
Use Brave Orange (#FB542B) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for status, alerts, and interactive elements.
The secondary color is Brave Gold, #F7A41D, and the accent is Brave Charcoal, #3A3A3A. 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 Brave's colors consistently when it generates UI.
Make something in the spirit of Brave
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.