Light orange is a cheerful and vibrant color that exudes playfulness and optimism. Positioned between yellow and red on the color wheel, this warm and inviting hue encompasses a spectrum of shades, from the softness of peach to the brightness of cantaloupe.

Light orange is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #FFDBBB
- RGB value: 100% red, 85.9% green and 73.3% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
If you're looking to add a touch of light orange to your project, here are some ways to do it:
- Highlight key elements. Use light orange to highlight calls to action, buttons, or important information without overwhelming the user.
- Create warmth and energy. Incorporate light orange in your designs to introduce warmth and a sense of energy, making digital spaces feel more inviting and dynamic.
- Balance with neutrals. Pair light orange with neutral colors to balance its warmth and ensure your design doesn't feel too saturated or intense.
- Use for social apps. Given its association with communication and sociability, light orange is especially effective in designs for social networking apps and platforms emphasizing user interaction.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same soft and warm spectrum as light orange, consider the following:
- Peach (#FFD3AC)) resembles light orange with its blend of pink and yellow tones, offering a slightly softer, creamier look that evokes warmth and comfort.
- Apricot (#FBCEB1) shares light orange's gentle warmth but with a hint more pink, creating a delicate and inviting, equally soothing hue.
- Salmon (#FA8072) introduces a bit more pink, providing a vibrant yet soft alternative bridging the gap between orange and pink tones.
- Champagne (#F7E6CA) is lighter and more neutral, retaining the warmth of light orange while leaning towards a more subdued elegance.
To complement light orange's delicate tones, consider pairing it with:
- Cool gray (#CBCBCB) provides a modern, neutral background that allows the subtlety of light orange to shine, offering a sophisticated and balanced look.
- Teal (#069494) introduces a rich, contrasting color that beautifully complements light orange with depth and vibrancy, enhancing the palette with a touch of elegance.
- Lavender (#E6E6FA) adds a gentle, whimsical contrast, pairing sweetly with light orange for a soft, romantic vibe.
- Olive green (#636B2F) offers an earthy, natural contrast, grounding the lightness of orange with its muted, deep green tones for a balanced, organic feel.
- Navy blue (#000080) provides a classic, deep contrast that elevates light orange's brightness, creating a bold yet harmonious combination ideal for various settings.
Other colors worth considering include cream for a soft, cohesive look, dark chocolate brown for a rich, grounded contrast, and pale yellow for a cheerful, sunny complement.
Light orange may clash with:
- Kelly green (#4CBB17) can be too vibrant, overshadowing the subtlety of light orange and creating a visually jarring effect.
- Blue (#0000FF), with its intensity, might detract from light orange's soft warmth, leading to a stark and unharmonious contrast.
- Neon pink (#FF00FF) offers a bold, vivid contrast that can overwhelm light orange's gentle hue, resulting in a palette that might feel too lively or discordant.
- Dark purple (#800080), though rich and regal, can compete too much with light orange, overshadowing its softness and warmth.
- Bright red (#FF0000) is a complementary color in theory, but its boldness can clash with light orange's muted elegance, creating a potentially overwhelming combination.
Light orange radiates warmth, happiness, and creativity. It retains the positive energy of orange but in a gentler, more approachable way. It can encourage social interaction and a sense of optimism.
In color psychology, people view light orange as revitalizing and uplifting. The gentle warmth of this hue encourages ease and comfort. Its ability to inspire happiness makes it perfect for environments designed for relaxation and enjoyment.
In UI design, light orange is a great choice for creating friendly and welcoming atmospheres. It can highlight important elements and calls to action without being overpowering.
Light orange doesn't have a documented history, but its parent color, orange, is rich. The use of orange hues traces back to ancient civilizations, where natural pigments were derived from minerals and plants to create vibrant shades for artwork and textiles. The 19th century's development of synthetic dyes further expanded the range of orange shades, including lighter tones like light orange.
Light orange gained popularity during the mid-century modern design movement in the 20th century. It was used in everything from furniture to graphic design, embodying the era's optimism and forward-thinking attitude. Light orange has often conveyed a retro yet contemporary aesthetic in recent years.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Neutral Elegance
Peach Skyline
Subtle Blush
Contrast checker
Contrast 1.3
- Large Text
#FFDBBB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 16.1
- Large Text
#FFDBBB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FFDBBB, known as light orange, has RGB values of R:255, G:219, B:187 and CMYK values of C:0, M:0.14, Y:0.27, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | ffdbbb | #ffdbbb |
| RGB DECIMAL | 255, 219, 187 | rgb(255,219,187) |
| RGB PERCENTAGE | 100, 85.9, 73.3 | rgb(100%,85.9%,73.3%) |
| CMYK | 0, 14, 27, 0 | |
| HSL | 28.2°, 100, 86.7 | hsl(28.2,100%,86.7%) |
| HSV (OR HSB) | 28.2°, 26.7, 100 | |
| WEB SAFE | ffcccc | #ffcccc |
| CIE-LAB | 89.633, 7.832, 20.366 | |
| XYZ | 75.54, 75.513, 57.607 | |
| xyY | 0.362, 0.362, 75.513 | |
| CIE-LCH | 89.633, 21.82, 68.966 | |
| CIE-LUV | 89.633, 24.412, 27.689 | |
| HUNTER-LAB | 86.898, 3.098, 21.524 | |
| BINARY | 11111111, 11011011, 10111011 | |
| iOS - SwiftUI | Color(red: 255/255, green: 219/255, blue: 187/255) | |
| iOS - UIKit | UIColor(red: 255/255.0, green: 219/255.0, blue: 187/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFFFDBBB) |


