Replit color palette
SaaSReplit's color identity centers on a vibrant orange primary, paired with deep dark backgrounds and neutral grays, reflecting its developer-focused, modern SaaS platform. The palette is bold, energetic, and optimized for code-centric interfaces.
replit.comReplit colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Replit OrangePrimary242, 98, 7
- Replit DarkSecondary35, 33, 41
- Replit YellowAccent255, 208, 47
Surfaces
Page, cards and dividers.- Replit BlackBackground26, 26, 26
- Replit SurfaceSurface35, 33, 41
- Replit Border GrayBorder56, 55, 66
Text
Three tiers of copy.- Replit WhiteText255, 255, 255
- Replit GraySecondary text184, 184, 184
- Replit Muted GrayMuted text111, 110, 119
Semantic
Feedback and state colors.- Replit GreenSuccess0, 229, 153
- Replit YellowWarning255, 208, 47
- Replit RedError255, 75, 75
- Replit BlueInfo59, 130, 246
Use Replit's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
replit-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #FF4B4B;
--accent: #FFD02F;
--border: #383742;
--primary: #F26207;
--success: #00E599;
--surface: #232129;
--warning: #FFD02F;
--secondary: #232129;
--text-muted: #6F6E77;
--background: #1A1A1A;
--text-primary: #FFFFFF;
--text-secondary: #B8B8B8;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.0:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
Replit gray, dark and neutral colors
Replit runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Replit BlackBackground
- HEX
- RGB
- HSL
- Replit SurfaceSurface
- HEX
- RGB
- HSL
- Replit Border GrayBorder
- HEX
- RGB
- HSL
- Replit WhiteText
- HEX
- RGB
- HSL
- Replit GraySecondary text
- HEX
- RGB
- HSL
- Replit Muted GrayMuted text
- HEX
- RGB
- HSL
About Replit's colors
Replit's palette is anchored by a vivid orange, contrasted with dark backgrounds and neutral grays for optimal readability and focus. Accent colors provide clear semantic cues and highlight interactive elements.
Primary orange contrasts with deep dark backgrounds.
Accent yellow and blue provide semantic emphasis.
Neutral grays support hierarchy and legibility.
Psychology
The orange evokes creativity, energy, and approachability, appealing to developers and makers. Dark backgrounds reduce eye strain and create a focused coding environment.
Evolution
Replit's color palette has remained consistent, with the orange primary and dark UI established early in its brand evolution. Minor adjustments have been made to accent and semantic colors for accessibility and clarity.
Where Replit uses each color
- Primary
Used for main action buttons, highlights, and key brand elements.
- Secondary
Applied to navigation bars, side panels, and modal backgrounds.
- Accent
Used for notifications, highlights, and semantic cues such as warnings.
- Backgrounds
Dominates app screens and code editor backgrounds.
- Text
White and gray tones are used for primary, secondary, and muted text across the interface.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational states respectively.
Replit color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Replit primary color hex code is #F26207. This orange is used for key brand and UI elements.
Replit Orange (#F26207) is RGB(242, 98, 7). In CMYK, it is approximately (0, 60, 97, 5).
Replit uses #232129 (Replit Dark) and #1A1A1A (Replit Black) for backgrounds, with #B8B8B8 and #6F6E77 for gray text. These provide contrast and readability in the interface.
Use #F26207 for primary actions and highlights, dark backgrounds for the main UI, and semantic colors for status indicators. Always maintain sufficient contrast for accessibility.
The secondary color is Replit Dark, #232129, and the accent is Replit Yellow, #FFD02F. Together with the primary they make up the three brand colors at the top of this page.
6 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 Replit's colors consistently when it generates UI.
Make something in the spirit of Replit
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.