Pikka Logo Pikka
Chrome App
Soft Warm Pastel Peach-Orange Category: Orange

Apricot (#FBCEB1) — Color Codes, Meaning & UI Palettes

Apricot (#FBCEB1) is a delicate, warm pastel yellowish-orange inspired by the velvety skin of the ripe apricot stone fruit. It represents gentle hospitality, youthful vitality, morning warmth, and comforting cheer.

Quick Answer (Apricot Color Code): The exact HEX code for Apricot is #FBCEB1. In RGB, it is rgb(251, 206, 177). In HSL, it is hsl(24deg, 90%, 84%), and its print CMYK formulation is cmyk(0%, 18%, 29%, 2%). It has a relative luminance of 0.678 and pairs best in UI design with Rich Cocoa (#3E2723) and Pure Vanilla (#FFFDF7).
Click to Copy HEX
Apricot
#FBCEB1
HEX
#FBCEB1
RGB
rgb(251, 206, 177)
HSL
hsl(24deg, 90%, 84%)
CMYK (Print)
cmyk(0%, 18%, 29%, 2%)
Apple Display P3
color(display-p3 0.984 0.808 0.694)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 1.44:1 (Fail)
Black Text (#000000) 14.56:1 (AAA)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#FEF3EC
100
#FDE7D8
200
#FBCFB1
300
#F8B181
400
#F58D47
500
#FBCEB1
600
#F7A168
700
#F37623
800
#C3540A
900
#823807
950
#492004

Color Harmonies & Palette Schemes

Complementary

#B1DEFB
Opposite 180° Contrast

Analogous -30°

#FBB1B9
Natural Harmony

Analogous +30°

#FBF4B1
Natural Harmony

Triadic +120°

#B1FBCF
120° Balanced Triad

Triadic +240°

#CFB1FB
120° Balanced Triad

Curated UI Design Pairings for Apricot

Welcoming background tint for nursery platforms, food and recipe blogs, skincare e-commerce, and friendly onboarding flows.

Rich Cocoa
#3E2723
Warm Legible Typography
Pure Vanilla
#FFFDF7
Cozy Recipe Background
Fresh Mint
#6EE7B7
Vibrant Kitchen Complement
Warm Terracotta
#C2410C
Savory Border Accent

Export Apricot Code Snippets

CSS Variable --color-apricot-color: #FBCEB1;
Tailwind Config 'apricot-color': '#FBCEB1'
Swift / SwiftUI Color(hex: "#FBCEB1")
JSON Design Token {"name": "Apricot", "hex": "#FBCEB1"}

Frequently Asked Questions About Apricot (#FBCEB1)

What is the exact HEX code for Apricot?

The exact HEX code for Apricot is #FBCEB1. In 8-digit hexadecimal (with 100% opacity), it is #FBCEB1FF. Its RGB decimal equivalent is rgb(251, 206, 177) and its HSL value is hsl(24deg, 90%, 84%).

What colors go best with Apricot in UI and web design?

Apricot pairs exceptionally well with Rich Cocoa (#3E2723), Pure Vanilla (#FFFDF7), Fresh Mint (#6EE7B7), and Warm Terracotta (#C2410C).

How do I use Apricot in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #FBCEB1; or background-color: #FBCEB1;. In Tailwind CSS, use arbitrary value syntax like bg-[#fbceb1] or text-[#fbceb1], or define it in your Tailwind v4 @theme block as --color-apricot-color: #FBCEB1;.

Is Apricot WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Apricot achieves a contrast ratio of 1.44:1 (Fail). Against a pure black background (#000000), it achieves 14.56:1 (AAA). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator