What Colors Go with Yellow? Tips for Color Combinations That Make the Most of Its Brightness [#FFFF00]

Yellow can attract attention even in a small area, which makes it useful for accents and emphasis. This article uses pure yellow ■#FFFF00, the value of the CSS color keyword yellow, as the base color. The goal is to keep its brightness without making the whole palette feel overly loud. A practical way to do that is to give deep text colors and quiet background colors separate roles instead of adding several equally strong colors.

Pair yellow with deep colors to make its brightness easier to use

In HSL (Hue, Saturation, Lightness), a color model that describes color by hue, saturation, and lightness, yellow ■#FFFF00 is 60 degrees hue, 100% saturation, and 50% lightness. Even though the HSL lightness value is 50%, this yellow can appear very bright on screen. Next to white or other pale colors, boundaries and text can become difficult to distinguish.

For that reason, navy, charcoal, and deep brown are useful supporting colors for body text, headings, important numbers, and borders. Reserve yellow for surfaces and decoration such as button backgrounds, badges, and rules. On the white-to-cream example backgrounds in this article, yellow text has a contrast ratio of only about 1.01–1.07:1. That is below the WCAG 2.2 minimum of 4.5:1 for normal text and 3:1 for large text, so headings and important numbers should use a deep text color instead of yellow. This keeps the brightness of yellow while giving the page a clearer visual hierarchy.

Three color combinations that work well with yellow

1. Navy and white for a crisp look

Use white ■#FFFFFF for the background, navy ■#1F367A for body text and headings, and yellow ■#FFFF00 for primary emphasis. Navy against white has a contrast ratio of about 11.25:1, while navy against yellow is about 10.47:1. If yellow is used as a button background, navy text keeps the result bright while remaining easy to read. Because blue and yellow create a strong difference, limiting yellow to a smaller area helps keep the focal point clear.

2. Charcoal and warm off-white for a calmer palette

Use warm off-white ■#FFFBE6 as the background, charcoal ■#222222 for text and headings, and yellow ■#FFFF00 as the accent. Charcoal against the background is about 15.30:1, and charcoal against yellow is about 14.82:1. Keeping the palette focused on bright yellows and neutrals lets yellow retain its lively character while the overall interface stays restrained.

3. Deep brown and cream for a warmer result

Use cream ■#FFF8E1 for the background, deep brown ■#6B4F1D for body text and headings, and yellow ■#FFFF00 for emphasis. Cream and brown have a contrast ratio of about 7.16:1, while yellow and brown are about 7.08:1. The related warm hues create continuity, while the brown gives the layout enough definition to keep the palette from looking washed out.

Avoid white text and control the area occupied by yellow

Yellow ■#FFFF00 against white ■#FFFFFF has a contrast ratio of about 1.07:1. This does not meet the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal text or 3:1 for large text, so white text on this yellow is not suitable for body text or button labels. Yellow against black ■#000000 is about 19.56:1, so a sufficiently dark text color is much easier to use when yellow is the background.

Large areas of pure yellow can also become visually dominant. Instead of covering the entire page, use it for a defined role such as a primary action button background, badge, rule, or other decorative accent. Keep heading and important-number text in a deep color rather than yellow. If you need a larger yellow surface, move a tint or a less saturated yellow into the background and keep pure yellow for smaller accents. Where a yellow element touches a white background and its boundary needs to stay visible, add a darker outline or enough spacing rather than relying on the color difference alone.

HueRoll can show tints, shades, complementary and analogous colors, several harmony suggestions, and 60–30–10 palette candidates from a selected base color. When working with yellow, decide the roles of “background,” “text,” and “emphasis” before adding more colors, then adjust the area occupied by yellow. HueRoll compares the selected color only with white and black in its contrast section, so the contrast ratios between other color pairs in this article were calculated separately.