HEX
#3B82F6Primary tokenDesign System Color Reference
Tailwind Blue 500 Color Code
Tailwind Blue 500·#3B82F6
Blue FamilyCoolMid toneHigh saturationoklch(62.3% 0.188 260)
RGB
rgb(59, 130, 246)Screen valuesHSL
hsl(217 91% 60%)Hue and lightnessCMYK
76, 47, 0, 4Print handoffLAB
56, 18, -64Perceptual referenceOKLCH
oklch(62.3% 0.188 260)Modern perceptualTailwind Blue 500 is the core published blue in the Tailwind CSS palette at #3B82F6. Use it when you need a familiar utility-first product blue for buttons, links, dashboards, and modern web interfaces built around Tailwind conventions.
Best text colorDark text
Body text contrast4.66:1
Best UseUtility-first product UI, modern CTAs, and Tailwind-based systems
Tonal Scale
100#DCE9FD
300#A5C6FB
500#5E99F8
600#3B82F6
800#2A5EB1
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
3.68:1Large text / UI only
Dark text on this color
Large headings and selective UI.
4.66:1Safe for body text
This color on light surface
Links, borders, and icons on light UI.
3.49:1Large text / UI only
Best text colorDark textContrast 4.66:1
Professional Reference
OKLCHoklch(62.3% 0.188 260)
Relative Luminance0.2355
Source TypeDesign System Color
Classification
Blue FamilyCoolMid toneHigh saturation
Source Context
Source Type
Design System Color
System
Tailwind
Step
500
System Role
- Usually the base brand or product token in a design system.
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
3.68:1Large text / UI only
Dark text on this color
Dark text or headings on the current color.
4.66:1AA
This color on light surface
Use this color for links, strokes, or icons on light UI.
3.49:1Large text / UI only
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
4.66:1AA
Best text colorDark textContrast 4.66:1 · AA
Where It Works
- Buttons, links, dashboards, and utility-first accents.
- Core Tailwind blue for modern web UI.
- Pairs with white, slate neutrals, and darker Tailwind blues.
Reference Notes
Last Updated
2026-06-09
Source Library
Tailwind CSS Colors
Methodology
Verified source values + site guidance
Color Notes
Tailwind Blue 500 is sourced from the published Tailwind CSS Colors library and retained here as a searchable reference swatch for product, interface, and branding work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Collections
Design System Palettes
Related Colors
Palette Starting Points
Implementation Snippets
:root {
--color-tailwind-blue-500: #3B82F6;
--color-tailwind-blue-500-rgb: 59 130 246;
}class="bg-[#3B82F6] text-white"
class="hover:bg-[#2A5EB1] ring-1 ring-[#3B82F6]"{
"tailwindBlue-500": "#3B82F6",
"tailwindBlue-500Rgb": [59, 130, 246],
"tailwindBlue-500Hsl": [217, 91, 60]
}