Skip to content
ColorDB.org
Menu
Color Detail

Yellow

Yellow draws attention quickly and can feel optimistic, but it needs careful contrast handling in interfaces and text.

Warm Colors

#FACC15

warmoptimistichighlightattention

Color values

Hex
#FACC15
RGB
rgb(250, 204, 21)
HSL
hsl(48, 96%, 53%)

Overview

Yellow is a warm color with the hex value #FACC15. It is attention-grabbing, bright, and often optimistic, but it is also one of the easiest colors to misuse in readable interfaces.

Yellow usually works best as a highlight, decorative accent, warning support color, or background ingredient rather than as body text.

Symbolism and context

Yellow can suggest optimism, brightness, playfulness, caution, or visibility depending on the context.

Its symbolic strength is often high, but its practical readability range is narrower than many other accents.

Common design uses

  • • highlights and decorative accents
  • • warning support colors
  • • badges or labels with dark text
  • • feature blocks and promotional moments
  • • supporting warm gradients and palette accents

Pairing guidance

Yellow usually pairs best with dark neutrals such as charcoal, brown, or near-black.

Use pale yellows as background tints and stronger yellows as highlight accents, not as default body text.

If yellow is part of a warm palette, let more grounded reds, oranges, or neutrals carry the structural weight.

Accessibility notes

White text on yellow often fails. Dark text usually works much better.

Yellow can feel different by hue but still offer weak readability if the luminance gap is too small.

Check this color in the contrast checker

Related colors

Red#FF3B30Magenta#D946EFOrange#F97316Pink#EC4899

Related tools

Convert this colorTranslate the same color into HEX, RGB, HSL, or HSV.Check contrastTest text, buttons, and surfaces before using the color in UI.Generate shades and tintsBuild lighter and darker variants for surfaces, hover states, and text.Build a paletteSee how this color behaves once it becomes part of a broader system.

Explore this family

Family pages help compare colors that share a broader visual role, making it easier to move from one isolated swatch to a more usable palette direction.

Browse Warm Colors

Keep learning

FAQ

Questions people usually ask next

What is the hex value of Yellow?

The hex value is #FACC15.

What family does Yellow belong to?

Yellow belongs to the warm-colors family in ColorDB.

Is Yellow good for text?

It depends on the background. Test the exact contrast pair before using it for text or small UI labels.

What colors pair well with Yellow?

Good pairings depend on the intended mood. Neutrals are usually a safe starting point, and related colors from the same family can create a smoother palette.

Can I use Yellow in CSS?

Yes. You can use its HEX, RGB, or HSL value in CSS.