Color
- Variants
- Primary Colors
- Secondary Colors
- Functional Digital Colors
- Text Color
- Charts and Graphs
- Business Specific Colors
- Market Performance Colors
When color is used correctly, it communicates trust, clarity and sophistication. Beacon’s color guidelines reflect the colors of the Schwab master brand, with the ability to theme as required by business unit. Using one color palette consistently across all websites achieves the elevated and inspired user experience we strive for.
Schwab Color Palette
Beacon’s color palette reflects the overall brand, which was designed to work well together across a variety of design scenarios. The palette revolves around Schwab Core Blue and includes usage of secondary colors, business-specific colors, text color, element colors, and functional colors.
Primary Color
Schwab Core Blue is our primary and most dominant color, as it embodies our classic and sophisticated, modern style. Core Blue should play a prominent role in all website design to ensure a cohesive, consistent brand experience. Ensure that you are using the appropriate version of the color for accessibility.
| Color | Name | RGB | HEX |
|---|---|---|---|
| Core Blue | 00.160.223 |
#00A0DF |
|
| Digital Core Blue | 03.125.174 |
#037DAE (accessible) |
Secondary Colors
Beacon includes a set of secondary neutral colors that works well together with our primary Core Blue: black, white, light gray, dark gray and steel blue. This color set is used primarily for banners and certain design elements.
| Color | Name | RGB | HEX |
|---|---|---|---|
| Dark Gray | 66.85.9944.58.69 (video only) |
#425563 |
|
| Light Gray | 152.164.174 |
#98A4AE |
|
| Light Gray White Copy | 101.120.132 |
#657884 (w/white copy) |
|
| Steel Blue | 107.164.184 |
#6BA4B8 |
|
| Steel Blue White Copy | 63.113.134 |
#3F7186 (w/white copy) |
|
| Black | 00.00.00 |
#000000 |
|
| White | 255.255.255 |
#FFFFFF |
Functional Digital Colors
Beacon includes a set of secondary neutral colors that works well together with our primary Core Blue: black, white, light gray, dark gray and steel blue. This color set is used primarily for banners and certain design elements.
| Color | Name | Use | RGB | HEX |
|---|---|---|---|---|
| Black | Market Data, Login | 0.0.0 |
#000000 |
|
| Text Gray | Text on Retail Site | 51.51.51 |
#333333 |
|
| Account Orange | Open Account & CTA Buttons | 195.94.4 |
#B95E04 |
|
| Link Blue | Links, Functional Icon | 2.109.151 |
#026D97 |
|
| Link Blue (on Black) | Links on Dark Backgrounds Only | 64.184.231 |
#40B8E7 |
|
| Background Gray | Background | 247.247.247 |
#F7F7F7 |
|
| Actionable Gray | Actionable Modules | 229.235.241 |
#E5EBF1 |
|
| Line Gray | Rules | 229.235.241 |
#E7E7E7 |
Text Color
It’s important to consider how text color contrasts with background color. Text is typically white, gray or black depending on the background color and usage. Follow the Typography accessibility guidelines.
Link text is always Link Blue but varies depending on the background color. One is for use on a dark background and one for use on a light background. Follow Beacon’s link, color, and typography best practices. This ensures good legibility and that link text meets Schwab’s accessibility standards.
| Color | Name | RGB | HEX |
|---|---|---|---|
| Text Data/Login | 00.00.00 |
#000000 |
|
| Text Retail | 51.51.51 |
#333333 |
|
| Link Blue | 02.109.151 |
#026D97 |
|
| Link Blue (on Black) | 64.184.231 |
#40B8E7 |
Charts and Graphs
Follow brand color guidance for charts, graphs, tables and infographics to ensure consistency across sites. Schwab has a color sequence for use in charts graphs, tables and infographics.
This color order has taken into account contrast for color blindness and grayscale applications. Use Schwab Blue as the main color and follow the color/tint sequence described on Charts and Graphs.
Best practices include:
- Use color sparingly to emphasize data.
- The first, largest, or highlighted segment should always be Core Blue.
- Show information clearly to reduce ambiguity.
- Ensure chart design meets accessibility requirements.
| Color | Name | RGB | HEX |
|---|---|---|---|
| True Blue | 68.108.169 |
#446CA9 |
|
| Capri Blue | 78.193.224 |
#4EC1E0 |
|
| Orange | 247.168.00 |
#F7A800 |
|
| Cayenne | 200.108.97 |
#C86C61 |
|
| Pale Blue | 187.221.230 |
#BBDDE6 |
|
| Capri Blue w/White Copy | 27.124.151 |
#1B7C97 |
|
| Orange w/White Copy | 185.94.04 |
#B95E04 |
|
| Cayenne w/White Copy | 191.85.73 |
#BF5549 |
|
| Purple w/White Copy | 153.68.115 |
#994473 |
|
| Olive | 157.174.136 |
#9DAE88 |
|
| Leaf Green | 122.156.73 |
#7A9C49 |
|
| Olive w/White Copy | 95.112.76 |
#5F704C |
|
| Leaf Green w/White Copy | 89.114.53 |
#597235 |
Business Specific Colors
In addition to Core Blue, Schwab uses distinct colors to differentiate our business units and products: Schwab Bank, Trading Services, Advisor Services, and Schwab Intelligent Portfolios®.
| Color | Name | RGB | HEX |
|---|---|---|---|
| Bank Dark Gray | 100.100.100 |
#646464 |
|
| Bank Light Gray | 217.217.217 |
#D9D9D9 |
|
| Advisor Services Slate Blue | 00.95.131 |
#005F83 |
|
| Schwab Trading Services Yellow | 237.224.75 |
#EDE04B |
|
| Schwab Intelligent Portfolios® Blue-Gray | 67.94.122 |
#435E7A |
|
| CSIM Foundational Blue | 02.55.90 |
#02375A |
|
| CSIM Clarity Green | 18.125.109 |
#127D6D |
Market Performance Colors
Green and red are used to show gains and losses specifically tied to investment market performance and aren’t allowed in other use cases.
| Color | Name | RGB | HEX |
|---|---|---|---|
| Confirmation Green | 00.121.00 |
#007900 |
|
| Error Red | 231.13.24 |
#E70D18 |
Contrast and Accessibility
When designing today, it’s imperative we design with accessibility in mind. This means designing for all skill sets and abilities to not exclude any group from successfully interacting with our websites and our content. This goes beyond just having a great user experience, but requires us to meet specific accessibility standards.
It’s important to consider how text color contrasts with background color. A text color that is too similar to the background color is hard to read as is text with too much contrast.
All text and background color combinations must be WCAG 2.0 AA compliant, as specified in the Schwab Accessibility guidelines. Sketch includes tools that allow designers to check if their content meets standards for color and contrast. You can also check contrast with the WebAIM contrast checker.