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
#4D7C0F
Lime 700
#A3E635
Lime 400
#ECFCCB
Lime 100
#EAB308
Yellow 500
#CA8A04
Yellow 600
#A16207
Yellow 700
#FACC15
Yellow 400
#FEF9C3
Yellow 100
#D97706
Amber 600
#B45309
Amber 700
#FBBF24
Amber 400
#FEF3C7
Amber 100
#EA580C
Orange 600
#C2410C
Orange 700
#FB923C
Orange 400
#FFEDD5
Orange 100
#D3D5D9
surface neutral 487
#089688
Teal variant
#E9EAED
faint neutral 488
#31D89B
clear emerald 315
#262B36
Charcoal variant
#6E2FDA
clear violet 159
#272B35
Charcoal variant
#DFF4F6
faint cyan 276
#DFF6E3
faint green 360
#DFF6EB
faint emerald 332
#E0F5E5
faint green 348
#DFE8F6
faint blue 220
#DFEFF6
faint sky 248
#E0F2F5
faint cyan 264
#E0F5EC
faint emerald 320
#F5E0E3
faint rose 040
#F5E1E0
faint red 012
#F6DFE0
faint red 024
#F6DFE4
faint rose 052
#626D84
bright neutral 482
#E0E7F5
faint blue 208
#E0EDF5
faint sky 236
#E0F5F4
faint teal 292
#F5E0F3
faint fuchsia 096
#F6DFF5
faint fuchsia 108
#156E8A
solid cyan 280
#158A38
solid green 364
#BABFC9
Silver variant
#D83174
Strong pink variant
#DA2F7F
Strong pink variant
#DFE1F6
faint indigo 192
#F5E0EA
faint pink 068
#F6DFEB
faint pink 080
#F6E9DF
faint orange 472
#086796
solid sky 228
#2FDA90
clear emerald 327
#6C62F8
pale indigo 189
#AE5713
balanced orange 465
#DFF6F3
faint teal 304
#E0E0F5
faint indigo 180
#F14153
Rose variant
#081635
Slate night variant
#158A8A
Teal variant
#363B45
strong neutral 490
#61AE13
Lime green variant
#E6DFF6
faint violet 164
#E8E0F5
faint violet 152
#EEDFF6
faint purple 136
#EFE0F5
faint purple 124
#F5EBE0
faint orange 460
#F6EEDF
faint amber 444
#091D35
Slate night variant
#192743
Charcoal variant
#1A1D23
Slate night variant
#1C50CA
bright blue 202
#353B45
strong neutral 479
#A362F8
pale violet 161
#A5ABB6
pale neutral 485
#090E35
Slate night variant

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.