Color guide · Warm colors

Amber Color

This library uses #FFBF00 as its amber anchor. It is a selected design reference rather than a standardized CSS keyword. The hue works well for warm highlights, especially when paired with a deep brown or charcoal.

A golden orange inspired by translucent resin#FFBF00Custom library anchor · use the HEX code

Amber color codes

HEX#FFBF00
RGBrgb(255, 191, 0)
HSLhsl(44.9, 100%, 50%)
Library anchor#FFBF00

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes amber interesting?

GIA describes amber as fossilized tree resin, not a mineral crystal. Its transparency, inclusions and range of colors make it a rich material reference. A flat golden swatch captures only a small part of that appearance; a translucent amber illustration needs a darker interior and a bright illuminated edge.

Read the reference: GIA: amber and fossilized resin ↗

Things with amber tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #FFBF00 match.

Illustrated placeholder · image coming later

Resin-inspired shape

A translucent form suggests amber without identifying a geological specimen.

Illustrated placeholder · image coming later

Warm metal highlights

Golden reflections can borrow an amber midtone between a pale highlight and a deep shadow.

Illustrated placeholder · image coming later

Colored glass

Light passing through warm glass offers a practical reference for an amber effect.

Ideas for using amber

01

Interfaces

Use amber for a highlighted note with explanatory text. Reserve a distinct treatment for warnings.

02

Games

Give a resin pendant a pale edge and darker inclusions. Keep the silhouette separate from the background.

03

Illustration

Try amber with brown, ivory and a small teal accent. Use variation in lightness to suggest depth.

Watch out: Do not call amber a CSS keyword or assume the swatch matches all amber materials.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring amber

Sunset Signals

Warm accents above a dark anchor

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

12.70:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare amber with another color →

Questions about amber

Can I write amber directly as a CSS color?

No. Use #FFBF00 for this library anchor; amber is not a standardized CSS named color.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore warm colors →

#FF7F50
Warm colors

Coral

A lively orange with a pink edge

Explore color →
#FFD700
Warm colors

Gold

A clear yellow for highlights and celebration

Explore color →
#FFFFF0
Light & dark neutrals

Ivory

A near-white with a small warm shift

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide