Yellow-orange

#FFB343

What color is Yellow-orange?

Yellow-orange is a warm, bright color that falls between yellow and orange, leaning toward a golden amber tone, hex #FFB343, close to the color of ripe mango flesh. It has a strong yellow base with enough orange to give it a sun-warmed depth without appearing brown.

What is the meaning of the color Yellow-orange?

Saffron, one of the oldest recorded dyes in the world, produced a color close to yellow-orange and was documented in trade routes through the Middle East and India as early as 1500 BCE. The color became associated with celebration and spiritual life across South and Southeast Asia, where saffron-dyed robes were adopted by Buddhist monks during the reign of Emperor Ashoka in the 3rd century BCE. In the West, the warm golden range of yellow-orange gained commercial footing when Fanta Orange, introduced by Coca-Cola in Germany in 1941, built its global brand identity around this hue.

RGB
255, 179, 67
HSL
36°, 100%, 63%
CMYK
0, 30, 74, 0
HSV
36°, 74%, 100%
Yellow-orange color

What colors go with Yellow-orange?

Colors that pair well with Yellow-orange include:
Deep brown: grounded, earthy contrast
Navy blue: bold complementary balance
Cream: soft, warm harmony
Burgundy: rich, warm depth
Forest green: natural, vivid contrast

Similar Colors

Conversions & Codes

Format Value CSS
HEX #FFB343 color: #FFB343;
RGB 255, 179, 67 color: rgb(255, 179, 67);
RGB Percentage 100%, 70%, 26% color: rgb(100%, 70%, 26%);
CMYK 0%, 30%, 74%, 0% Not supported in CSS
HSL 36°, 100%, 63% color: hsl(36, 100%, 63%);
HSV 36°, 74%, 100% Not supported in CSS
CIE-LAB 50, 15, 37 color: lab(50% 15 37);
Decimal 16757571 Not supported in CSS

Color Variations

Shades

#FFB442
#FFA722
#FF9A02
#E18700
#C17400
#A16000
#814D00
#603A00

Tints

#FFE8C6
#FFE1B4
#FFD9A1
#FFD28E
#FFCA7B
#FFC368
#FFBB55
#FFB442

Tones

#FFB442
#F6B24C
#ECB055
#E3AE5F
#D9AC68
#D0AA71
#C6A87B
#BDA684

Hues

#FFB442
#BDFF42
#42FF55
#42FFE3
#428EFF
#8442FF
#FF42EC
#FF425F

Color Harmonies

Analogous

#FF5542
Click to copy
#FFB343
Click to copy
#ECFF42
Click to copy

Complementary

#FFB343
Click to copy
#428EFF
Click to copy

Split Complementary

#FFB343
Click to copy
#42ECFF
Click to copy
#5542FF
Click to copy

Triadic

#FFB343
Click to copy
#42FFB4
Click to copy
#B442FF
Click to copy

Tetradic

#FFB343
Click to copy
#42FF55
Click to copy
#428EFF
Click to copy
#FF42EC
Click to copy

Square

#FFB343
Click to copy
#42FF55
Click to copy
#428EFF
Click to copy
#FF42EC
Click to copy

CSS & Dev Snippets

CSS
.yellow-orange {
  color: #FFB343;
}
SCSS
$yellow-orange: #FFB343;
RGB
rgb(255, 179, 67)

Accessibility & Contrast

White background

1.78:1
1.78
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

11.78:1
11.78
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags