Apricot Color: HEX Codes and Palette Ideas
Compare apricot HEX values, see practical pairings, and check how this warm pastel behaves in a palette.
The Enduring Charm of Apricot Color
The apricot color is a light, yellowish-orange hue that captures the delicate skin of the apricot fruit. As a "warm pastel," it balances energy and softness. Designers pick apricot when they want a welcoming, cozy feel — without the punch of pure orange.
Apricot is a useful option when a palette needs warmth without the intensity of saturated orange. In a UI, use it for surfaces or small accents and let contrast, spacing, and wording carry the important information.
Design Use Cases
- Wellness and spa branding
- Lifestyle and beauty brands
- Soft UI backgrounds and overlays
- Warm minimalist interiors
The Science of Apricot Color
Classic Apricot: #FBCEB1
Technically, apricot is a desaturated orange with high luminance. On the color wheel it sits between peach and yellow, leaning slightly toward the warm orange side. We recommend sticking to exact apricot hex values for consistency.
Color appearance can vary by display settings, browser rendering, and surrounding colors. Review important palette choices on the devices your audience uses.
Apricot Color Schemes
Starting palettes that pair apricot with low-saturation neutrals, a cool contrast color, or deeper orange-brown tones.
Warm Minimalism
minimalClassic Apricot base with Cream neutrals and Dark Slate Gray depth. Works well for wellness brands, spa platforms, and minimalist interiors that need warmth.
#FBCEB1#F5F5DC#2F4F4F#FFFFFFWellness Aesthetic
wellnessSoft Light Apricot with Sage Green accents and Cream highlights. A natural fit for health brands, organic products, and lifestyle companies.
#FDD5B1#9CAF88#F5F5DC#E6BEA5Botanical Harmony
vibrantRich Deep Apricot with Teal contrast and Light Mint freshness. Packs energy and balance — great for bold digital platforms that lean warm.
#FFB280#008080#F0FFF0#8B4513Apricot Shade Variations
Four essential apricot shades covering the spectrum from soft light to rich warmth.
Light Apricot
LightPerfect for large wall areas or digital backgrounds
Classic Apricot
StandardThe absolute standard apricot color - foundation of warm pastels
Deep Apricot
BoldIdeal for UI interaction buttons and emphasis
Muted Apricot
SoftPerfect for minimalist color palettes
Extended Apricot Spectrum
A comprehensive range of apricot and warm peach shades for nuanced design work:
Apricot Technical Gradients
Apricot gradients for modern UI design — warmth and softness built in.
Soft Warm Fade
Light apricot transitioning to classic apricot
background: linear-gradient(135deg, #FDD5B1 0%, #FBCEB1 100%);Peach to Teal
Warm apricot to cool teal for contrast
background: linear-gradient(135deg, #FBCEB1 0%, #008080 100%);Cream Harmony
Vivid apricot to warm cream
background: linear-gradient(135deg, #FFB280 0%, #FFFDD0 100%);Dried Apricot
Fresh to dried apricot gradient
background: linear-gradient(135deg, #FBCEB1 0%, #C4956A 100%);Best Apricot Color Combinations
Apricot really shines when paired with the right colors:
Sage Green
Forest-inspired, sun-drenched garden feel
Teal
High-contrast pairing that balances warm and cool
Cream
Quiet luxury look for premium branding
Deep Navy
Sharp contrast for elegant designs
The Psychology and Meaning of Apricot Color
Nourishment and Comfort
Apricot is commonly used when a palette needs a warm, low-saturation surface. The final effect depends on the surrounding colors, imagery, typography, and the amount of the color on screen.
Health and Vitality
Fruit-inspired hues can suit food, lifestyle, and wellness projects, but they do not automatically communicate health or trust. Make those messages explicit in the copy and imagery.
Approachability
Apricot can make a neutral system feel less stark. Use it consistently for a defined role, such as an informational surface or a secondary accent, so people can learn the interface.
Soothing Energy
A deeper apricot can add more emphasis than a pale one. Use it sparingly for visual hierarchy and validate the result with the content that will actually appear on the page.
Designing with Apricot Color in UI/UX
Secondary CTAs
Use apricot for buttons that need visibility but shouldn't compete with primary "Red" actions. It makes for a warm, inviting CTA that feels friendly rather than urgent.
Background Textures
A light apricot background can distinguish a reading area from the rest of a layout. Pair it with dark text and test the contrast at body-copy sizes.
Accessibility Considerations
When using apricot, check your color accessibility. Because it has a high LRV (Light Reflectance Value), pair it with dark charcoal or deep navy text to meet WCAG legibility standards.
Wellness Applications
In wellness or meditation products, apricot can be one supporting color among calm neutrals. Avoid using color as the only cue for a state, action, or health-related message.
Historical Significance of Apricot Color
Artistic Legacy
Apricot-like hues appear across art, textiles, food, and interior palettes, but their names and formulas have changed over time. Use a named historical reference only when it is relevant to the project and can be sourced.
Cultural Symbolism
Symbolism varies by region, time, and audience. Research the particular market before making cultural claims in brand or product copy.
Modern Translation
For digital work, the useful decision is practical: define the exact HEX value, assign it a role, and verify how it works with the rest of the interface.
Quick Reference Table
| Name | HEX | RGB | Category |
|---|---|---|---|
| Light Apricot | #FDD5B1 | rgb(253, 213, 177) | Light |
| Classic Apricot | #FBCEB1 | rgb(251, 206, 177) | Standard |
| Deep Apricot | #FFB280 | rgb(255, 178, 128) | Bold |
| Muted Apricot | #E6BEA5 | rgb(230, 190, 165) | Soft |
CSS Apricot Gradient Code
Copy and paste these CSS gradients for professional apricot effects:
Classic Apricot Gradient
background: linear-gradient(
135deg,
#FDD5B1 0%,
#FBCEB1 50%,
#FFB280 100%
);Apricot to Teal Gradient
background: linear-gradient(
135deg,
#FBCEB1 0%,
#008080 100%
);Tailwind CSS Custom Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'apricot-gradient': 'linear-gradient(135deg, #FDD5B1 0%, #FBCEB1 50%, #FFB280 100%)',
}
}
}
}Frequently Asked Questions
What is the HEX code for apricot color?
The standard HEX code for apricot color is #FBCEB1. This light, yellowish-orange hue captures the delicate skin of the apricot fruit.
Is apricot color more pink or orange?
Apricot color is technically a yellowish-orange pastel, though it can appear slightly pinkish depending on the surrounding light and colors. It sits perfectly between peach and yellow on the color wheel.
How can apricot color be used in design?
Apricot can work as a warm background, a supporting accent, or part of a muted palette with cream, sage, teal, or charcoal. Use dark text and check contrast before placing copy on light apricot surfaces.
Create Warm & Welcoming Designs
Use the palette tools to test apricot with your own content, contrast requirements, and interface states.
Explore Our Color Library
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.