Yellow gradient: lemon to amber CSS and PNG backgrounds
This yellow gradient runs from pale lemon (#FFF59D) through golden yellow (#FFD600) to amber (#FFAB00) at 135°. Copy the CSS or download a PNG. Black text passes AAA across all of it, at 11.07:1 or better; white text fails everywhere.
background-color: #fff59d;
background-image: linear-gradient(135deg, #fff59d 0%, #ffd600 50%, #ffab00 100%);Variations
Reversed
#FFAB00 → #FFD600 → #FFF59DSofter
#FFF9BF → #FFE459 → #FFC859Deeper
#A69F66 → #A68B00 → #A66F00Radial glow
#FFF59D → #FFD600 → #FFAB00
On this page
Yellow is the brightest color most screens can show, and that makes it the hardest to put text on. A gradient from lemon to amber adds warmth and movement, and it has one great advantage over most colors: dark text on it is easy to read. This page covers the stops, the numbers, and what to do about the one thing yellow cannot do, which is carry white.
The three stops
The gradient is linear-gradient(135deg, #fff59d 0%, #ffd600 50%, #ffab00 100%), running from the top-left corner to the bottom-right. The first stop is a pale lemon, nearest CSS khaki and palegoldenrod. The middle stop, #FFD600, is almost identical to CSS gold (#FFD700), the green channel differs by a single step, far too small to see. The last stop, #FFAB00, is very close to CSS orange (#FFA500). That makes the page a quick way to see the line between yellow and orange: the amber end is already orange by CSS standards.
Blending just the lemon and the amber would give #FFD04F at the center, close to the middle stop, so the extra stop mainly pins down a saturated golden yellow instead of leaving it to chance.
Text on a yellow gradient
Black text measures 18.79:1 on the lemon, 14.87:1 on the golden yellow, and 11.07:1 on the amber, so it passes the strict AAA level (7:1) everywhere. White text is the opposite, with 1.11:1, 1.41:1 and 1.89:1, which fails even the large-text minimum of 3:1. Dark gray, navy or dark brown work almost as well as black. Avoid yellow text on a white page for the same reason: the numbers above are the mirror image.
The Deeper variation shades each stop 35% toward black and gives #A69F66, #A68B00 and #A66F00. These read as olive and mustard, not as cheerful yellow, so use that variation only when you need the darker mood.
Worked example
You are building a title slide for a monthly workplace-safety briefing, where yellow signals caution. Download the gradient at Desktop 1920 × 1080 and set it as the slide background. Put the title in black bold at 54px and the speaker's name and date in black regular at 24px. Both pass easily, even at the amber lower corner with 11.07:1. Keep icons and any diagrams in black or dark navy as well. If you project onto a bright wall, the Softer variation gives #FFF9BF, #FFE459 and #FFC859, which is gentler on the eyes and still holds black text with ease.
Related pages
Browse the orange gradient for the next step warmer, the gold page for the exact CSS gold, and the lemon chiffon page for a pale yellow to use beside it.