Render color palette
SaaSRender uses a minimalist, dark-forward color system centered around black and deep gray tones, accented by blue for highlights and calls to action. The palette is designed for clarity and modernity in cloud infrastructure interfaces.
render.comRender colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Render BlackPrimary0, 0, 0
- Render CharcoalSecondary35, 39, 47
- Render BlueAccent58, 143, 255
Surfaces
Page, cards and dividers.- Render Deep GrayBackground16, 18, 22
- Render Surface GraySurface24, 27, 32
- Render Border GrayBorder44, 49, 58
Text
Three tiers of copy.- Render WhiteText255, 255, 255
- Render Light GraySecondary text179, 184, 194
- Render Muted GrayMuted text122, 127, 135
Semantic
Feedback and state colors.- Render GreenSuccess27, 196, 125
- Render YellowWarning255, 209, 102
- Render RedError242, 95, 92
- Render BlueInfo58, 143, 255
Use Render's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
render-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A8FFF;
--error: #F25F5C;
--accent: #3A8FFF;
--border: #2C313A;
--primary: #000000;
--success: #1BC47D;
--surface: #181B20;
--warning: #FFD166;
--secondary: #23272F;
--text-muted: #7A7F87;
--background: #101216;
--text-primary: #FFFFFF;
--text-secondary: #B3B8C2;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7: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.7:1
Pass
Muted text on background
Needs 3:1 for large text
4.7:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Render background, border and text colors
Render 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.
- Render Deep GrayBackground
- HEX
- RGB
- HSL
- Render Surface GraySurface
- HEX
- RGB
- HSL
- Render Border GrayBorder
- HEX
- RGB
- HSL
- Render WhiteText
- HEX
- RGB
- HSL
- Render Light GraySecondary text
- HEX
- RGB
- HSL
- Render Muted GrayMuted text
- HEX
- RGB
- HSL
About Render's colors
Render's palette is built around high-contrast dark neutrals with a single blue accent for clarity and focus. The restrained color usage supports a professional, developer-centric interface.
Primary black and deep grays dominate backgrounds and surfaces.
Accent blue is reserved for interactive elements and highlights.
Semantic colors (green, yellow, red) are used for status and feedback.
Psychology
The use of black and dark grays conveys sophistication, stability, and technical reliability. Blue accenting adds a sense of trust and modernity without overwhelming the interface.
Evolution
Render's color system has remained consistent since launch, with minor adjustments to gray tones for improved accessibility. The blue accent has been refined for better contrast and visibility.
Where Render uses each color
- Primary
Used for the main navigation bar, headers, and key backgrounds across the app.
- Secondary
Applied to sidebars, cards, and secondary UI surfaces.
- Accent
Highlights buttons, links, and active states throughout the dashboard.
- Backgrounds
Deep gray backgrounds provide a neutral, low-glare canvas for content.
- Text
White and light gray text are used for primary and secondary content, ensuring legibility on dark backgrounds.
- Semantic
Green, yellow, and red are used for success, warning, and error states in notifications and status indicators.
Render color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Render primary color is #000000, known as Render Black. It is used extensively across the brand's UI.
Render Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100).
Render uses #23272F (Render Charcoal), #101216 (Render Deep Gray), and #181B20 (Render Surface Gray) as its main neutrals. These create a layered, modern dark interface.
Primary and background colors should dominate UI surfaces, with blue accent (#3A8FFF) reserved for interactive elements. Semantic colors are only for status, alerts, and feedback.
The secondary color is Render Charcoal, #23272F, and the accent is Render Blue, #3A8FFF. 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 Render's colors consistently when it generates UI.
Make something in the spirit of Render
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.