Color guide

Amber Color

#F59E0B

amber color codes

HEX
#F59E0B
RGB
rgb(245, 158, 11)
HSL
hsl(38, 92%, 50%)
OKLCH
oklch(84% 0.13 111)

What amber means

Amber glows with warmth and cautious energy. It is the color of warnings that still feel friendly.

How to use it in design

Ideal for warnings, ratings (stars) and warm accent lighting effects in UI.

Color combinations with amber

Harmonies calculated with color theory for the base hue 38°.

Complementary

Maximum contrast: #F59E0B + #0A60F5

Open in editor

Analogous

Harmony at ±30°: #F5290A · #F59E0B · #D6F50A

Triadic

Even 120° spacing: #F59E0B · #0AF59F · #9F0AF5

amber color shades (50–900 scale)

Ready-to-use tailwind-style scale generated from #F59E0B.

50 #171005
100 #1D1406
200 #352509
300 #5F410D
400 #9E690F
500 #F59F0A
600 #F0BC61
700 #F2D4A0
800 #F6E6CA
900 #F9F1E2

FAQ about the amber color

What is the HEX code of amber?

A widely used hex value for amber is #F59E0B, which equals rgb(245, 158, 11). Depending on the shade you want, you can adjust saturation and lightness while keeping the same hue (38°).

What colors go well with amber?

amber pairs beautifully with navy, indigo, charcoal, cream. Its complementary color is #0A60F5, and a classic triadic scheme adds #0AF59F and #9F0AF5.

Is amber accessible for text and backgrounds?

It depends on the contrast ratio against the other color. Use NanoPalettes's contrast checker to verify WCAG AA (4.5:1) and AAA (7:1) compliance before shipping amber in text or UI elements.

Create your own amber palette

Generate harmonious combinations from #F59E0B in seconds.

Open the palette generator