#FFCC16 Hex Color
Online color picker to view shades, tints, color codes, and complementary colors
This high-energy, saturated yellow demands attention, making it an ideal choice for call-to-action buttons or sale banners. Because it is so intense, use #ffcc16 sparingly as a 10% accent rather than a full background. It pairs exceptionally well with charcoal gray or deep navy, which anchor its brightness and improve legibility. Black text remains highly readable over this shade, ensuring your messaging stays clear.
Questions about #ffcc16
What is #ffcc16 in RGB, HSL and CMYK?
In RGB, #ffcc16 is rgb(255, 204, 22), in HSL hsl(47, 100%, 54%) and in CMYK 0%, 20%, 91%, 0%.
What colors pair well with #ffcc16?
#ffcc16 works best when grounded by dark, neutral tones like charcoal or deep navy. These pairings balance the intensity of the yellow while maintaining high legibility for text and interface elements, preventing the color from feeling overwhelming on the screen.
How should I use #ffcc16 in a design layout?
Because #ffcc16 is an intense, high-energy shade, it functions best as a small, strategic accent rather than a primary background color. Limit its usage to roughly 10% of your design, such as for buttons, notification badges, or important call-to-action elements.
Is #ffcc16 readable on white or black?
#ffcc16 has a 1.51:1 contrast ratio on white and 13.90:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it is too faint for text and on black it works for body text. Try other pairs in the contrast checker.