A startup palette has to do three jobs at once: look like one company, stay readable, and survive the first pitch deck. Famous logos are a poor shortcut for that. Some of them are documented. A lot of the statistics attached to them are not.
Where a company has published a brand or press page, this guide cites it. Where a number only shows up in roundups, it is left out.
What you can actually learn from famous brands
Facebook's blue is one of the few origin stories with a primary interview behind it. In a 2010 profile, Jose Antonio Vargas reported that Mark Zuckerberg is red-green color-blind, and quoted him: "blue is the richest color for me—I can see all of blue." That is why blue became Facebook's dominant color, as Zuckerberg described it — not because a study proved blue converts. Source: The New Yorker, "The Face of Facebook".
A button color can move clicks, on the page where you tested it. HubSpot's marketing blog says the company ran an A/B test and that changing a call-to-action from green to red increased clicks by 21%, with nothing else on the page changed. Source: HubSpot, "7 Dead-Simple A/B Tests You Should Run on Your Homepage". That result is about one button on one site. It is not a rule that red outperforms green by 21% in general. Roundup posts also repeat fixed conversion rates, brand-recognition percentages, and "snap judgment" percentages that do not trace to a source you can check. Those figures are not planning numbers.
Documented brand colors, not folklore
Slack: aubergine, plus four logo colors
Slack's brand guidelines name aubergine #4A154B as the primary brand color (PMS 261). The logo colors are blue #36C5F0, yellow #ECB22E, green #2EB67D, and red #E01E5A. The same document lists an accessible blue, #1264A3, and says the logo colors generally should not be used for text or large fields of color. Source: Slack Brand Guidelines (PDF), linked from the Slack media kit.
Use the published hex values. Descriptions of the palette from interviews are not the specification.
Google: four colors on white
Google's design team has described the identity as four colors on a clean white background, kept in the logotype. Source: Google Design, "Evolving the Google Identity". Google's brand resource center tells partners not to reuse Google's colors in their own products. Treat the four-color mark as a reference for a multi-hue system on a neutral field, not as a palette to copy.
Stripe: slate and blurple, not "a blue"
Stripe's newsroom says the wordmark ships in three colors: use slate and blurple on light backgrounds, and white on dark backgrounds, and do not recolor the wordmark. Source: Stripe Newsroom. Calling that system "blue minimalism" does not match the press page. Stripe does not publish a hex code on that page, so this guide does not invent one.
Spotify: green as the resting color
Spotify's developer branding guidelines call Spotify Green the resting brand color, and say the green logo should be used on black or white. Other backgrounds get a monochrome logo. Source: Spotify for Developers, Design. The page does not publish a hex value.
What not to treat as a brand system
Apple's public marketing site is mostly product photography on a light field. Apple does not publish a third-party palette of named neutrals the way Slack publishes hex codes, so this guide does not assign Apple a brand hex.
Netflix, Twitch, and TikTok are recognizable in part because of color, and the logos are public. Without a brand or press page that states the values, this guide does not assign them hex codes or conversion effects. Same for claims that a fintech "uses coral" or "uses teal" unless that company documents it. If you need colors from a screenshot or a photo, extract them with the palette-from-image tool and then verify them. A sampled logo is not a brand guideline.
Four starter palettes, with contrast against white and black
These are working palettes for a new product, not reproductions of the brands above. Every ratio uses the WCAG relative-luminance formula — the same math as the contrast checker. Thresholds, from WCAG 2.2: 4.5:1 for AA body text, 3:1 for AA large text, 7:1 for AAA body text. "Large text" is at least 18pt, or 14pt bold.
Ratios are rounded to two decimals. A pair at 4.38:1 fails AA for normal text even though it passes the large-text bar.
Trust — navy, blue, cool surface, gold accent
Use this when the product has to feel steady: B2B software, security, infrastructure.
| Role | HEX | Versus white | Versus black | How to use it |
| --- | --- | --- | --- | --- |
| Ink | #0B1F33 | 16.69:1 (AAA) | 1.26:1 (fails) | Body text on white or on the surface |
| Primary | #1B4F8A | 8.29:1 (AAA) | 2.53:1 (fails) | Text or a fill on white. White text on this blue is also 8.29:1 |
| Surface | #F4F7FB | 1.07:1 (fails) | 19.54:1 (AAA) | Background only |
| Accent | #F4B942 | 1.77:1 (fails) | 11.86:1 (AAA) | Not text on white. Black text on this gold passes AAA |
Growth — forest ink and a mid green
| Role | HEX | Versus white | Versus black | How to use it |
| --- | --- | --- | --- | --- |
| Ink | #123524 | 13.46:1 (AAA) | 1.56:1 (fails) | Text on the pale surface |
| Primary | #1F8A4C | 4.38:1 (fails AA body, passes large text) | 4.80:1 (AA, not AAA) | White text on this green fails AA. Black text on it passes AA |
| Surface | #F2F7F4 | 1.08:1 (fails) | 19.39:1 (AAA) | Background only |
| Tint | #C8E6D4 | 1.34:1 (fails) | 15.73:1 (AAA) | Background or a large chip, not text |
The green is the trap. It looks like a confident primary and it misses 4.5:1 against white. Put small text in #123524, or darken the green in the color scale generator until the badge clears AA.
Signal — warm ink and a burnt orange
| Role | HEX | Versus white | Versus black | How to use it |
| --- | --- | --- | --- | --- |
| Ink | #1C1410 | 18.15:1 (AAA) | 1.16:1 (fails) | Body text |
| Primary | #C2410C | 5.18:1 (AA, not AAA) | 4.06:1 (large text only) | White text on this orange passes AA and fails AAA. Black text on it fails AA for normal text |
| Surface | #FFF7ED | 1.06:1 (fails) | 19.78:1 (AAA) | Background only |
| Deep | #7C2D12 | 9.37:1 (AAA) | 2.24:1 (fails) | Links and small text on the surface |
Three accents on white
For a product that wants more than one hue, in the spirit of a multi-color mark on a white field. None of these is a Google color. They are a blue, an amber, and a green that each clear AA on white.
| Role | HEX | Versus white | Versus black | How to use it |
| --- | --- | --- | --- | --- |
| Ink | #111827 | 17.74:1 (AAA) | 1.18:1 (fails) | Body text |
| Blue | #1D4ED8 | 6.70:1 (AA, not AAA) | 3.13:1 (large text only) | Links or a button with white text (white on this blue is also 6.70:1) |
| Amber | #B45309 | 5.02:1 (AA, not AAA) | 4.18:1 (large text only) | Large headings or an icon, not a pale button label |
| Green | #047857 | 5.48:1 (AA, not AAA) | 3.83:1 (large text only) | Same constraint as the blue: fine for white text at AA, not for black text at body size |
Build variations of any seed in the palette generator, then recheck pairs you did not measure here. Harmony rules move hue. They do not move these ratios.
How to choose without copying a logo
Start from the job, not from a competitor's homepage. Hue, saturation, and value are covered in Color Theory 101. When a value has to move between screen and print, keep a RGB to HEX step in the same sheet as the CMYK percentages.
- Trust and long text: a dark ink on a near-white surface, plus one blue that still passes when it is used as text. Palette "Trust" is that shape.
- A category that is already full of blue: a green or an orange can separate you, if the text color is the dark ink and the bright hue is the fill. Palette "Growth" shows why the bright hue itself is often the wrong text color.
- More than one hue: keep a neutral ink for reading and let the extra hues be accents. Google's published note is the structural lesson — several colors, lots of white — not a license to reuse their mark.
Then make the system bigger than four swatches. Run the primary through the 50–950 scale so hover, borders, and disabled states are mixes of the same seed instead of new hex codes. If the brand also prints, convert the critical swatches and read the print-gamut notes before the PDF goes out. Screen values and ink values are specified separately: RGB, CMYK, HEX to CMYK, HEX to RGB.
The 60-30-10 split (dominant field, secondary, accent) is a layout habit, not a measured law. It is still a useful way to stop an accent from taking over the page.
Check the palette before you ship it
- Write down the exact HEX values. Do not sample a compressed screenshot if you have the source file.
- Paste each text pair into the contrast checker. Include the button label on the button fill, not only the ink on white.
- If a marketing number tempted you — a blog saying red converts better — test it on your own page. HubSpot's 21% result is the argument for testing, not for skipping the test.
- If you only have a photo of a reference, pull colors with palette from image, then replace the samples with values you are willing to publish.
Colors shift between displays. The contrast ratio does not: it is computed from the sRGB code values, not from a light meter on your laptop. A bad monitor can make a passing pair look worse. It does not change the ratio the checker reports.
FAQ
Should a startup copy Slack, Stripe, or Google colors?
No. Slack publishes a specific palette and tells partners how those colors may be used. Stripe limits its wordmark to slate, blurple, and white. Google tells partners not to reuse Google colors. Use those systems as examples of how a brand documents color, then build your own in the palette generator and check contrast.
Do red buttons convert better than green buttons?
HubSpot reported that one A/B test, changing a button from green to red, increased clicks by 21% on that page. That is not a general rule. Other fixed percentages for red buttons do not have a primary source and should not be used for planning.
Which palette color should be the text color?
Usually the darkest ink, not the bright brand hue. In the Growth palette, `#1F8A4C` is 4.38:1 on white, which fails WCAG AA for normal text. The ink `#123524` is 13.46:1 on white, which passes AAA.
How do I check a whole palette, not one pair?
Check every combination you will actually ship: text on the page background, text on the brand fill, and text on tinted surfaces. The contrast checker takes a pair at a time. A single passing pair does not cover buttons and alerts.
Where do the contrast ratios in this article come from?
They are WCAG contrast ratios of each HEX against `#FFFFFF` and `#000000`, rounded to two decimal places, using the same relative-luminance math as the contrast checker. The thresholds are 4.5:1 for AA body text and 3:1 for AA large text, from WCAG 2.2 Success Criterion 1.4.3.