What Color Is 36393E?
The hex code #36393E produces a muted dark gray. It breaks down into RGB channels of 54 red, 57 green, and 62 blue, placing it firmly in the gray color family. On the HSL model, it sits at 217° on the color wheel with 7% saturation — giving it a desaturated quality — and 23% lightness, making it dark. The perceived brightness is 22% (57/255), meaning light text (#ffffff) will provide optimal readability when layered on top.
36393E Color Values
What Does 36393E Mean in Design?
Neutral tones represent balance, sophistication, and professionalism. As a dark variant with 7% saturation, #36393E carries a desaturated energy that makes it suitable for both primary and supporting roles in design systems. In color psychology, gray tones are associated with calm and trustworthiness, making #36393E ideal for brands that need to project reliability and serenity.
Where to Use 36393E — Practical Applications
#36393E as a full-bleed background with light text (#ffffff) overlay text for immediate visual impact on landing pages.rgba(54, 57, 62, 0.15)) for subtle card surfaces that add depth without overwhelming content.#2B2E32) for clear interactive feedback.#36393E as the primary swatch, using #3F3C37 as the complementary accent.#3F373A and #3A3F37 for a triadic scheme that maximizes readability.#36393E backgrounds with white typography overlays.#36393E to #686A6E for eye-catching newsletter designs.36393E Color Combinations
These are mathematically calculated color harmonies based on the 217° hue position of #36393E on the color wheel. Use them to build balanced, professional palettes.
Similar Colors to 36393E
Colors visually close to #36393E with subtle variations in hue, saturation, or brightness. Useful for creating gradient transitions, hover states, and layered interface designs.
Tints and Shades of 36393E
A tint is made by mixing #36393E 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 36393E in CSS
Copy-ready CSS code snippets for implementing #36393E in your stylesheets. Includes custom properties, gradients, and opacity variants.
.element {
color: #36393E;
background-color: #36393E;
border: 2px solid #36393E;
box-shadow: 0 4px 14px rgba(54, 57, 62, 0.35);
}
/* CSS Custom Property */
:root {
--color-primary: #36393E;
--color-primary-light: #686A6E;
--color-primary-dark: #2B2E32;
--color-primary-rgb: 54, 57, 62;
}
/* Gradient example */
.gradient-bg {
background: linear-gradient(135deg, #36393E 0%, #38373F 100%);
}
/* RGBA with opacity */
.overlay {
background: rgba(54, 57, 62, 0.15);
}36393E in Design Systems
When integrating #36393E into a design system, define it as a semantic token: --color-gray-dark: #36393E;. For WCAG 2.1 AA compliance, pair it with light text (#ffffff) for body text. The lighter tint #686A6E works for subtle surface fills, while the darker shade #2B2E32 is ideal for focus rings and active states. In Figma or Sketch, add it to your shared library as Gray/Dark so the entire team references the single source of truth.
Accessibility Considerations for 36393E
Since #36393E is a dark color (brightness 22%), 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 36393E
What color is #36393E?
#36393E is a muted dark gray with RGB(54, 57, 62) and HSL(217°, 7%, 23%). It belongs to the gray family.What is the RGB value of 36393E?
Is #36393E dark or light?
What is the CMYK of 36393E?
What colors go well with #36393E?
How do I use 36393E in CSS?
color: #36393E; for text, background-color: #36393E; for backgrounds, border: 2px solid #36393E; for borders.