Skip to main content

Where Alabaster works best

HEX

#F2F0EB

RGB

242, 240, 235

HSL

43°, 21%, 94%

HSV

43°, 3%, 95%

Fine-grained and softly mineral, alabaster suggests carved stone rather than painted drywall. #EDEADE gives whitespace a sense of craft and permanence. The warmth is gentle — more "aged plaster" than "buttercream."

Best for

Trade show graphics, signage, and booth displays.

Accessibility

Check contrast before using alabaster for text-heavy layouts, especially on low-contrast backgrounds.

Alabaster color swatch — #F2F0EB

How does alabaster compare to nearby colors?

What is the difference between alabaster and platinum?

Alabaster (#F2F0EB) and Platinum (#E5E4E2) are close enough that the split is more about finish than headline contrast: Alabaster feels more paper, plaster, and interface chrome, while Platinum reads more foil warmth. Alabaster and Platinum are close enough to substitute for each other, but they do not create the same supporting cast once typography, photography, and neutrals are added. Begin with alabaster when the family needs its current undertone and surface character; keep platinum for the nearby alternative that shifts the mood without leaving the same hue neighborhood.

What color is alabaster?

Alabaster is a translucent mineral historically carved for sculpture and vessels. As a color name it signals pale, creamy neutrals in luxury packaging and interiors.

What is the hex code for alabaster?

FormatValue
HEX#F2F0EB
RGBrgb(242, 240, 235)
HSLhsl(43°, 21%, 94%)
HSV / HSBhsv(43°, 3%, 95%)
CMYK (approx.)cmyk(0%, 1%, 3%, 5%)

Convert Alabaster to other color formats

Open the color converter with Alabaster (#F2F0EB) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.

Convert Alabaster in the color converter

What does alabaster mean in design?

Alabaster is often associated with refinement, delicacy, and timeless craft. Compared with off-white it tends to read as more stone-like and creamy; next to snow it is usually less pink-tinged.

How do I use alabaster in code?

CSS (hex)color: #F2F0EB;
CSS (rgb)color: rgb(242, 240, 235);
CSS (hsl)color: hsl(43, 21%, 94%);
RGB %rgb(95%, 94%, 92%)
Tailwindtext-[#F2F0EB]
SwiftUIColor(red: 0.949, green: 0.941, blue: 0.922)
UIKitUIColor(red: 0.949, green: 0.941, blue: 0.922, alpha: 1.0)
AndroidColor.rgb(242, 240, 235)
ComposeColor(0xFFF2F0EB)
Web Safe#FFFFFF

Is alabaster accessible?

CombinationRatioAAAA lgAAAAAA lgUI
AaWhite text on this color1.14:1
AaBlack text on this color18.44:1
AaThis color as text on white1.14:1
AaThis color as text on black18.44: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 alabaster look with color blindness?

Normal vision#F2F0EB
Protanopia (red-blind)#F1F1EC
Deuteranopia (green-blind)#F1F1ED
Tritanopia (blue-blind)#F2EDED
Achromatopsia (total color blindness)#F0F0F0

Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.

What colors go with alabaster

#36454F
Charcoal

Because alabaster behaves like a tint, charcoal supplies the typography, dividers, and anchors that make the palette feel finished.

#000080
Navy Blue

Navy blue gives alabaster a cooler structural note, which helps the palette feel intentional rather than merely restrained.

#FFFFFF
White

White is a reliable partner for alabaster when the goal is clarity: it adds separation, preserves brightness, and avoids extra mood-shifting.

#50C878
Emerald

Emerald shifts alabaster away from a purely warm read and makes the combination feel more considered in real layouts.

#800020
Burgundy

Burgundy helps alabaster feel more complete in practice because the pairing combines paper, plaster, and interface chrome qualities with lacquered and formal support instead of leaving the source color to do every job alone.

What colors clash with alabaster

#FF00FF
Magenta

Magenta remaps alabaster too aggressively, dragging it away from inviting editorial surfaces and into a brighter, more performative palette.

#00FFFF
Cyan

With alabaster, cyan introduces a colder display-driven cast that strips away some of the source color's tactile character.

#D3D3D3
Light Gray

Light Gray sits too close to alabaster in value, so the palette can wash out before it ever establishes a clear hierarchy.

#C0C0C0
Silver

Silver sits too close to alabaster in value, so the palette can wash out before it ever establishes a clear hierarchy.

How should I use alabaster in design?

  • Use alabaster as a near-white alternative for backgrounds and paper-like surfaces where you want a hint of color without any visual weight.
  • Cool neutrals like charcoal and slate sharpen alabaster's warm character, while warm companions like cream and gold amplify its inviting quality.
  • Alabaster's lightness makes it a good candidate for email backgrounds, slide canvases, and page sections where you want atmosphere, not distraction.

What are good alabaster palettes?

Morning palette

Trade show graphics, signage, and booth displays.

Sunlit warmth

Startup branding, pitch materials, and product landing pages.

Accent framework

Product launches, promotional banners, and e-commerce storefronts.

Design with alabaster in Moda

Create a presentation or document using alabaster as your accent color. Moda's AI applies your color palette automatically.

Create a design with alabaster

What are the shades and tints of alabaster?

Shades (darker)

Tints (lighter)

Tones (desaturated)

Hue variations

What are the color harmonies for alabaster?

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.

Complementary
Light Blue#ECEEF3Computed
Analogous
Light Yellow#F2F3ECComputedLight Orange#F3EEECComputed
Triadic
Light Cyan#ECF3F1ComputedLight Purple#F1ECF3Computed
Split-complementary
Light Cyan#ECF2F3ComputedLight Blue#EEECF3Computed
Monochromatic
Dark Orange#3E3828ComputedOrange#7B6F51ComputedOrange#AEA284ComputedLight Orange#D7D1C1Computed
Square
Light Green#ECF3EEComputedLight Blue#ECEEF3ComputedLight Purple#F3ECF2Computed

Frequently asked questions

What is the hex code for alabaster?

The hex code for alabaster is #F2F0EB. In RGB, that's 242 red, 240 green, and 235 blue. The approximate CMYK equivalent is 0% cyan, 1% magenta, 3% yellow, and 5% key (black).

Is alabaster a warm or cool color?

Alabaster reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.

Is alabaster better for backgrounds or accents?

Alabaster is usually stronger as a background, card tint, or section surface than as a sharp accent. It works best when darker typography or controls can sit on top and do the hierarchy work.

How should I use alabaster in a design?

Alabaster is light enough that it belongs on surfaces rather than in small text. Use it for backgrounds, soft section breaks, or gentle table shading and keep dark typography on top.

Can I use alabaster for text or backgrounds?

Alabaster works better with dark text than white text. Black text reaches 18.44:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.

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.