Amber color guide
Yellow leaning firmly toward orange, which gives it more depth on screen and a natural 'warning' reading in interfaces.
- Best for
- Caution states and warm CTAs.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with amber
Combinations that hold up in a real layout rather than only on the colour wheel.
Amber color harmonies
Amber shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Amber FAQ
What is the hex code for amber?
Amber is #FFBF00. In other formats that is rgb(255, 191, 0), hsl(45, 100%, 50%), and approximately cmyk(0%, 25%, 100%, 0%) for print.
What colors go with amber?
Charcoal, Navy Blue, Cream all pair well with amber. Caution states and warm CTAs.
Is amber accessible for text?
Not on white: amber reaches only 1.65:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.
Should text on amber be black or white?
Use black text. It gives the higher contrast ratio of the two against #FFBF00.