Framer color palette
TechFramer's color identity is defined by a vibrant blue primary, complemented by a minimal grayscale system and subtle accent hues. The palette emphasizes clarity, modernity, and a digital-first approach.
framer.comFramer colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Framer BluePrimary0, 85, 255
- Framer CharcoalSecondary17, 18, 20
- Framer CyanAccent0, 229, 255
Surfaces
Page, cards and dividers.- Framer WhiteBackground255, 255, 255
- Framer SurfaceSurface247, 248, 250
- Framer Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Framer CharcoalText17, 18, 20
- Framer GraySecondary text107, 111, 118
- Framer Muted GrayMuted text161, 166, 173
Semantic
Feedback and state colors.- Framer GreenSuccess0, 210, 106
- Framer YellowWarning255, 214, 0
- Framer RedError255, 59, 48
- Framer BlueInfo0, 85, 255
Use Framer's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
framer-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0055FF;
--error: #FF3B30;
--accent: #00E5FF;
--border: #E5E7EB;
--primary: #0055FF;
--success: #00D26A;
--surface: #F7F8FA;
--warning: #FFD600;
--secondary: #111214;
--text-muted: #A1A6AD;
--background: #FFFFFF;
--text-primary: #111214;
--text-secondary: #6B6F76;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7:1
Pass
Text on surface
Needs 4.5:1 for body text
17.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Framer background, border and text colors
The quiet part of the Framer palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Framer WhiteBackground
- HEX
- RGB
- HSL
- Framer SurfaceSurface
- HEX
- RGB
- HSL
- Framer Border GrayBorder
- HEX
- RGB
- HSL
- Framer CharcoalText
- HEX
- RGB
- HSL
- Framer GraySecondary text
- HEX
- RGB
- HSL
- Framer Muted GrayMuted text
- HEX
- RGB
- HSL
About Framer's colors
Framer's palette is built around a bold blue primary, supported by neutral grays and high-contrast accents. The system is designed for clarity and accessibility in digital interfaces.
Primary blue is contrasted with deep charcoal for emphasis.
Bright cyan accent draws attention to interactive elements.
Neutral grays provide structure and hierarchy.
Psychology
The blue primary conveys trust, innovation, and approachability, while the minimal neutrals create a sense of focus and professionalism. Accent cyan adds energy and highlights key actions.
Evolution
Framer's palette has remained consistent, with the blue primary as its core identity since its rebrand. Minor adjustments have been made to neutral tones for improved accessibility and modern UI trends.
Where Framer uses each color
- Primary
Used for primary buttons, links, and key highlights in the UI.
- Secondary
Applied to navigation bars, headers, and dark backgrounds.
- Accent
Highlights interactive states, notifications, and call-to-action elements.
- Backgrounds
White and light surface tones are used for main app backgrounds and sections.
- Text
Charcoal and gray tones are used for primary, secondary, and muted text throughout the interface.
- Semantic
Green, yellow, and red are used for success, warning, and error states respectively.
Framer color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Framer primary color is #0055FF, known as Framer Blue. It is used for key branding and interface elements.
Framer Blue (#0055FF) is RGB(0, 85, 255) and CMYK(100, 67, 0, 0). Use these values for print and digital consistency.
Framer uses #111214 (Framer Charcoal), #6B6F76 (Framer Gray), and #A1A6AD (Framer Muted Gray) for backgrounds and text. These provide contrast and hierarchy in the UI.
Use #0055FF for primary actions, neutrals for backgrounds and text, and accent or semantic colors for highlights and states. Always maintain sufficient contrast for accessibility.
The secondary color is Framer Charcoal, #111214, and the accent is Framer Cyan, #00E5FF. 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 Framer's colors consistently when it generates UI.
Make something in the spirit of Framer
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.