Apricot palettes and pairings
HEX
#FBCEB1
RGB
251, 206, 177
HSL
24°, 90%, 84%
HSV
24°, 29%, 98%
A very light, peach-leaning orange that feels like a wash of sunrise on paper — warm, airy, and easy to use across large areas. #FBCEB1 typically reads as gentle and luminous rather than saturated. It is subtle enough for backgrounds in editorial layouts while still avoiding cold beige.
Best for
Internal tools, team dashboards, and knowledge-base layouts.
Accessibility
Check contrast before using apricot for text-heavy layouts, especially on low-contrast backgrounds.
How does apricot compare to nearby colors?
What is the difference between apricot and caramel?
The visible difference between Apricot (#FBCEB1) and Caramel (#FFD59A) is subtle, but it still nudges the family from peach-wash toward kraft-paper. Apricot and Caramel are close enough to substitute for each other, but they do not create the same supporting cast once typography, photography, and neutrals are added. Start with apricot when the palette wants more peach-wash; switch to caramel when the better fit is kraft-paper.
What color is apricot?
Named for the apricot stone fruit. The color name often signals soft, cosmetic, or nursery-adjacent palettes and is a frequent descriptor in fashion and interior "neutrals with warmth."
What is the hex code for apricot?
| Format | Value |
|---|---|
| HEX | #FBCEB1 |
| RGB | rgb(251, 206, 177) |
| HSL | hsl(24°, 90%, 84%) |
| HSV / HSB | hsv(24°, 29%, 98%) |
| CMYK (approx.) | cmyk(0%, 18%, 29%, 2%) |
Convert Apricot to other color formats
Open the color converter with Apricot (#FBCEB1) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Apricot in the color converter →What does apricot mean in design?
Apricot tends to read as nurturing, quiet optimism, and understated luxury when paired with creams and warm grays. Compared with peach, apricot is often a touch yellower; compared with papaya, it usually carries more visible orange pigment.
How do I use apricot in code?
| CSS (hex) | color: #FBCEB1; |
| CSS (rgb) | color: rgb(251, 206, 177); |
| CSS (hsl) | color: hsl(24, 90%, 84%); |
| RGB % | rgb(98%, 81%, 69%) |
| Tailwind | text-[#FBCEB1] |
| SwiftUI | Color(red: 0.984, green: 0.808, blue: 0.694) |
| UIKit | UIColor(red: 0.984, green: 0.808, blue: 0.694, alpha: 1.0) |
| Android | Color.rgb(251, 206, 177) |
| Compose | Color(0xFFFBCEB1) |
| Web Safe | #FFCC99 |
Is apricot accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.44:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 14.57:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.44:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 14.57:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does apricot look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with apricot
Charcoal gives apricot the dark frame it is missing, so pale surfaces do not drift into a washed-out page.
Navy blue keeps apricot energetic without letting the whole palette slide into campaign-only color.
With a vivid apricot, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
What colors clash with apricot
With apricot, Neon Green pushes the work toward novelty or screen-effect territory faster than most brand or editorial systems can tolerate.
Magenta pushes apricot toward a nightclub or cosmetic register that is hard to square with calmer editorial or product work.
Cyan can make apricot feel more software-default than designed, especially when the rest of the palette is trying to hold onto material nuance.
Light Gray sits too close to apricot in value, so the palette can wash out before it ever establishes a clear hierarchy.
How should I use apricot in design?
- •Apricot works best as a background tint, card fill, or section divider — it adds warmth without competing with foreground content. Pair with dark text for readability.
- •Pair apricot with cool accents (navy, sage, steel blue) for sharp contrast, or keep it with other warm tones (cream, gold, tan) for a cohesive, editorial feel.
- •Light tones like apricot work best for card backgrounds, section tints, and gentle emphasis — they add color without competing with the content.
What are good apricot palettes?
Design with apricot in Moda
Create a presentation or document using apricot as your accent color. Moda's AI applies your color palette automatically.
Create a design with apricot →What are the shades and tints of apricot?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for apricot?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Peach
Peach sits close to apricot on the wheel, but it carries more pigment pressure, which makes it better for faster emphasis and brighter accent work than for broader coverage and quieter supporting roles.
Caramel
Caramel sits close to apricot on the wheel, but it carries more pigment pressure, which makes it better for faster emphasis and brighter accent work than for broader coverage and quieter supporting roles.
Papaya
Papaya is almost the same hue as apricot; the real difference is value, with papaya feeling more open and surface-friendly.
Tangerine
Tangerine is close enough to apricot to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Fawn
Fawn is close enough to apricot to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Frequently asked questions
What is the hex code for apricot?
The hex code for apricot is #FBCEB1. In RGB, that's 251 red, 206 green, and 177 blue. The approximate CMYK equivalent is 0% cyan, 18% magenta, 29% yellow, and 2% key (black).
Is apricot a warm or cool color?
Apricot sits on the warm side of the palette, so it pairs easily with other warm tones and becomes more energetic when you place it against cooler blues or blue-grays.
Should apricot be used as a surface color or an accent?
Apricot belongs more naturally on surfaces than in tiny accent moments. Use it to open space, soften sections, or tint large areas, then let darker colors carry the emphasis.
Where does apricot work best in a layout?
Apricot is very light, so it works best as a background, card fill, or table tint in slides, documents, and landing pages. Pair it with dark text such as charcoal or navy for readability.
Is apricot accessible?
Apricot works better with dark text than white text. Black text reaches 14.57:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More orange colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Orange colors
Compare apricot with other orange tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Red colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.