Neon color palette
SaaSNeon is a modern serverless Postgres platform with a distinctive electric blue and dark UI palette. Its color identity emphasizes clarity, modernity, and technical precision.
neon.techNeon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Neon Electric GreenPrimary0, 229, 153
- Neon Sky BlueSecondary0, 179, 255
- Neon Pink AccentAccent255, 92, 135
Surfaces
Page, cards and dividers.- Neon MidnightBackground10, 10, 35
- Neon Surface DarkSurface24, 24, 47
- Neon Border GrayBorder35, 35, 74
Text
Three tiers of copy.- Neon WhiteText255, 255, 255
- Neon Light GraySecondary text179, 179, 198
- Neon Muted GrayMuted text107, 107, 140
Semantic
Feedback and state colors.- Neon Success GreenSuccess0, 229, 153
- Neon Warning YellowWarning255, 214, 0
- Neon Error PinkError255, 92, 135
- Neon Info BlueInfo0, 179, 255
Use Neon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
neon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B3FF;
--error: #FF5C87;
--accent: #FF5C87;
--border: #23234A;
--primary: #00E599;
--success: #00E599;
--surface: #18182F;
--warning: #FFD600;
--secondary: #00B3FF;
--text-muted: #6B6B8C;
--background: #0A0A23;
--text-primary: #FFFFFF;
--text-secondary: #B3B3C6;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.4:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.8:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Neon background, border and text colors
Neon 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.
- Neon MidnightBackground
- HEX
- RGB
- HSL
- Neon Surface DarkSurface
- HEX
- RGB
- HSL
- Neon Border GrayBorder
- HEX
- RGB
- HSL
- Neon WhiteText
- HEX
- RGB
- HSL
- Neon Light GraySecondary text
- HEX
- RGB
- HSL
- Neon Muted GrayMuted text
- HEX
- RGB
- HSL
About Neon's colors
Neon's palette is built around a vibrant electric green and blue, contrasted with deep dark backgrounds for a modern, high-tech feel. Accents of pink and yellow provide clarity and highlight key actions.
Primary green and blue are complementary and used for brand and UI highlights.
Dark backgrounds enhance color vibrancy and legibility.
Accent pink is reserved for critical actions or alerts.
Psychology
The electric green and blue evoke innovation, trust, and technical expertise. Dark backgrounds create a sense of focus and sophistication.
Evolution
Neon's palette has remained consistent since launch, with minor adjustments to accent colors for improved accessibility. The core green and blue have always been central to the brand's identity.
Where Neon uses each color
- Primary
Used for main CTAs, highlights, and the Neon logo.
- Secondary
Appears in navigation elements, secondary buttons, and links.
- Accent
Used for error states, notifications, and occasional highlights.
- Backgrounds
Dark tones are used for app screens, hero sections, and site backgrounds.
- Text
White and light gray are used for primary and secondary text across the UI.
- Semantic
Success, warning, and error colors are used for status badges, alerts, and messages.
Neon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Neon brand color is #00E599, known as Neon Electric Green.
Neon Electric Green (#00E599) in RGB is (0, 229, 153); in CMYK it is (100, 0, 33, 10).
Neon's UI uses #0A0A23 (Neon Midnight) for backgrounds, #18182F (Neon Surface Dark) for surfaces, and #23234A (Neon Border Gray) for borders.
Use #00E599 for primary actions and branding, #00B3FF for secondary highlights, and dark tones for backgrounds and surfaces. Reserve accent pink (#FF5C87) for critical states or notifications.
The secondary color is Neon Sky Blue, #00B3FF, and the accent is Neon Pink Accent, #FF5C87. 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 Neon's colors consistently when it generates UI.
Make something in the spirit of Neon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.