Miro color palette
SaaSMiro's color system features a bold, deep blue primary paired with vibrant yellow and supporting neutrals, creating a distinctive, energetic identity for its collaborative SaaS platform.
miro.comMiro colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Miro Deep BluePrimary5, 0, 56
- Miro YellowSecondary255, 208, 47
- Miro OrangeAccent255, 60, 0
Surfaces
Page, cards and dividers.- Miro WhiteBackground255, 255, 255
- Miro Light GraySurface245, 246, 250
- Miro Border GrayBorder213, 215, 226
Text
Three tiers of copy.- Miro Deep BlueText5, 0, 56
- Miro SlateSecondary text95, 92, 128
- Miro Muted GrayMuted text161, 161, 181
Semantic
Feedback and state colors.- Miro GreenSuccess0, 184, 107
- Miro YellowWarning255, 208, 47
- Miro OrangeError255, 60, 0
- Miro BlueInfo26, 159, 255
Use Miro's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
miro-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1A9FFF;
--error: #FF3C00;
--accent: #FF3C00;
--border: #D5D7E2;
--primary: #050038;
--success: #00B86B;
--surface: #F5F6FA;
--warning: #FFD02F;
--secondary: #FFD02F;
--text-muted: #A1A1B5;
--background: #FFFFFF;
--text-primary: #050038;
--text-secondary: #5F5C80;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.7:1
Pass
Text on surface
Needs 4.5:1 for body text
18.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Miro background, border and text colors
The quiet part of the Miro palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Miro WhiteBackground
- HEX
- RGB
- HSL
- Miro Light GraySurface
- HEX
- RGB
- HSL
- Miro Border GrayBorder
- HEX
- RGB
- HSL
- Miro Deep BlueText
- HEX
- RGB
- HSL
- Miro SlateSecondary text
- HEX
- RGB
- HSL
- Miro Muted GrayMuted text
- HEX
- RGB
- HSL
About Miro's colors
Miro's palette uses a strong, dark blue as its anchor, contrasted by a vivid yellow and energetic accent tones. The color system is designed for clarity, accessibility, and brand recognition across digital interfaces.
Primary blue contrasts with yellow for high visibility.
Accent orange provides visual emphasis for calls to action.
Neutral grays support readability and UI structure.
Psychology
The deep blue conveys trust and professionalism, while the yellow and orange inject energy and creativity. This combination supports Miro's positioning as a dynamic, collaborative platform.
Evolution
Miro's palette has remained consistent since its rebrand from RealtimeBoard, maintaining its signature blue and yellow. Minor adjustments have been made to neutrals and accent colors for improved accessibility.
Where Miro uses each color
- Primary
Used in the logo, navigation bar, and primary buttons.
- Secondary
Appears in highlights, active states, and key UI elements.
- Accent
Used for notifications, CTAs, and interactive elements.
- Backgrounds
White and light gray backgrounds are used for app screens and content areas.
- Text
Deep blue and slate are used for primary and secondary text throughout the platform.
- Semantic
Green, yellow, and orange are used for success, warning, and error states respectively.
Miro color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Miro primary color hex code is #050038. This deep blue is used throughout the brand's core assets.
The RGB value for #050038 is (5, 0, 56). For print, the approximate CMYK is (91, 100, 0, 78).
Miro uses #F5F6FA (Miro Light Gray), #D5D7E2 (Miro Border Gray), and #A1A1B5 (Miro Muted Gray) for backgrounds, borders, and muted text. These support readability and structure in the UI.
Use #050038 for primary actions and navigation, with #FFD02F and #FF3C00 for highlights and accents. Neutrals and semantic colors should support clarity and accessibility in the interface.
The secondary color is Miro Yellow, #FFD02F, and the accent is Miro Orange, #FF3C00. Together with the primary they make up the three brand colors at the top of this page.
4 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 Miro's colors consistently when it generates UI.
Make something in the spirit of Miro
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.