What Color Is Amber? Web Color Codes and Color Scheme Examples

Amber is a yellowish brown with a reddish undertone, named after fossilized tree resin. On websites, this orange-brown hue can be used for small labels or decorative accents. However, using amber directly as a text color does not always provide enough contrast against the background. This article compares specific color codes and swatches, then shows how to use amber on a product detail page.

Amber is a reddish yellow-brown: compare its HEX and RGB values

The Japanese color reference Wairo Daijiten lists ■#BF783A as one example of kohaku-iro, meaning amber color. Its RGB values are red 191, green 120, and blue 58. RGB represents a screen color through its red, green, and blue light components; HEX expresses those components with a hash sign and six hexadecimal digits. Another color-name reference, I-IRO, lists ■#B07C44 for amber. Because different references can assign slightly different codes to the name, agree on an exact value when producing a website.

The swatches below compare the reference shade with a lighter and a darker option. The outer two are adjusted examples for web design, not additional officially defined traditional color names.

The lighter ■#E7B778 appears more yellow, the reference ■#BF783A combines an orange cast with brown, and the deeper ■#77431E is darker. The code lettering inside each swatch has also been checked against its own background: the light swatch and dark charcoal ■#2D3436 contrast at about 6.91:1, the reference amber and near-black ■#141414 at about 5.23:1, and the dark swatch and white ■#FFFFFF at about 8.06:1.

An amber palette for a glassware product page

Imagine a product page showcasing a small amber-colored glass vase. Let the product photograph remain the main feature and set the wide page background to a warm off-white ■#FAF6EE. Use dark charcoal ■#2D3436 for headings and a dark blue-gray ■#37464A for descriptions. Against the off-white, their contrast ratios are about 11.76:1 and 9.11:1 respectively. There is no need to make all of the written information amber.

• Color-name label: Next to the product photograph, place a small label reading “Amber,” filled with amber ■#BF783A and using near-black ■#141414 lettering. The text-to-label contrast is about 5.23:1, and the label surface contrasts with the surrounding off-white ■#FAF6EE at about 3.27:1. The written label communicates the color name without depending on color alone.
• Specifications card: Display dimensions and materials on a white ■#FFFFFF card. White differs from the surrounding off-white ■#FAF6EE by only about 1.08:1. Where a visible card edge is needed, add a blue-gray ■#687B7D outline, which contrasts with white at about 4.45:1 and with the off-white background at about 4.13:1.
• Purchase button: Use the darker brown variation ■#77431E for the button fill and white ■#FFFFFF lettering. The text-to-button contrast is about 8.06:1, while the button contrasts with the surrounding off-white ■#FAF6EE at about 7.48:1. Darkening this one action color lets the label and button have different visual jobs.

A small supporting panel in pale blue-gray ■#E2EAEB can add a restrained cool note to the warm amber palette and group extra product details. Dark blue-gray ■#37464A text on that panel has about 8.05:1 contrast. The pale panel and surrounding off-white ■#FAF6EE, however, differ by only about 1.13:1, so use headings and spacing where the boundary needs to be apparent.

Check the background before using amber for text

Standard-size amber ■#BF783A text on the off-white ■#FAF6EE page has a contrast ratio of about 3.27:1. White ■#FFFFFF text on an amber ■#BF783A background reaches only about 3.52:1. A contrast ratio measures the difference in relative brightness between two colors, and neither of those pairings reaches the usual minimum for normal text.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally needs at least 4.5:1 contrast, while large text needs 3:1. Treat decorative color swatches and readable copy as different design roles. For controls, check both the text against the button fill and the button surface against nearby colors.

A single HEX color cannot recreate the translucency or reflections of real amber or glass. Use product photography to show the material’s appearance, and use the amber code to keep labels or decorative details consistent.

HueRoll lets you enter and adjust HEX codes, inspect RGB and other values, explore palette suggestions, and compare a selected color with white or black. It does not accept color names directly, compare arbitrary custom color pairs, or automatically determine WCAG compliance. The custom text, background, and border pairings in this example were calculated separately.