Supabase color palette
TechSupabase uses a modern, minimal color system centered on its signature green, complemented by dark neutrals and subtle accents for a developer-focused interface. The palette emphasizes clarity, accessibility, and a strong brand presence.
supabase.comSupabase colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Supabase GreenPrimary63, 207, 142
- Supabase CharcoalSecondary38, 39, 43
- Supabase BlackAccent27, 28, 30
Surfaces
Page, cards and dividers.- Supabase Dark BackgroundBackground24, 24, 27
- Supabase SurfaceSurface32, 32, 36
- Supabase BorderBorder46, 46, 50
Text
Three tiers of copy.- Supabase WhiteText248, 250, 252
- Supabase GraySecondary text148, 163, 184
- Supabase Muted GrayMuted text100, 116, 139
Semantic
Feedback and state colors.- Supabase GreenSuccess63, 207, 142
- Supabase YellowWarning250, 204, 21
- Supabase RedError244, 63, 94
- Supabase BlueInfo56, 189, 248
Use Supabase's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
supabase-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #38BDF8;
--error: #F43F5E;
--accent: #1B1C1E;
--border: #2E2E32;
--primary: #3FCF8E;
--success: #3FCF8E;
--surface: #202024;
--warning: #FACC15;
--secondary: #26272B;
--text-muted: #64748B;
--background: #18181B;
--text-primary: #F8FAFC;
--text-secondary: #94A3B8;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Supabase background, border and text colors
Supabase 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.
- Supabase Dark BackgroundBackground
- HEX
- RGB
- HSL
- Supabase SurfaceSurface
- HEX
- RGB
- HSL
- Supabase BorderBorder
- HEX
- RGB
- HSL
- Supabase WhiteText
- HEX
- RGB
- HSL
- Supabase GraySecondary text
- HEX
- RGB
- HSL
- Supabase Muted GrayMuted text
- HEX
- RGB
- HSL
About Supabase's colors
Supabase's color palette is built around a vibrant green, balanced by deep grays and black for a modern, developer-centric feel. The colors are chosen for high contrast and accessibility in both light and dark UI contexts.
Primary green contrasts with dark backgrounds for clarity.
Neutral grays unify interface elements.
Accent colors highlight status and actions.
Psychology
The green conveys growth, reliability, and innovation, while the dark neutrals evoke professionalism and focus. Accent colors provide clear visual cues for user actions and system states.
Evolution
Supabase's palette has remained consistent since its launch, maintaining its recognizable green and dark UI. Minor adjustments have been made to neutral tones for improved accessibility.
Where Supabase uses each color
- Primary
Used for logos, primary buttons, and key highlights across the website and dashboard.
- Secondary
Appears in navigation bars, side panels, and secondary buttons.
- Accent
Used for backgrounds of modals, overlays, and code blocks.
- Backgrounds
Forms the main background of the app interface and landing pages.
- Text
Primary text is white for contrast on dark backgrounds; secondary and muted grays are used for less prominent information.
- Semantic
Green indicates success, yellow for warnings, red for errors, and blue for informational messages throughout the UI.
Supabase color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Supabase primary color hex code is #3FCF8E. This green is used for branding and primary actions.
Supabase Green (#3FCF8E) has an RGB value of 63, 207, 142 and a CMYK value of 70, 0, 31, 19.
Supabase uses #26272B (Supabase Charcoal), #18181B (Supabase Dark Background), and #202024 (Supabase Surface) as its primary dark and neutral tones. These colors provide depth and contrast in the UI.
Use Supabase Green (#3FCF8E) for primary actions and branding, with dark neutrals for backgrounds and surfaces. Semantic colors like yellow (#FACC15), red (#F43F5E), and blue (#38BDF8) should be reserved for status indicators and alerts.
The secondary color is Supabase Charcoal, #26272B, and the accent is Supabase Black, #1B1C1E. 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 Supabase's colors consistently when it generates UI.
Make something in the spirit of Supabase
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.