Color
Color usage
These color usage guidelines support consistency across the Lab’s digital products. Adhering to these guidelines allows us to create recognizable, accessible experiences for our users.
Contrast ratios
Mesa follows WCAG 2.0 AA guidelines for color contrast ratios. This requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
If you’re unsure whether your color choices pass WCAG AA standards, you can check your contrast ratio with tools like the WebAim Contrast Checker or Accessible Colors, or reach out to the UI/UX team at uiux-design@lanl.gov.
Core palette
| #000F7E | #172492 | #212E9D | #2B38A9 | #3140B3 | #515CBF | #7079CA | #999ED9 | #C2C4E8 | #E7E8F6 |
| #002F71 | #004098 | #0053A5 | #0070C1 | #3296DC | #69C3FF | #96D5FF | #C3E7FF | #E1F3FF | #F5FBFF |
| #08412A | #126C48 | #1B885C | #26A070 | #29B77D | #2CC486 | #7DDEB7 | #9EE8CA | #BDEFDB | #DDF3EA |
| #171A22 | #373A43 | #555962 | #686C76 | #91959F | #B0B5BF | #D4D8E3 | #E4E8F3< | #EDF2FD | #F4F9FF |
| #292C30 | #44494F | #5F666F | #727984 | #8E959E | #A6ABB2 | #C5C9CD | #DADDE0 | #EAEBEE | #F5F5F7 |
| #0C0D17 | #2D2E37 | #4A4B55 | #5D5E68 | #848590 | #A5A6B1 | #CACBD7 | #DEDFEA | #EBECF7 | #F5F6FF |
Our primary blues, greens, and greys can be used widely across a broad range of applications. These should form the main foundation of any color palette at the Lab.
In general, adhere to the 60/30/10 rule. This means that 60% of your design area should use the dominant color, 30% should use the secondary color, and 10% should use an accent color. Dominant and secondary colors should be relatively neutral, while the accent color should be used to draw attention to the most important elements of the design.
Internal usage and status messaging
| #7A4602 | #A36708 | #B87E0E | #CD9514 | #E2AB1A | #F7C220 | #FAD76C | #FBE192 | #FCEBB7 | #FEF6DD |
| #9E4100 | #C66000 | #DB6900 | #ED7300 | #FF9129 | #FFB36B | #FFD1A6 | #FFE5CD | #FFEFE1 | #FFFAF4 |
| #7A030B | #A1040E | #C70412 | #ED0515 | #FA202F | #FB4653 | #FC6D77 | #FD939A | #FFC6CA | #FEE5F1 |
| #1E00B2 | #4000BB | #5000C1 | #600FC9 | #6A15CF | #8343D7 | #9A67DE | #B794E7 | #D4BFF0 | #EFE5F9 |
These colors can be used in combination with the core palette and include colors for status messaging. When in doubt, use color token names to guide your application of these colors.
| #0070C1 | $support-info | Passive notifications, usually involving additional information without any additional connotations. |
| #1B885C | $support-success | Approval, confirmation, and success. |
| #B87E0E | $support-warning | Regular warning — caution indicated. |
| #DB6900 | $support-caution-major | Serious warning — use extreme caution. |
| #ED0515 | $support-error | Danger, error, or a destructive action. |
| #727984 | $support-unknown | Status unknown. |
| #8343D7 | $support-undefined | Outlier messaging. |
Web applications and data visualization
| #9B4407 | #AE4C08 | #C05408 | #D35D09 | #E6650A | #EA7837 | #ED8F5C | #F2AD8B | #F7CDB8 | #F8E9E5 |
| #005842 | #007560 | #00856F | #00967F | #00A38D | #00B39F | #00C1B1 | #6ED3C8 | #AAE4DD | #DDF4F2 |
| #9D005B | #C40072 | #D8007D | #FF0094 | #FF3BAD | #FF62BD | #FF89CE | #FFB1DE | #FFD8EF | #FFEBF7 |
These colors may be used for reports, illustrations, tags, data visualization, and banners denoting development environments to help developers avoid making critical mistakes. Users should avoid using these colors outside of these specific use cases.
Color spectrum
Black
| #0C0D17 | #2D2E37 | #4A4B55 | #5D5E68 | #848590 | #A5A6B1 | #CACBD7 | #DEDFEA | #EBECF7 | #F5F6FF |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Ultramarine
| #000F7E | #172492 | #212E9D | #2B38A9 | #3140B3 | #515CBF | #7079CA | #999ED9 | #C2C4E8 | #E7E8F6 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Blue
| #002F71 | #004098 | #0053A5 | #0070C1 | #3296DC | #69C3FF | #96D5FF | #C3E7FF | #E1F3FF | #F5FBFF |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Purple
| #1E00B2 | #4000BB | #5000C1 | #600FC9 | #6A15CF | #8343D7 | #9A67DE | #B794E7 | #D4BFF0 | #EFE5F9 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Pink
| #9D005B | #C40072 | #D8007D | #FF0094 | #FF3BAD | #FF62BD | #FF89CE | #FFB1DE | #FFD8EF | #FFEBF7 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Red
| #7A030B | #A1040E | #C70412 | #ED0515 | #FA202F | #FB4653 | #FC6D77 | #FD939A | #FFC6CA | #FEE5F1 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Ochre
| #9B4407 | #AE4C08 | #C05408 | #D35D09 | #E6650A | #EA7837 | #ED8F5C | #F2AD8B | #F7CDB8 | #F8E9E5 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Orange
| #9E4100 | #C66000 | #DB6900 | #ED7300 | #FF9129 | #FFB36B | #FFD1A6 | #FFE5CD | #FFEFE1 | #FFFAF4 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Yellow
| #7A4602 | #A36708 | #B87E0E | #CD9514 | #E2AB1A | #F7C220 | #FAD76C | #FBE192 | #FCEBB7 | #FEF6DD |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Green
| #08412A | #126C48 | #1B885C | #26A070 | #29B77D | #2CC486 | #7DDEB7 | #9EE8CA | #BDEFDB | #DDF3EA |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Turquoise
| #005842 | #007560 | #00856F | #00967F | #00A38D | #00B39F | #00C1B1 | #6ED3C8 | #AAE4DD | #DDF4F2 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Neutral Grey
| #292C30 | #44494F | #5F666F | #727984 | #8E959E | #A6ABB2 | #C5C9CD | #DADDE0 | #EAEBEE | #F5F5F7 |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |
Cool Grey
| #171A22 | #373A43 | #555962 | #686C76 | #91959F | #B0B5BF | #D4D8E3 | #E4E8F3 | #EDF2FD | #F4F9FF |
| 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 |