Emerald Pine (#0B5345) — Color Codes, Meaning & UI Palettes
Emerald Pine (#0B5345) combines the regal brilliance of deep emerald with the dark, meditative depth of ancient alpine pine needles. It communicates endurance, wealth, bio-sustainability, and quiet prestige.
#0B5345. In RGB, it is rgb(11, 83, 69). In HSL, it is hsl(168deg, 77%, 18%), and its print CMYK formulation is cmyk(87%, 0%, 17%, 67%). It has a relative luminance of 0.067 and pairs best in UI design with Champagne Gold (#F7E7CE) and Pure Alabaster (#FFFDFB).
WCAG 2.1 Accessibility & Contrast Rating
11-Step Tints & Shades Scale (Tailwind 50–950)
Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:
Color Harmonies & Palette Schemes
Complementary
Analogous -30°
Analogous +30°
Triadic +120°
Triadic +240°
Curated UI Design Pairings for Emerald Pine
Authoritative background for eco-luxury, wealth advisory firms, botanical skincare, and high-contrast dark card containers.
Export Emerald Pine Code Snippets
--color-emerald-pine: #0B5345;
'emerald-pine': '#0B5345'
Color(hex: "#0B5345")
{"name": "Emerald Pine", "hex": "#0B5345"}
Frequently Asked Questions About Emerald Pine (#0B5345)
What is the exact HEX code for Emerald Pine?
The exact HEX code for Emerald Pine is #0B5345. In 8-digit hexadecimal (with 100% opacity), it is #0B5345FF. Its RGB decimal equivalent is rgb(11, 83, 69) and its HSL value is hsl(168deg, 77%, 18%).
What colors go best with Emerald Pine in UI and web design?
Emerald Pine pairs exceptionally well with Champagne Gold (#F7E7CE), Pure Alabaster (#FFFDFB), Soft Sage (#9CAF88), and Deep Obsidian (#0A0B0E).
How do I use Emerald Pine in CSS and Tailwind CSS?
In standard CSS, apply it directly via color: #0B5345; or background-color: #0B5345;. In Tailwind CSS, use arbitrary value syntax like bg-[#0b5345] or text-[#0b5345], or define it in your Tailwind v4 @theme block as --color-emerald-pine: #0B5345;.
Is Emerald Pine WCAG accessible for readable text?
Against a pure white background (#FFFFFF), Emerald Pine achieves a contrast ratio of 8.97:1 (AAA). Against a pure black background (#000000), it achieves 2.34:1 (Fail). Check custom contrast pairings on Pikka's WCAG Contrast Checker.
Explore More Colors in the Dictionary
Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.