PlanetScale color palette
SaaSPlanetScale's color identity is built around a stark, modern black paired with crisp white and a signature electric blue accent, reflecting its focus on cutting-edge database technology. The palette emphasizes clarity, contrast, and a professional, technical aesthetic.
planetscale.comPlanetScale colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- PlanetScale BlackPrimary0, 0, 0
- PlanetScale WhiteSecondary255, 255, 255
- PlanetScale BlueAccent42, 109, 245
Surfaces
Page, cards and dividers.- Deep SpaceBackground10, 10, 10
- Slate SurfaceSurface24, 24, 27
- Border GrayBorder35, 35, 41
Text
Three tiers of copy.- Primary Text WhiteText255, 255, 255
- Secondary Text GraySecondary text177, 177, 179
- Muted Text GrayMuted text110, 110, 115
Semantic
Feedback and state colors.- Success GreenSuccess60, 227, 125
- Warning YellowWarning245, 192, 66
- Error RedError245, 60, 60
- Info BlueInfo42, 109, 245
Use PlanetScale's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
planetscale-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2A6DF5;
--error: #F53C3C;
--accent: #2A6DF5;
--border: #232329;
--primary: #000000;
--success: #3CE37D;
--surface: #18181B;
--warning: #F5C042;
--secondary: #FFFFFF;
--text-muted: #6E6E73;
--background: #0A0A0A;
--text-primary: #FFFFFF;
--text-secondary: #B1B1B3;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
17.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.9:1
Pass
Muted text on surface
Needs 3:1 for large text
3.5:1
Pass
PlanetScale gray, dark and neutral colors
PlanetScale 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.
- Deep SpaceBackground
- HEX
- RGB
- HSL
- Slate SurfaceSurface
- HEX
- RGB
- HSL
- Border GrayBorder
- HEX
- RGB
- HSL
- Primary Text WhiteText
- HEX
- RGB
- HSL
- Secondary Text GraySecondary text
- HEX
- RGB
- HSL
- Muted Text GrayMuted text
- HEX
- RGB
- HSL
About PlanetScale's colors
PlanetScale uses a high-contrast palette anchored by black and white, with blue as a vivid accent for interactive elements. The color system is designed for clarity, accessibility, and a technical feel.
Primary black contrasts with white for maximum legibility.
Electric blue is used for highlights and calls to action.
Neutral grays provide depth and structure to the UI.
Psychology
Black conveys sophistication and authority, while blue suggests trust and innovation. The overall effect is modern, technical, and reliable.
Evolution
PlanetScale's palette has remained stable, consistently using black, white, and blue since its inception. Minor adjustments have been made to gray tones for improved accessibility.
Where PlanetScale uses each color
- Primary
Used for the logo, navigation bar backgrounds, and key UI elements.
- Secondary
Applied to page backgrounds and areas requiring contrast with the primary black.
- Accent
Used for buttons, links, highlights, and interactive states.
- Backgrounds
Deep Space and Slate Surface are used for app screens and panels.
- Text
Primary Text White is used for main content, with Secondary and Muted Grays for supporting text.
- Semantic
Success Green, Warning Yellow, and Error Red are used for status indicators and alerts.
PlanetScale color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official PlanetScale primary color hex code is #000000. This black is used across the brand's core assets and UI.
The RGB value for #000000 is (0, 0, 0). In CMYK, it is (0, 0, 0, 100).
PlanetScale uses several neutral tones, including Deep Space (#0A0A0A), Slate Surface (#18181B), and Border Gray (#232329). These provide structure and depth in the UI.
Use PlanetScale Black (#000000) for backgrounds and key elements, PlanetScale Blue (#2A6DF5) for accents and actions, and the neutral grays for surfaces and borders. Always maintain high contrast for accessibility.
The secondary color is PlanetScale White, #FFFFFF, and the accent is PlanetScale Blue, #2A6DF5. 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 PlanetScale's colors consistently when it generates UI.
Make something in the spirit of PlanetScale
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.