What Color Is AFACEB?

The hex code #AFACEB produces a vivid light blue. It breaks down into RGB channels of 175 red, 172 green, and 235 blue, placing it firmly in the blue color family. On the HSL model, it sits at 243° on the color wheel with 61% saturation — giving it a vibrant quality — and 80% lightness, making it light. The perceived brightness is 71% (180/255), meaning dark text (#1a1a2e) will provide optimal readability when layered on top.

AFACEB Color Values

FormatValueUsage
HEX#AFACEBCSS, HTML, SVG
RGB175, 172, 235Screens, CSS, JavaScript
HSL243°, 61%, 80%CSS, Design tools
CMYK26%, 27%, 0%, 8%Print, packaging
Brightness71% (180/255)Accessibility checks
FamilyblueColor classification
TemperaturecoolDesign psychology

What Does AFACEB Mean in Design?

Blue shades inspire trust, depth, stability, and professional confidence. As a light variant with 61% saturation, #AFACEB carries a vibrant energy that makes it suitable for both primary and supporting roles in design systems. In color psychology, blue tones are associated with calm and trustworthiness, making #AFACEB ideal for brands that need to project reliability and serenity.

Where to Use AFACEB — Practical Applications

Website hero sections — Use #AFACEB 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(175, 172, 235, 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 (#8C8ABC) for clear interactive feedback.
Brand identity systems — Anchor a brand palette with #AFACEB as the primary swatch, using #E8EBAD as the complementary accent.
Data visualization — Use in chart legends and graph bars. Pair with #EBB0AD and #ADEBB0 for a triadic scheme that maximizes readability.
Social media templates — Create cohesive Instagram stories and LinkedIn banners using #AFACEB backgrounds with white typography overlays.
Email marketing headers — Apply as the top banner gradient from #AFACEB to #C3C1F0 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.

AFACEB Color Combinations

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

Similar Colors to AFACEB

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

Tints and Shades of AFACEB

A tint is made by mixing #AFACEB 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%: #C3C1F0
Lighter 50%: #D7D6F5
Lighter 25%: #EBEAFA
Base Color: #AFACEB
Darker 20%: #8C8ABC
Darker 40%: #69678D
Darker 60%: #46455E

How to Use AFACEB in CSS

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

.element {
    color: #AFACEB;
    background-color: #AFACEB;
    border: 2px solid #AFACEB;
    box-shadow: 0 4px 14px rgba(175, 172, 235, 0.35);
}

/* CSS Custom Property */
:root {
    --color-primary: #AFACEB;
    --color-primary-light: #C3C1F0;
    --color-primary-dark: #8C8ABC;
    --color-primary-rgb: 175, 172, 235;
}

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

/* RGBA with opacity */
.overlay {
    background: rgba(175, 172, 235, 0.15);
}

AFACEB in Design Systems

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

Accessibility Considerations for AFACEB

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

What color is #AFACEB?
#AFACEB is a vivid light blue with RGB(175, 172, 235) and HSL(243°, 61%, 80%). It belongs to the blue family.
What is the RGB value of AFACEB?
RGB(175, 172, 235). Red=175, Green=172, Blue=235. Each channel ranges from 0 to 255.
Is #AFACEB dark or light?
Perceived brightness is 180/255 (71%), classified as light. Use dark text (#1a1a2e) for body text.
What is the CMYK of AFACEB?
CMYK: 26%, 27%, 0%, 8%. Use this for print reproduction of #AFACEB.
What colors go well with #AFACEB?
Complementary: #E8EBAD. Analogous: #CFADEB & #ADC9EB. Triadic: #EBB0AD & #ADEBB0.
How do I use AFACEB in CSS?
color: #AFACEB; for text, background-color: #AFACEB; for backgrounds, border: 2px solid #AFACEB; for borders.
What is the HSL of #AFACEB?
HSL: 243°, 61%, 80%. Hue 243°, saturation 61%, lightness 80%.
Can #AFACEB be used for branding?
Yes. Test in both RGB (screens) and CMYK (print). Pair with #1a1a2e for text. The blue family projects trust and calm.