Perplexity color palette
TechPerplexity's color identity is defined by a vibrant cyan primary paired with deep dark neutrals and subtle accent hues, reflecting a modern, tech-forward aesthetic. The palette emphasizes clarity, simplicity, and approachability across its digital products.
perplexity.aiPerplexity colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Perplexity CyanPrimary31, 184, 205
- Perplexity BlackSecondary10, 10, 10
- Perplexity YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Perplexity Dark BackgroundBackground24, 26, 27
- Perplexity SurfaceSurface35, 37, 38
- Perplexity BorderBorder40, 43, 44
Text
Three tiers of copy.- Perplexity WhiteText255, 255, 255
- Perplexity Gray TextSecondary text174, 179, 183
- Perplexity Muted GrayMuted text107, 112, 117
Semantic
Feedback and state colors.- Perplexity GreenSuccess63, 224, 135
- Perplexity YellowWarning255, 214, 0
- Perplexity RedError255, 90, 95
- Perplexity CyanInfo31, 184, 205
Use Perplexity's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
perplexity-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1FB8CD;
--error: #FF5A5F;
--accent: #FFD600;
--border: #282B2C;
--primary: #1FB8CD;
--success: #3FE087;
--surface: #232526;
--warning: #FFD600;
--secondary: #0A0A0A;
--text-muted: #6B7075;
--background: #181A1B;
--text-primary: #FFFFFF;
--text-secondary: #AEB3B7;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.5:1
Pass
Text on surface
Needs 4.5:1 for body text
15.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Perplexity gray, dark and neutral colors
Perplexity 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.
- Perplexity Dark BackgroundBackground
- HEX
- RGB
- HSL
- Perplexity SurfaceSurface
- HEX
- RGB
- HSL
- Perplexity BorderBorder
- HEX
- RGB
- HSL
- Perplexity WhiteText
- HEX
- RGB
- HSL
- Perplexity Gray TextSecondary text
- HEX
- RGB
- HSL
- Perplexity Muted GrayMuted text
- HEX
- RGB
- HSL
About Perplexity's colors
Perplexity's palette centers on a signature cyan, contrasted with deep neutrals and high-visibility accent colors. The system is designed for clarity, accessibility, and a sense of technological sophistication.
Primary cyan contrasts with dark backgrounds for legibility.
Accent yellow draws attention to key actions or highlights.
Neutral grays and blacks provide a modern, minimal foundation.
Psychology
The cyan primary evokes innovation, clarity, and trust, while the dark neutrals suggest professionalism and focus. Accent yellow adds energy and draws the eye to important elements.
Evolution
Perplexity's palette has remained consistent since launch, maintaining its signature cyan and dark UI foundation. Minor adjustments to accent and neutral tones have improved accessibility and visual balance.
Where Perplexity uses each color
- Primary
Used for logos, primary buttons, and key interactive elements.
- Secondary
Forms the base of the navigation bar and main UI backgrounds.
- Accent
Highlights notifications, badges, and important callouts.
- Backgrounds
Applied to app screens and content areas for a dark, modern look.
- Text
White and gray tones are used for primary, secondary, and muted text throughout the UI.
- Semantic
Green, yellow, and red are used for success, warning, and error states in notifications and status indicators.
Perplexity color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Perplexity primary color is #1FB8CD. This cyan is used for branding and key UI elements.
Perplexity Cyan (#1FB8CD) has an RGB value of (31, 184, 205). For CMYK, it is approximately (85, 10, 25, 0).
Perplexity uses #0A0A0A (Perplexity Black), #181A1B (Dark Background), and #232526 (Surface) for its dark and neutral UI elements. These provide a modern, accessible foundation for the interface.
Use #1FB8CD (Perplexity Cyan) for primary actions and branding, with dark neutrals for backgrounds and surfaces. Accent and semantic colors highlight important information and status.
The secondary color is Perplexity Black, #0A0A0A, and the accent is Perplexity Yellow, #FFD600. 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 Perplexity's colors consistently when it generates UI.
Make something in the spirit of Perplexity
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.