What Color Is 9A5567?
The hex code #9A5567 produces a muted medium pink. It breaks down into RGB channels of 154 red, 85 green, and 103 blue, placing it firmly in the pink color family. On the HSL model, it sits at 344° on the color wheel with 29% saturation — giving it a muted quality — and 47% lightness, making it medium. The perceived brightness is 42% (108/255), meaning light text (#ffffff) will provide optimal readability when layered on top.
9A5567 Color Values
What Does 9A5567 Mean in Design?
Pink shades communicate romance, playfulness, compassion, and tenderness. As a medium variant with 29% saturation, #9A5567 carries a muted 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 #9A5567 ideal for brands that need to project friendliness and enthusiasm.
Where to Use 9A5567 — Practical Applications
#9A5567 as a full-bleed background with light text (#ffffff) overlay text for immediate visual impact on landing pages.rgba(154, 85, 103, 0.15)) for subtle card surfaces that add depth without overwhelming content.#7B4452) for clear interactive feedback.#9A5567 as the primary swatch, using #559B88 as the complementary accent.#689B55 and #55689B for a triadic scheme that maximizes readability.#9A5567 backgrounds with white typography overlays.#9A5567 to #B3808D for eye-catching newsletter designs.9A5567 Color Combinations
These are mathematically calculated color harmonies based on the 344° hue position of #9A5567 on the color wheel. Use them to build balanced, professional palettes.
Similar Colors to 9A5567
Colors visually close to #9A5567 with subtle variations in hue, saturation, or brightness. Useful for creating gradient transitions, hover states, and layered interface designs.
Tints and Shades of 9A5567
A tint is made by mixing #9A5567 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 9A5567 in CSS
Copy-ready CSS code snippets for implementing #9A5567 in your stylesheets. Includes custom properties, gradients, and opacity variants.
.element {
color: #9A5567;
background-color: #9A5567;
border: 2px solid #9A5567;
box-shadow: 0 4px 14px rgba(154, 85, 103, 0.35);
}
/* CSS Custom Property */
:root {
--color-primary: #9A5567;
--color-primary-light: #B3808D;
--color-primary-dark: #7B4452;
--color-primary-rgb: 154, 85, 103;
}
/* Gradient example */
.gradient-bg {
background: linear-gradient(135deg, #9A5567 0%, #9B6555 100%);
}
/* RGBA with opacity */
.overlay {
background: rgba(154, 85, 103, 0.15);
}9A5567 in Design Systems
When integrating #9A5567 into a design system, define it as a semantic token: --color-pink-medium: #9A5567;. For WCAG 2.1 AA compliance, pair it with light text (#ffffff) for body text. The lighter tint #B3808D works for subtle surface fills, while the darker shade #7B4452 is ideal for focus rings and active states. In Figma or Sketch, add it to your shared library as Pink/Medium so the entire team references the single source of truth.
Accessibility Considerations for 9A5567
Since #9A5567 is a dark color (brightness 42%), use light text (#ffffff or #f0f0f0) for readable contrast that meets WCAG 2.1 AA minimum requirements. Always test with tools like the ColorPickerCode contrast checker before shipping to production.
Frequently Asked Questions About 9A5567
What color is #9A5567?
#9A5567 is a muted medium pink with RGB(154, 85, 103) and HSL(344°, 29%, 47%). It belongs to the pink family.What is the RGB value of 9A5567?
Is #9A5567 dark or light?
What is the CMYK of 9A5567?
What colors go well with #9A5567?
How do I use 9A5567 in CSS?
color: #9A5567; for text, background-color: #9A5567; for backgrounds, border: 2px solid #9A5567; for borders.