B05567 Hex Code

What Color Is B05567?

The hex code #B05567 produces a soft medium red. It breaks down into RGB channels of 176 red, 85 green, and 103 blue, placing it firmly in the red color family. On the HSL model, it sits at 348° on the color wheel with 37% saturation — giving it a muted quality — and 51% lightness, making it medium. The perceived brightness is 45% (114/255), meaning light text (#ffffff) will provide optimal readability when layered on top.

B05567 Color Values

What Does B05567 Mean in Design?

Red colors evoke passion, energy, urgency, and emotional intensity. As a medium variant with 37% saturation, #B05567 carries a muted energy that makes it suitable for both primary and supporting roles in design systems. In color psychology, red tones are associated with warmth and approachability, making #B05567 ideal for brands that need to project friendliness and enthusiasm.

Where to Use B05567 — Practical Applications

B05567 Color Combinations

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

Similar Colors to B05567

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

Tints and Shades of B05567

A tint is made by mixing #B05567 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 B05567 in CSS

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

.element {
    color: #B05567;
    background-color: #B05567;
    border: 2px solid #B05567;
    box-shadow: 0 4px 14px rgba(176, 85, 103, 0.35);
}

/* CSS Custom Property */
:root {
    --color-primary: #B05567;
    --color-primary-light: #C4808D;
    --color-primary-dark: #8D4452;
    --color-primary-rgb: 176, 85, 103;
}

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

/* RGBA with opacity */
.overlay {
    background: rgba(176, 85, 103, 0.15);
}

B05567 in Design Systems

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

Accessibility Considerations for B05567

Since #B05567 is a dark color (brightness 45%), 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 B05567