Supabase Color Palette

Select any value to copy it.

• Supabase Green

  Primary

  #3ECF8Ergb(62, 207, 142)hsl(153, 60%, 53%)

  Closest in ArchiveJade Radiant Clear
  Closest in Archive: Jade Radiant Clear

• Background Black

  Neutral

  #1F1F1Frgb(31, 31, 31)hsl(0, 0%, 12%)

  Closest in ArchiveTrue Gray Ink
  Closest in Archive: True Gray Ink

• Surface

  Neutral

  #2A2A2Argb(42, 42, 42)hsl(0, 0%, 16%)

  Closest in ArchiveTrue Gray Ink
  Closest in Archive: True Gray Ink

Can it carry text? (WCAG contrast)

Each color as text on white and on black. AA means body text passes. Select a ratio to open the pair in the contrast checker.

• Supabase GreenAaon white2.00:1Not for textSupabase Green: Open in contrast checkerAaon black10.52:1AASupabase Green: Open in contrast checker
• Background BlackAaon white16.48:1AABackground Black: Open in contrast checkerAaon black1.27:1Not for textBackground Black: Open in contrast checker
• SurfaceAaon white14.35:1AASurface: Open in contrast checkerAaon black1.46:1Not for textSurface: Open in contrast checker

About this palette

Supabase chose a bright green (#3ECF8E) as its brand color. The green carries open-source association and pairs cleanly with deep neutral grays, signaling both technical precision and approachability.

Copy as code

Every token name carries the brand, so two brands can share one stylesheet.

:root {
  --supabase-green: #3ecf8e;
  --supabase-background-black: #1f1f1f;
  --supabase-surface: #2a2a2a;
}

@theme {
  --color-supabase-green: #3ecf8e;
  --color-supabase-background-black: #1f1f1f;
  --color-supabase-surface: #2a2a2a;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        "supabase-green": "#3ecf8e",
        "supabase-background-black": "#1f1f1f",
        "supabase-surface": "#2a2a2a",
      },
    },
  },
};

Source: https://supabase.com/brand-assets · As of 2026-05-02 · This page is an unofficial reference. Color values are factual sRGB hex codes and not subject to copyright; the Supabase name and any associated marks belong to their owner. Request removal via support.

More from Developer Tools