Oura color palette
SportsOura's color identity is defined by a refined, minimalist palette centered around deep blue and neutral tones, reflecting its focus on wellness and technology. The brand uses subtle gradients and understated hues to convey sophistication and calm.
ouraring.comOura colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Oura Midnight BluePrimary45, 49, 66
- Oura Silver GraySecondary191, 192, 192
- Oura IndigoAccent95, 108, 175
Surfaces
Page, cards and dividers.- Oura WhiteBackground255, 255, 255
- Oura Light SurfaceSurface245, 246, 250
- Oura Light BorderBorder229, 230, 235
Text
Three tiers of copy.- Oura Midnight BlueText45, 49, 66
- Oura SlateSecondary text107, 108, 126
- Oura Silver GrayMuted text191, 192, 192
Semantic
Feedback and state colors.- Oura Wellness GreenSuccess76, 183, 130
- Oura Caution YellowWarning247, 181, 0
- Oura Alert RedError224, 79, 95
- Oura IndigoInfo95, 108, 175
Use Oura's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
oura-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5F6CAF;
--error: #E04F5F;
--accent: #5F6CAF;
--border: #E5E6EB;
--primary: #2D3142;
--success: #4CB782;
--surface: #F5F6FA;
--warning: #F7B500;
--secondary: #BFC0C0;
--text-muted: #BFC0C0;
--background: #FFFFFF;
--text-primary: #2D3142;
--text-secondary: #6B6C7E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.9:1
Pass
Text on surface
Needs 4.5:1 for body text
11.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Oura background, border and text colors
The quiet part of the Oura palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Oura WhiteBackground
- HEX
- RGB
- HSL
- Oura Light SurfaceSurface
- HEX
- RGB
- HSL
- Oura Light BorderBorder
- HEX
- RGB
- HSL
- Oura Midnight BlueText
- HEX
- RGB
- HSL
- Oura SlateSecondary text
- HEX
- RGB
- HSL
- Oura Silver GrayMuted text
- HEX
- RGB
- HSL
About Oura's colors
Oura's palette is built around deep blue and soft neutrals, evoking calm, trust, and clarity. The use of accent indigo and wellness green provides subtle highlights for key UI elements.
Primary blue contrasts with white for readability.
Accent indigo is used for interactive elements.
Neutral grays support backgrounds and surfaces.
Psychology
The deep blue primary color conveys reliability, intelligence, and tranquility, aligning with Oura's wellness mission. Soft neutrals and green accents reinforce a sense of calm and health.
Evolution
Oura's palette has remained consistent, focusing on minimalism and clarity since its inception. Over time, accent colors have been refined for improved accessibility and digital clarity.
Where Oura uses each color
- Primary
Used for navigation bars, primary buttons, and key brand elements.
- Secondary
Applied to secondary buttons, icons, and subtle UI details.
- Accent
Highlights interactive elements such as links and active states.
- Backgrounds
Main app and web backgrounds use Oura White and Light Surface.
- Text
Primary and secondary text colors are used for headings and body copy throughout the app and website.
- Semantic
Green, yellow, and red are used for wellness scores, alerts, and notifications.
Oura color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Oura primary brand color is #2D3142, known as Oura Midnight Blue.
Oura Midnight Blue (#2D3142) in RGB is 45, 49, 66; in CMYK it is approximately 32, 26, 0, 74.
Oura uses #BFC0C0 (Oura Silver Gray) and #E5E6EB (Oura Light Border) as its main neutral and gray tones for UI backgrounds and borders.
Use Oura Midnight Blue (#2D3142) for primary actions and navigation, with neutrals and accents for supporting UI elements. Semantic colors like green (#4CB782) and red (#E04F5F) are reserved for wellness scores and alerts.
The secondary color is Oura Silver Gray, #BFC0C0, and the accent is Oura Indigo, #5F6CAF. 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 Oura's colors consistently when it generates UI.
Make something in the spirit of Oura
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.