ColorHexTool
colorhextool.com

Swatch Board (200)

Click a swatch to load details. Search by name or HEX.

Selected
#3B82F6
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Best Text
#000000
Contrast (WCAG)
vs White: 3.68 / vs Black: 5.71
Preview text
Colors
200 swatches • Click to view & copy
Tip: Share a specific color: /colors?hex=FFAA00

Featured color SEO pages

Explore individual HEX reference pages with RGB, HSL, contrast, palettes, tints, shades, and export examples.

#3B82F6
Bright product blue
#22C55E
Success green
#F97316
Energetic orange
#EF4444
Alert red
#A855F7
Creative purple
#0EA5E9
Sky blue
#111827
Deep slate
#F59E0B
Amber warning
#14B8A6
Teal accent
#EC4899
Vivid pink
#FFFFFF
White
#000000
Black
#FF0000
Red
#00FF00
Lime
#0000FF
Blue
#808080
Gray
#C0C0C0
Silver
#800000
Maroon
#008000
Green
#000080
Navy
#FFFF00
Yellow
#00FFFF
Cyan
#FF00FF
Magenta
#FFA500
Orange
#800080
Purple
#FFC0CB
Pink
#A52A2A
Brown
#F5F5F5
Whitesmoke
#FAFAFA
Near white
#F8FAFC
Slate 50
#E5E7EB
Gray 200
#D1D5DB
Gray 300
#9CA3AF
Gray 400
#6B7280
Gray 500
#374151
Gray 700
#1F2937
Gray 800
#0F172A
Slate 900
#334155
Slate 700
#475569
Slate 600
#64748B
Slate 500
#DC2626
Red 600
#B91C1C
Red 700
#FCA5A5
Red 300
#FEE2E2
Red 100
#F43F5E
Rose 500
#E11D48
Rose 600
#BE123C
Rose 700
#FB7185
Rose 400
#FFE4E6
Rose 100
#DB2777
Pink 600
#BE185D
Pink 700
#F472B6
Pink 400
#FCE7F3
Pink 100
#D946EF
Fuchsia 500
#C026D3
Fuchsia 600
#A21CAF
Fuchsia 700
#E879F9
Fuchsia 400
#FAE8FF
Fuchsia 100
#9333EA
Purple 600
#7E22CE
Purple 700
#C084FC
Purple 400
#F3E8FF
Purple 100
#8B5CF6
Violet 500
#7C3AED
Violet 600
#6D28D9
Violet 700
#A78BFA
Violet 400
#EDE9FE
Violet 100
#6366F1
Indigo 500
#4F46E5
Indigo 600
#4338CA
Indigo 700
#818CF8
Indigo 400
#E0E7FF
Indigo 100
#2563EB
Blue 600
#1D4ED8
Blue 700
#60A5FA
Blue 400
#DBEAFE
Blue 100
#0284C7
Sky 600
#0369A1
Sky 700
#38BDF8
Sky 400
#E0F2FE
Sky 100
#06B6D4
Cyan 500
#0891B2
Cyan 600
#0E7490
Cyan 700
#22D3EE
Cyan 400
#CFFAFE
Cyan 100
#0D9488
Teal 600
#0F766E
Teal 700
#2DD4BF
Teal 400
#CCFBF1
Teal 100
#10B981
Emerald 500
#059669
Emerald 600
#047857
Emerald 700
#34D399
Emerald 400
#D1FAE5
Emerald 100
#16A34A
Green 600
#15803D
Green 700
#4ADE80
Green 400
#DCFCE7
Green 100
#84CC16
Lime 500
#65A30D
Lime 600

How to browse the 200-color swatch board

The swatch board is meant for fast exploration when you do not yet know the exact HEX value. Search, compare, and copy colors while keeping contrast details visible beside the grid.

Step 1

Search by color name or HEX fragment to narrow the board to relevant swatches.

Step 2

Click a swatch to load its HEX, RGB, HSL, and contrast information in the selected panel.

Step 3

Leave auto-copy on when you are testing many colors in a design file or code editor.

Step 4

Use the shareable color URL when a teammate needs to review the exact selected swatch.

FAQ

Why include named swatches instead of only a color picker?

A picker is precise, but a curated board helps when you need inspiration or want to scan nearby color families quickly.

What should I do if a color fails contrast?

Open the variations tool from the selected HEX and choose a darker shade or lighter tint that keeps the visual direction but improves readability.

Are these colors tied to one design system?

No. They are general-purpose swatches for web and app work, intended as practical starting points rather than a required palette.

Can I turn a swatch into code tokens?

Yes. Copy the HEX directly or open the export tool with the same HEX value to generate CSS, SCSS, Tailwind, and JSON snippets.