Software & SaaS
Cloudflare Color Codes
Cloudflare's colors are orange #F48120 and a lighter #FAAD3F on the cloud, with dark gray #404041 on the wordmark. The Cloudflare color codes in Hex, RGB and CMYK can be found below. Matthew Prince, Lee Holloway and Michelle Zatlyn founded it on 26 July 2009. The company nearly called itself WebWall, and picked Cloudflare because it described a firewall in the cloud.
Primary colors
What are Cloudflare Primary Colors?
Cloudflare's primary color is orange #F48120, with #FAAD3F lighting the top of the cloud.
Cloudflare publishes no public CMYK or Pantone sheet, so both are shown below as conversions and nearest matches.
Cloudflare Orange
| Hex | #F48120 |
|---|---|
| RGB | 244, 129, 32 |
| HSL | hsl(27, 91%, 54%) |
| CMYK | 0%, 47%, 87%, 4%converted · approximate |
| Pantone | PMS 158 Cnearest match · not published by the brand |
Cloudflare Light Orange
| Hex | #FAAD3F |
|---|---|
| RGB | 250, 173, 63 |
| HSL | hsl(35, 95%, 61%) |
| CMYK | 0%, 31%, 75%, 2%converted · approximate |
| Pantone | PMS 136 Cnearest match · not published by the brand |
Cloudflare Dark Gray
| Hex | #404041 |
|---|---|
| RGB | 64, 64, 65 |
| HSL | hsl(240, 1%, 25%) |
| CMYK | 2%, 2%, 0%, 75%converted · approximate |
| Pantone | PMS 447 Cnearest match · not published by the brand |
Cloudflare Hex Color Codes
Cloudflare hex color codes are #F48120 for orange, #FAAD3F for light orange and #404041 for dark gray.
| Color | Hex |
|---|---|
| Orange | #F48120 |
| Light Orange | #FAAD3F |
| Dark Gray | #404041 |
Cloudflare RGB Color Codes
Cloudflare RGB color codes are 244, 129, 32 for orange, 250, 173, 63 for light orange and 64, 64, 65 for dark gray. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Orange | rgb(244, 129, 32) |
| Light Orange | rgb(250, 173, 63) |
| Dark Gray | rgb(64, 64, 65) |
Cloudflare HSL Color Codes
Cloudflare HSL color codes are 27, 91%, 54% for orange, 35, 95%, 61% for light orange and 240, 1%, 25% for dark gray. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Orange | hsl(27, 91%, 54%) |
| Light Orange | hsl(35, 95%, 61%) |
| Dark Gray | hsl(240, 1%, 25%) |
Cloudflare CMYK Color Code
Cloudflare CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Orange | 0%, 47%, 87%, 4% |
| Light Orange | 0%, 31%, 75%, 2% |
| Dark Gray | 2%, 2%, 0%, 75% |
Cloudflare Pantone Color Codes
Cloudflare Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Orange | PMS 158 C |
| Light Orange | PMS 136 C |
| Dark Gray | PMS 447 C |
Logo
Cloudflare Logo Colors
Cloudflare logo colors are two oranges on the cloud and one dark gray on the letters.
Cloudflare Logo Colors Palette
What the Cloudflare Logo Colors Mean?
The Cloudflare logo colors describe a flare, not a cloud. The mark is a cloud shape with streaks running off one side, and the second, lighter orange sits on those streaks so the whole thing reads as something moving fast rather than sitting still. Two tones do the job a gradient would, at a fraction of the file size, which matters for a company whose own product is about page weight. If you are matching it, #F6821F also circulates widely and Cloudflare has never published a definitive value.
Cloudflare Logo JPG
Cloudflare logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
Cloudflare Logo PNG
Cloudflare logo in PNG, with a transparent background. Use it over a colored surface.
Cloudflare Logo WebP
Cloudflare logo in WebP. Same transparency as the PNG at about a third of the file size.
Cloudflare Color Code Shades
Cloudflare color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not Cloudflare paint or trim names.
In code
Using the Cloudflare palette
CSS custom properties
:root {
--cloudflare-orange: #F48120;
--cloudflare-light-orange: #FAAD3F;
--cloudflare-dark-gray: #404041;
}Contrast against white
| Orange | 2.62:1AA × |
|---|---|
| Light Orange | 1.89:1AA × |
| Dark Gray | 10.36:1AA ✓ |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.