Colors EncyclopediaUse this color
Create with Amber
Open a professional color tool with #FFBF00 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Amber and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-amber: #FFBF00;
.bg-amber { background-color: #FFBF00; }
.text-amber { color: #FFBF00; }Color history, meaning and use · Editorially reviewed
About Amber Color
Amber is fossilized plant resin, not a single mineral pigment. Its color vocabulary grew from the warm translucent material itself, whose appearance can range beyond the familiar honey-orange reference depending on botanical origin, burial conditions, weathering, and inclusions.
In design, Amber sits between yellow and orange and carries a strong association with transmitted light. That makes it useful for warning states, warm highlights, glass-like interfaces, and autumnal palettes. On screens, however, a flat HEX swatch cannot reproduce the depth, clouding, or internal reflections seen in a physical piece of amber.
This page’s HEX value is a practical digital reference inspired by the material, not a classification standard for natural amber.
WCAG Accessibility
Contrast checks for Amber against black and white text.
Black text12.7:1AA Pass
White text1.65:1AA Fail
Downloadable color reference infographic
Amber Color Reference Infographic
Save a high-resolution infographic of Amber, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.5852
Black text12.7:1AA Pass
White text1.65:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#FFBF00",
"rgb": [
255,
191,
0
],
"hsl": [
45,
100,
50
],
"cmyk": [
0,
25,
100,
0
],
"luminance": 0.5852,
"contrast": {
"black": 12.7,
"white": 1.65
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
}Harmonies
{
"complementary": "#0040FF",
"analogous": [
"#FF4000",
"#BFFF00"
],
"triadic": [
"#00FFBF",
"#BF00FF"
],
"tetradic": [
"#00FF40",
"#0040FF",
"#FF00BF"
],
"splitComplementary": [
"#00BFFF",
"#4000FF"
],
"monochromatic": [
"#FFD65C",
"#FFBF00",
"#A37A00"
]
}Variants
{
"light": "#FFD65C",
"dark": "#A37A00",
"saturated": "#FFBF00",
"desaturated": "#E3B11C",
"pastel": "#F5DA89",
"neon": "#FFC929"
}Pairings
{
"best": [
"#000000",
"#0040FF",
"#FF4000",
"#BFFF00"
],
"avoid": [
"#E3B11C",
"#FFD65C"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFD65C",
"#E3B11C"
]
}Knowledge graph
{
"nearestColors": [
"fluorescent-orange",
"honey",
"industrial-yellow",
"caution-yellow",
"sunflower"
],
"generatedPalettes": [
"amber"
],
"generatedComparisons": [
"amber-vs-fluorescent-orange",
"amber-vs-honey",
"chrome-yellow-vs-amber",
"industrial-yellow-vs-amber",
"sunflower-vs-amber"
],
"relatedFamilies": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/amber",
"/wcag/amber",
"/css/colors/amber",
"/hex/ffbf00",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/amber"
],
"related": [
"/colors/fluorescent-orange",
"/colors/honey",
"/colors/industrial-yellow",
"/colors/caution-yellow",
"/colors/sunflower",
"/compare/amber-vs-fluorescent-orange",
"/compare/amber-vs-honey",
"/compare/chrome-yellow-vs-amber",
"/compare/industrial-yellow-vs-amber",
"/compare/sunflower-vs-amber",
"/harmonies/amber",
"/wcag/amber",
"/css/colors/amber",
"/hex/ffbf00",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "amber",
"name": "Amber",
"hex": "#FFBF00",
"uses": [
"warm accents",
"food branding",
"interior palettes"
],
"psychology": {
"associations": [
"warmth",
"comfort",
"approachability"
],
"contexts": [
"hospitality",
"craft",
"food",
"home decor"
],
"avoidIn": [
"cold technical interfaces"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design and editorial color systems."
},
"family": "yellow",
"temperature": "warm",
"tone": [
"vibrant"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"yellow",
"warm",
"vibrant",
"warm-accents",
"food-branding",
"interior-palettes",
"warmth",
"comfort",
"approachability"
],
"popularity": 84,
"rgb": [
255,
191,
0
],
"hsl": [
45,
100,
50
],
"cmyk": [
0,
25,
100,
0
],
"luminance": 0.5852,
"contrast": {
"black": 12.7,
"white": 1.65
},
"harmonies": {
"complementary": "#0040FF",
"analogous": [
"#FF4000",
"#BFFF00"
],
"triadic": [
"#00FFBF",
"#BF00FF"
],
"tetradic": [
"#00FF40",
"#0040FF",
"#FF00BF"
],
"splitComplementary": [
"#00BFFF",
"#4000FF"
],
"monochromatic": [
"#FFD65C",
"#FFBF00",
"#A37A00"
]
},
"variants": {
"light": "#FFD65C",
"dark": "#A37A00",
"saturated": "#FFBF00",
"desaturated": "#E3B11C",
"pastel": "#F5DA89",
"neon": "#FFC929"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
},
"css": {
"variable": "--color-amber: #FFBF00;",
"utility": ".bg-amber { background-color: #FFBF00; }",
"textUtility": ".text-amber { color: #FFBF00; }"
},
"nearestColors": [
"fluorescent-orange",
"honey",
"industrial-yellow",
"caution-yellow",
"sunflower"
],
"generatedPalettes": [
"amber"
],
"generatedComparisons": [
"amber-vs-fluorescent-orange",
"amber-vs-honey",
"chrome-yellow-vs-amber",
"industrial-yellow-vs-amber",
"sunflower-vs-amber"
],
"relatedFamilies": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/amber",
"/wcag/amber",
"/css/colors/amber",
"/hex/ffbf00",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/amber"
],
"related": [
"/colors/fluorescent-orange",
"/colors/honey",
"/colors/industrial-yellow",
"/colors/caution-yellow",
"/colors/sunflower",
"/compare/amber-vs-fluorescent-orange",
"/compare/amber-vs-honey",
"/compare/chrome-yellow-vs-amber",
"/compare/industrial-yellow-vs-amber",
"/compare/sunflower-vs-amber",
"/harmonies/amber",
"/wcag/amber",
"/css/colors/amber",
"/hex/ffbf00",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#0040FF",
"#FF4000",
"#BFFF00"
],
"avoid": [
"#E3B11C",
"#FFD65C"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFD65C",
"#E3B11C"
]
}
}