HEX
#2563EBPrimary tokenDesign System Color Reference
Tailwind Blue 600 Color Code
Tailwind Blue 600·#2563EB
Blue FamilyCoolMid toneHigh saturationoklch(54.6% 0.215 263)
RGB
rgb(37, 99, 235)Screen valuesHSL
hsl(221 83% 53%)Hue and lightnessCMYK
84, 58, 0, 8Print handoffLAB
46, 31, -74Perceptual referenceOKLCH
oklch(54.6% 0.215 263)Modern perceptualTailwind Blue 600 is a darker published step in the Tailwind CSS blue palette at #2563EB. Use it when you want a more forceful Tailwind blue for CTAs, sticky navigation, active states, and interfaces that need more weight than Blue 500.
Best text colorWhite text
Body text contrast5.17:1
Best UseStronger utility-first CTAs, navigation, and production app states
Tonal Scale
100#D8E3FB
300#9BB7F6
500#4C7FEF
600#2563EB
800#1B47A9
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
5.17:1Safe for body text
Dark text on this color
Large headings and selective UI.
3.32:1Large text / UI only
This color on light surface
Links, borders, and icons on light UI.
4.91:1Safe for body text
Best text colorWhite textContrast 5.17:1
Professional Reference
OKLCHoklch(54.6% 0.215 263)
Relative Luminance0.1532
Source TypeDesign System Color
Classification
Blue FamilyCoolMid toneHigh saturation
Source Context
Source Type
Design System Color
System
Tailwind
Step
600
System Role
- Often used for stronger actions, active states, and hover emphasis.
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
5.17:1AA
Dark text on this color
Dark text or headings on the current color.
3.32:1Large text / UI only
This color on light surface
Use this color for links, strokes, or icons on light UI.
4.91:1AA
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
3.32:1Large text / UI only
Best text colorWhite textContrast 5.17:1 · AA
Where It Works
- CTAs, navigation, and stronger active states.
- Darker Tailwind core blue for more weight.
- Pairs with white, slate neutrals, and lighter Tailwind blues.
Reference Notes
Last Updated
2026-06-09
Source Library
Tailwind CSS Colors
Methodology
Verified source values + site guidance
Color Notes
Tailwind Blue 600 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-600: #2563EB;
--color-tailwind-blue-600-rgb: 37 99 235;
}class="bg-[#2563EB] text-white"
class="hover:bg-[#1B47A9] ring-1 ring-[#2563EB]"{
"tailwindBlue-600": "#2563EB",
"tailwindBlue-600Rgb": [37, 99, 235],
"tailwindBlue-600Hsl": [221, 83, 53]
}