Cloudflare color palette
TechCloudflare's color identity centers on a vibrant orange paired with dark neutrals and cool grays, reflecting its focus on security and reliability. The palette is functional, modern, and instantly recognizable in the tech space.
cloudflare.comCloudflare colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Cloudflare OrangePrimary243, 128, 32
- Cloudflare CharcoalSecondary35, 39, 47
- Cloudflare CyanAccent0, 193, 213
Surfaces
Page, cards and dividers.- Cloudflare WhiteBackground255, 255, 255
- Cloudflare Light GraySurface247, 248, 250
- Cloudflare Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Cloudflare CharcoalText35, 39, 47
- Cloudflare Medium GraySecondary text91, 91, 102
- Cloudflare Muted GrayMuted text140, 140, 150
Semantic
Feedback and state colors.- Cloudflare Success GreenSuccess46, 182, 125
- Cloudflare Warning AmberWarning245, 166, 35
- Cloudflare Error RedError224, 62, 47
- Cloudflare CyanInfo0, 193, 213
Use Cloudflare's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cloudflare-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00C1D5;
--error: #E03E2F;
--accent: #00C1D5;
--border: #E5E7EB;
--primary: #F38020;
--success: #2EB67D;
--surface: #F7F8FA;
--warning: #F5A623;
--secondary: #23272F;
--text-muted: #8C8C96;
--background: #FFFFFF;
--text-primary: #23272F;
--text-secondary: #5B5B66;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Cloudflare background, border and text colors
The quiet part of the Cloudflare palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Cloudflare WhiteBackground
- HEX
- RGB
- HSL
- Cloudflare Light GraySurface
- HEX
- RGB
- HSL
- Cloudflare Border GrayBorder
- HEX
- RGB
- HSL
- Cloudflare CharcoalText
- HEX
- RGB
- HSL
- Cloudflare Medium GraySecondary text
- HEX
- RGB
- HSL
- Cloudflare Muted GrayMuted text
- HEX
- RGB
- HSL
About Cloudflare's colors
Cloudflare's palette uses a bold orange for brand recognition, balanced by deep neutrals and cool accent tones for clarity and accessibility. The color system is designed for high contrast and digital legibility.
Primary orange contrasts with dark charcoal for strong visual hierarchy.
Accent cyan provides a cool counterpoint to the warm orange.
Grays and neutrals unify UI elements and support readability.
Psychology
The orange conveys energy, innovation, and approachability, while the dark neutrals evoke security and professionalism. The accent cyan adds a sense of modernity and technical expertise.
Evolution
Cloudflare's palette has remained stable, with the orange and charcoal core established early in its brand history. Minor adjustments have been made to grays and accent tones for improved accessibility and digital clarity.
Where Cloudflare uses each color
- Primary
Used in the logo, primary buttons, and key highlights across the website.
- Secondary
Forms the main navigation background, footers, and dark UI panels.
- Accent
Applied to links, icons, and interactive elements for emphasis.
- Backgrounds
White and light gray backgrounds are used for content areas and cards.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, and error colors are used for status indicators, alerts, and notifications.
Cloudflare color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Cloudflare primary color is #F38020, known as Cloudflare Orange. Use this exact hex for all primary branding applications.
Cloudflare Orange (#F38020) has an RGB value of 243, 128, 32 and a CMYK value of 0, 47, 87, 5. Always use the hex code #F38020 for digital applications.
Cloudflare uses #23272F (Charcoal), #5B5B66 (Medium Gray), #8C8C96 (Muted Gray), #F7F8FA (Light Gray), and #E5E7EB (Border Gray) for backgrounds, text, and UI elements. These neutrals ensure clarity and accessibility in digital interfaces.
Use Cloudflare Orange (#F38020) for primary actions and highlights, with Charcoal (#23272F) for navigation and text. Accent and semantic colors should be used sparingly to maintain brand consistency and visual hierarchy.
The secondary color is Cloudflare Charcoal, #23272F, and the accent is Cloudflare Cyan, #00C1D5. 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 Cloudflare's colors consistently when it generates UI.
Make something in the spirit of Cloudflare
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.