Yellow color meaning: symbolism, psychology and how to use it
#FFFF00
oklch(0.968 0.211 109.8)
What yellow symbolizes
Yellow is the brightest of the hues, and almost everything people say about it follows from that. It is the colour of sunshine, daffodils, lemons and butter, so it stands for happiness, optimism, warmth and clarity. It is also the colour of caution tape, warning signs and hazard markings, and in some phrases it carries negative baggage: "yellow" can mean cowardly in English, and a yellow cast on skin or paper suggests sickness or age.
That split personality is real. Yellow can be the friendliest colour on the page or the most anxious, depending on its shade and how much of it is used. A small amount of yellow lifts an interface; a full yellow wall can be unsettling and hard to read. If one idea is worth keeping, it is that yellow is mostly a colour of attention, which is positive when it directs the eye and negative when it overwhelms.
Yellow color psychology: what the research says
The popular claims about yellow, such as that it makes people happy, hungry, anxious or even makes babies cry more, are mostly folklore. There is little robust, replicable research that links yellow in itself to a specific mood. What the evidence does support is perceptual: yellow has the highest lightness of the pure hues, so it is among the first colours to catch the eye, especially against dark or cool backgrounds.
That brightness is the reason yellow is used for school buses, taxis in some cities, high-visibility vests, and caution signs. Yellow with black is a strongly legible combination and is widely read as warning, partly through convention and partly because the pairing offers the greatest possible lightness difference.
Brightness also has a cost. Large areas of saturated yellow can cause glare, and yellow text on a light background is among the hardest to read. If you read claims that yellow rooms cause arguments or boost creativity, treat them as unproven; designers are better off thinking in terms of luminance and legibility.
Cultural meanings of yellow
- Western countries. Happiness (the smiley face), sunshine, caution and warning signs. "Yellow" can also mean cowardly, and yellow press means sensational journalism.
- China. Yellow has a long imperial connection: it was the colour reserved for emperors in many dynasties, and it is associated with the earth and the centre in traditional Chinese colour thinking.
- India. Yellow and turmeric are auspicious. Turmeric paste is applied to brides and grooms before Hindu weddings in the haldi ceremony, and marigolds and saffron-yellow garments are common in festivals.
- Buddhist countries. Yellow and saffron robes are worn by Buddhist monks in several countries, signalling humility and detachment.
Yellow in branding and marketing
Yellow is used by brands that want to feel accessible, optimistic and quick to notice: McDonald's golden arches, IKEA's blue and yellow, DHL, Snapchat and the National Geographic frame. It is common in food, delivery, consumer goods and children's products. Post-it notes made yellow almost synonymous with "remember this".
In logos, yellow is best used where it can sit on a dark or saturated background, or paired with black. A yellow logo on white is hard to see and photocopies badly, which is why many yellow brands put the mark on a coloured field or outline it.
Yellow is less common for brands built on trust, luxury or technical authority. Gold-leaning yellow gets closer to prestige, but a pure lemon yellow rarely does. Pale yellow can feel gentle and clean, which suits baby products and some wellness brands.
Yellow in UI and web design
In UI, yellow most often means warning or highlight: a yellow banner for caution, a highlighter for search results, a star for a favourite. The classic problem is contrast. #ffff00 has a WCAG ratio of about 1.07:1 against white, which is essentially invisible, but about 19.5:1 against black. Never put yellow text on white, and use near-black text on yellow fills.
Because OKLCH lightness is perceptual, yellow shows its odd nature clearly: the sRGB yellow has a lightness around 0.97 and very high chroma, while a blue of the same HSL "lightness" is far darker. When you need a yellow that reads as text or an icon on a light background, you have to darken it into amber, ochre or mustard, and the hue shifts toward orange and olive as you do. Hold the hue between about 85 and 100 and reduce lightness to find a legible shade that still reads as yellow.
For warnings, do not rely on yellow alone. Add an icon, a label and a border. In dark mode, yellow works well as a highlight because it already has high contrast with dark surfaces, but reduce chroma a little so it does not dominate the screen. Remember that very light yellow tints make good subtle backgrounds for notices, with dark text on top.
Yellow hex code and color values
- HEX
- #ffff00
- RGB
- rgb(255 255 0)
- HSL
- hsl(60 100% 50%)
- OKLCH
- oklch(0.968 0.211 109.8)
This is the standard CSS value for yellow. See the full set of conversions, tints, shades and harmonies on its #ffff00 color page.
CSS custom property
:root {
--color-yellow: #ffff00; /* fallback */
}
@supports (color: oklch(0 0 0)) {
:root {
--color-yellow: oklch(0.968 0.211 109.8);
}
}Shades and tones of yellow
Pale yellows like cream, lemon chiffon and butter are soft, clean and friendly, and they behave almost like warm neutrals. Pure, high-chroma yellow is intense and cheerful but tiring in large areas. Golden yellows and amber move toward warmth, richness and sometimes premium or traditional looks, while mustard and ochre go earthy, vintage and muted.
Hue shifts matter as much as lightness. Yellow that leans green (chartreuse, lime-yellow) feels fresh, acidic and sometimes artificial, whereas yellow that leans orange feels warm and autumnal. Darken yellow too far and it does not stay yellow: it turns to olive, khaki or brown, which is why dark yellows sit in other hue families in the colour-name data. This is a uniquely strong feature of yellow, and a good reason to rely on named, tested shades rather than mixing in your head.
Popular named shades, light to dark
- FFFFE0
Winter Duvet
- FFFED8
Lit
- FFFACD
Lemon Chiffon
- FFF8DC
Cornsilk
- FAFAD2
Utepils
- FFFF00
Yellow
- EFF0D3
Giggle
- F3E9BD
Ginseng
- EEE8AA
Yellow Jasmine
- F0E68C
Cornflake
- ECE0C6
Origami
- EEDC82
Flax
- FFD700
Gold
- E4DB55
Manz
- D8CFB6
Berber
- F3C12C
Freesia
- CCC14D
Anime
- BDB76B
Golden Cartridge
- C2B280
Ecru
- AFAF5E
Palm
- AEA132
Martian
- 999911
Papyrus
- 847E54
Xena
- 555500
Douro
The colour library has 3,456 named colours in the yellow family. Browse all yellow colors.
Contrast and accessibility
Yellow (#ffff00) has a WCAG contrast ratio of 1.07:1 against white and 19.55:1 against black. Normal-size text needs 4.5:1 for level AA and 3:1 is enough for large text and UI components.
Test any other combination in the contrast checker.
Yellow color palettes
Colors that go with yellow
The complement of yellow is found in the purple and violet range: in OKLCH yellow is around hue 110, so the opposite side is near hue 290. Yellow with purple is vivid and royal-feeling, and a light yellow on a deep violet is an easy way to get high contrast. Yellow with blue is the familiar IKEA and Ukraine-flag combination, and it works because blue offers a dark, calm base for the bright colour.
Analogous pairings are orange, which gives a warm sunny palette, and green, which feels fresh and spring-like. Yellow with grey or black is clean and modern, and the black pairing is the strongest for signage. Be wary of yellow with white, since neither gives the other any contrast, and of yellow with light green, where both colours are bright and visually merge.
Frequently asked questions
- What does the color yellow symbolize?
- Yellow commonly stands for happiness, optimism, sunshine and attention, and also for caution and, in some phrases, cowardice or sickness. In China it has imperial associations, and in India turmeric and yellow are auspicious.
- What is the hex code for yellow?
- Pure yellow is #ffff00: rgb(255 255 0), hsl(60 100% 50%) and oklch(0.968 0.211 109.8). For legible text on light backgrounds you need a darker amber or mustard instead.
- Is yellow a good color for a logo?
- It can be eye-catching and friendly, and it works well on dark or coloured backgrounds or with black. A yellow mark on white has weak contrast, so plan for an outlined or backed version.
- What colors go with yellow?
- Purple and violet are the complement. Blue and navy, grey and black are reliable partners, and orange or green make analogous palettes.
- Does yellow make you happy?
- Yellow is strongly associated with happiness in many cultures, but there is little solid evidence that the colour itself changes mood. The link is mostly learned from things like sunshine and smiley faces.