What Color Is FFAACE?

The hex code #FFAACE produces a vivid light pink. It breaks down into RGB channels of 255 red, 170 green, and 206 blue, placing it firmly in the pink color family. On the HSL model, it sits at 335° on the color wheel with 100% saturation — giving it a vibrant quality — and 83% lightness, making it light. The perceived brightness is 78% (200/255), meaning dark text (#1a1a2e) will provide optimal readability when layered on top.

FFAACE Color Values

FormatValueUsage
HEX#FFAACECSS, HTML, SVG
RGB255, 170, 206Screens, CSS, JavaScript
HSL335°, 100%, 83%CSS, Design tools
CMYK0%, 33%, 19%, 0%Print, packaging
Brightness78% (200/255)Accessibility checks
FamilypinkColor classification
TemperaturewarmDesign psychology

What Does FFAACE Mean in Design?

Pink shades communicate romance, playfulness, compassion, and tenderness. As a light variant with 100% saturation, #FFAACE carries a vibrant energy that makes it suitable for both primary and supporting roles in design systems. In color psychology, pink tones are associated with warmth and approachability, making #FFAACE ideal for brands that need to project friendliness and enthusiasm.

Where to Use FFAACE — Practical Applications

Website hero sections — Use #FFAACE as a full-bleed background with dark text (#1a1a2e) overlay text for immediate visual impact on landing pages.
UI card backgrounds — Apply at 15% opacity (rgba(255, 170, 206, 0.15)) for subtle card surfaces that add depth without overwhelming content.
Button accent color — Set as the primary CTA button color with a darker hover state (#CC88A5) for clear interactive feedback.
Brand identity systems — Anchor a brand palette with #FFAACE as the primary swatch, using #A8FFDB as the complementary accent.
Data visualization — Use in chart legends and graph bars. Pair with #CCFFA8 and #A8CCFF for a triadic scheme that maximizes readability.
Social media templates — Create cohesive Instagram stories and LinkedIn banners using #FFAACE backgrounds with white typography overlays.
Email marketing headers — Apply as the top banner gradient from #FFAACE to #FFBFDA for eye-catching newsletter designs.
Mobile app theming — Set as the navigation bar and status bar color on both iOS and Android for a consistent, branded mobile experience.

FFAACE Color Combinations

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

Similar Colors to FFAACE

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

Tints and Shades of FFAACE

A tint is made by mixing #FFAACE 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.

Lighter 75%: #FFBFDA
Lighter 50%: #FFD4E6
Lighter 25%: #FFEAF3
Base Color: #FFAACE
Darker 20%: #CC88A5
Darker 40%: #99667C
Darker 60%: #664452

How to Use FFAACE in CSS

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

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

/* CSS Custom Property */
:root {
    --color-primary: #FFAACE;
    --color-primary-light: #FFBFDA;
    --color-primary-dark: #CC88A5;
    --color-primary-rgb: 255, 170, 206;
}

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

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

FFAACE in Design Systems

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

Accessibility Considerations for FFAACE

Since #FFAACE is a light color (brightness 78%), use dark text to meet WCAG 2.1 contrast requirements. A foreground of #1a1a2e on a #FFAACE 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 FFAACE

What color is #FFAACE?
#FFAACE is a vivid light pink with RGB(255, 170, 206) and HSL(335°, 100%, 83%). It belongs to the pink family.
What is the RGB value of FFAACE?
RGB(255, 170, 206). Red=255, Green=170, Blue=206. Each channel ranges from 0 to 255.
Is #FFAACE dark or light?
Perceived brightness is 200/255 (78%), classified as light. Use dark text (#1a1a2e) for body text.
What is the CMYK of FFAACE?
CMYK: 0%, 33%, 19%, 0%. Use this for print reproduction of #FFAACE.
What colors go well with #FFAACE?
Complementary: #A8FFDB. Analogous: #FFB0A8 & #FFA8F8. Triadic: #CCFFA8 & #A8CCFF.
How do I use FFAACE in CSS?
color: #FFAACE; for text, background-color: #FFAACE; for backgrounds, border: 2px solid #FFAACE; for borders.
What is the HSL of #FFAACE?
HSL: 335°, 100%, 83%. Hue 335°, saturation 100%, lightness 83%.
Can #FFAACE be used for branding?
Yes. Test in both RGB (screens) and CMYK (print). Pair with #1a1a2e for text. The pink family projects warmth and energy.