CSS Color: Yellow
Named CSS color Yellow — #FFFF00 in HEX, rgb(255, 255, 0) in RGB, hsl(60, 100%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Yellow | color: Yellow; |
| HEX | #FFFF00 | color: #FFFF00; |
| RGB | rgb(255, 255, 0) | color: rgb(255, 255, 0); |
| HSL | hsl(60, 100%, 50%) | color: hsl(60, 100%, 50%); |
About Yellow
Yellow is the brightest of all CSS named colors. At hex `#FFFF00`, both red and green channels are at maximum (255) with zero blue, placing it at 60 degrees on the hue wheel with full saturation and 50% lightness.
In web design, Yellow is primarily used for highlighting, warnings, and drawing attention. It is the standard color for caution messages and appears in text highlights, notification badges, and accent elements. However, Yellow is one of the most difficult colors to use well because of its extreme brightness.
Accessibility is the biggest challenge with Yellow. Against white, it achieves only about 1.1:1 contrast — essentially invisible. Even against light gray backgrounds, Yellow fails all WCAG requirements. Yellow should only be used for text against dark backgrounds, where it can achieve excellent contrast (about 19.6:1 against black).
For web design best practices, consider darker yellows like Gold or `#EAB308` (Tailwind's `yellow-500`) which provide better contrast on light backgrounds while maintaining the yellow identity. Yellow pairs well with black, dark gray, navy, and purple.
FAQ
What is the hex code for Yellow?
The CSS named color Yellow has the hex code #FFFF00. You can use it in CSS as color: #FFFF00; or simply color: Yellow;.
What is Yellow in RGB?
In RGB notation, Yellow is rgb(255, 255, 0). Use it in CSS as color: rgb(255, 255, 0);.
What is Yellow in HSL?
In HSL notation, Yellow is hsl(60, 100%, 50%). Use it in CSS as color: hsl(60, 100%, 50%);.
What color category is Yellow?
Yellow belongs to the Yellow color family in the CSS named colors specification.
Can I use the name "Yellow" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Yellow; or background-color: Yellow; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Yellow to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →