Color guide
Blue Color
#3B82F6
blue color codes
What blue means
Blue conveys trust, security and professionalism. It is the most used color in corporate identity and finance apps for a reason: it calms and builds credibility.
How to use it in design
Ideal for primary actions, links and navigation elements. The safest base color for SaaS and productivity products.
Color combinations with blue
Harmonies calculated with color theory for the base hue 217°.
Complementary
Maximum contrast: #3B82F6 + #F6AF3C
Analogous
Harmony at ±30°: #3CE0F6 · #3B82F6 · #523CF6
Triadic
Even 120° spacing: #3B82F6 · #F63C83 · #83F63C
blue color shades (50–900 scale)
Ready-to-use tailwind-style scale generated from #3B82F6.
Colors that go well with blue
FAQ about the blue color
What is the HEX code of blue?
A widely used hex value for blue is #3B82F6, which equals rgb(59, 130, 246). Depending on the shade you want, you can adjust saturation and lightness while keeping the same hue (217°).
What colors go well with blue?
blue pairs beautifully with white, gray, yellow, coral. Its complementary color is #F6AF3C, and a classic triadic scheme adds #F63C83 and #83F63C.
Is blue accessible for text and backgrounds?
It depends on the contrast ratio against the other color. Use NanoPalettes's contrast checker to verify WCAG AA (4.5:1) and AAA (7:1) compliance before shipping blue in text or UI elements.
Create your own blue palette
Generate harmonious combinations from #3B82F6 in seconds.
Open the palette generator