Ring color palette
ConsumerRing's color identity centers on a vibrant blue paired with clean neutrals, reflecting its focus on security and approachability. The palette is designed for clarity and accessibility across digital and physical touchpoints.
ring.comRing colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Ring BluePrimary28, 154, 214
- Ring Deep BlueSecondary0, 120, 190
- Ring AmberAccent246, 166, 35
Surfaces
Page, cards and dividers.- Ring WhiteBackground255, 255, 255
- Ring Light GraySurface245, 247, 250
- Ring Border GrayBorder225, 228, 232
Text
Three tiers of copy.- Ring CharcoalText34, 34, 34
- Ring Medium GraySecondary text107, 107, 107
- Ring Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Ring Success GreenSuccess75, 181, 67
- Ring AmberWarning246, 166, 35
- Ring Alert RedError208, 2, 27
- Ring BlueInfo28, 154, 214
Use Ring's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ring-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1C9AD6;
--error: #D0021B;
--accent: #F6A623;
--border: #E1E4E8;
--primary: #1C9AD6;
--success: #4BB543;
--surface: #F5F7FA;
--warning: #F6A623;
--secondary: #0078BE;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6B6B6B;
}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.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0: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.4:1
Fail
Ring background, border and text colors
The quiet part of the Ring palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Ring WhiteBackground
- HEX
- RGB
- HSL
- Ring Light GraySurface
- HEX
- RGB
- HSL
- Ring Border GrayBorder
- HEX
- RGB
- HSL
- Ring CharcoalText
- HEX
- RGB
- HSL
- Ring Medium GraySecondary text
- HEX
- RGB
- HSL
- Ring Muted GrayMuted text
- HEX
- RGB
- HSL
About Ring's colors
Ring's palette uses a signature blue for trust and security, complemented by clear neutrals and a warm accent. The color system is designed for high contrast and legibility across devices.
Primary blue is paired with deep blue for hierarchy.
Amber accent highlights actions and alerts.
Neutral grays provide structure and clarity.
Psychology
Blue is associated with safety, reliability, and calm—key values for a security brand. The amber accent adds warmth and draws attention to important elements.
Evolution
Ring's color palette has remained stable since its early branding, with minor refinements to gray tones for modern UI clarity. The primary blue has been consistent across digital and physical products.
Where Ring uses each color
- Primary
Used for main navigation, primary CTAs, and key highlights on the website and app.
- Secondary
Appears in secondary buttons, links, and hover states.
- Accent
Applied to notifications, badges, and important icons.
- Backgrounds
White and light gray backgrounds are used throughout app screens and packaging.
- Text
Charcoal and gray tones are used for headings, body text, and muted labels.
- Semantic
Success, warning, and error colors are used for status indicators and alerts.
Ring color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Ring primary color is #1C9AD6, known as Ring Blue. This color is used for main branding elements and primary actions.
Ring Blue (#1C9AD6) is RGB(28, 154, 214). For print, its approximate CMYK is 87, 28, 0, 16.
Ring uses several neutral tones: Ring Light Gray (#F5F7FA), Ring Border Gray (#E1E4E8), and Ring Charcoal (#222222) for text. These provide clarity and structure in the UI.
Use Ring Blue (#1C9AD6) for primary actions and navigation, with Ring Deep Blue (#0078BE) for secondary emphasis. Neutral grays and white support readability and accessibility.
The secondary color is Ring Deep Blue, #0078BE, and the accent is Ring Amber, #F6A623. 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 Ring's colors consistently when it generates UI.
Make something in the spirit of Ring
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.