Coda color palette
SaaSCoda's color identity centers around a vibrant coral primary with a supporting palette of warm neutrals and soft grays, reflecting its approachable and modern SaaS product. The palette is designed for clarity, accessibility, and a friendly user experience.
coda.ioCoda colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Coda CoralPrimary244, 106, 84
- Coda Light CoralSecondary249, 187, 174
- Coda YellowAccent247, 213, 96
Surfaces
Page, cards and dividers.- Coda WhiteBackground255, 255, 255
- Coda SurfaceSurface247, 246, 243
- Coda Border GrayBorder224, 222, 217
Text
Three tiers of copy.- Coda CharcoalText45, 45, 45
- Coda Medium GraySecondary text107, 107, 107
- Coda Muted GrayMuted text166, 166, 166
Semantic
Feedback and state colors.- Coda GreenSuccess76, 183, 130
- Coda YellowWarning247, 213, 96
- Coda CoralError244, 106, 84
- Coda BlueInfo76, 158, 235
Use Coda's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
coda-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4C9EEB;
--error: #F46A54;
--accent: #F7D560;
--border: #E0DED9;
--primary: #F46A54;
--success: #4CB782;
--surface: #F7F6F3;
--warning: #F7D560;
--secondary: #F9BBAE;
--text-muted: #A6A6A6;
--background: #FFFFFF;
--text-primary: #2D2D2D;
--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
13.8:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7: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
4.9: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
Coda background, border and text colors
The quiet part of the Coda palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Coda WhiteBackground
- HEX
- RGB
- HSL
- Coda SurfaceSurface
- HEX
- RGB
- HSL
- Coda Border GrayBorder
- HEX
- RGB
- HSL
- Coda CharcoalText
- HEX
- RGB
- HSL
- Coda Medium GraySecondary text
- HEX
- RGB
- HSL
- Coda Muted GrayMuted text
- HEX
- RGB
- HSL
About Coda's colors
Coda uses a warm, energetic coral as its signature color, balanced by soft neutrals and clear, accessible UI grays. The supporting palette provides semantic clarity for status and feedback.
Primary coral contrasts with neutral backgrounds for emphasis.
Accent yellow and blue provide visual cues for status and highlights.
Grays are used for structure, hierarchy, and readability.
Psychology
The coral primary conveys approachability, creativity, and warmth, making the product feel friendly and inviting. The neutral grays and soft backgrounds support focus and usability.
Evolution
Coda's palette has remained consistent since launch, with minor adjustments to gray tones for improved accessibility. The brand has maintained its coral signature while refining supporting colors for clarity.
Where Coda uses each color
- Primary
Used for primary buttons, highlights, and key interactive elements across the app.
- Secondary
Appears in secondary buttons, backgrounds for callouts, and hover states.
- Accent
Used for notifications, highlights, and status indicators.
- Backgrounds
Applied to main app backgrounds and document surfaces.
- Text
Text colors are used for headings, body copy, and muted UI labels.
- Semantic
Green, yellow, and blue are used for success, warning, and informational states respectively.
Coda color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Coda primary color is #F46A54, known as Coda Coral.
Coda Coral (#F46A54) in RGB is (244, 106, 84). For print, use approximate CMYK (0, 57, 66, 4).
Coda uses a range of grays such as Coda Charcoal (#2D2D2D), Coda Medium Gray (#6B6B6B), and Coda Muted Gray (#A6A6A6) for text and UI structure.
Use Coda Coral (#F46A54) for primary actions, grays for text and backgrounds, and accent colors for semantic feedback. Always ensure sufficient contrast for accessibility.
The secondary color is Coda Light Coral, #F9BBAE, and the accent is Coda Yellow, #F7D560. 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 Coda's colors consistently when it generates UI.
Make something in the spirit of Coda
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.