FECEBB Hex Code

What Color Is FECEBB?

The hex code #FECEBB produces a vivid very light orange. It breaks down into RGB channels of 254 red, 206 green, and 187 blue, placing it firmly in the orange color family. On the HSL model, it sits at 17° on the color wheel with 97% saturation — giving it a vibrant quality — and 86% lightness, making it very light. The perceived brightness is 86% (218/255), meaning dark text (#1a1a2e) will provide optimal readability when layered on top.

FECEBB Color Values

What Does FECEBB Mean in Design?

Orange hues suggest creativity, enthusiasm, warmth, and adventure. As a very light variant with 97% saturation, #FECEBB carries a vibrant energy that makes it suitable for both primary and supporting roles in design systems. In color psychology, orange tones are associated with warmth and approachability, making #FECEBB ideal for brands that need to project friendliness and enthusiasm.

Where to Use FECEBB — Practical Applications

FECEBB Color Combinations

These are mathematically calculated color harmonies based on the 17° hue position of #FECEBB on the color wheel. Use them to build balanced, professional palettes.

Similar Colors to FECEBB

Colors visually close to #FECEBB with subtle variations in hue, saturation, or brightness. Useful for creating gradient transitions, hover states, and layered interface designs.

Tints and Shades of FECEBB

A tint is made by mixing #FECEBB with white (increasing lightness), while a shade is made by mixing with black (decreasing lightness). These variations are essential for creating depth, hierarchy, and interactive states in UI design.

How to Use FECEBB in CSS

Copy-ready CSS code snippets for implementing #FECEBB in your stylesheets. Includes custom properties, gradients, and opacity variants.

.element {
    color: #FECEBB;
    background-color: #FECEBB;
    border: 2px solid #FECEBB;
    box-shadow: 0 4px 14px rgba(254, 206, 187, 0.35);
}

/* CSS Custom Property */
:root {
    --color-primary: #FECEBB;
    --color-primary-light: #FEDACC;
    --color-primary-dark: #CBA596;
    --color-primary-rgb: 254, 206, 187;
}

/* Gradient example */
.gradient-bg {
    background: linear-gradient(135deg, #FECEBB 0%, #FEEFB9 100%);
}

/* RGBA with opacity */
.overlay {
    background: rgba(254, 206, 187, 0.15);
}

FECEBB in Design Systems

When integrating #FECEBB into a design system, define it as a semantic token: --color-orange-very-light: #FECEBB;. For WCAG 2.1 AA compliance, pair it with dark text (#1a1a2e) for body text. The lighter tint #FEDACC works for subtle surface fills, while the darker shade #CBA596 is ideal for focus rings and active states. In Figma or Sketch, add it to your shared library as Orange/Very-Light so the entire team references the single source of truth.

Accessibility Considerations for FECEBB

Since #FECEBB is a light color (brightness 86%), use dark text to meet WCAG 2.1 contrast requirements. A foreground of #1a1a2e on a #FECEBB background will pass AA for normal text and AAA for large text. Always test with tools like the ColorPickerCode contrast checker before shipping to production.

Frequently Asked Questions About FECEBB