Essential

HTML Color Codes

Explore 140+ standard HTML named colors, color harmonies, shades, tints, and WCAG contrast ratios.

Base Color for Schemes

#6366F1

On White: 4.47:1Fail AA
On Black: 4.7:1Pass AA
Color Harmony Relationships:
ComplementaryOpposite on the color wheel
#6366F1
#F2EF64
Split-ComplementaryBase + 2 adjacent to opposite
#6366F1
#F2A864
#ADF264
AnalogousAdjacent neighbor colors
#64ADF2
#6366F1
#A864F2
TriadicEquidistant 120° triangle
#6366F1
#F26467
#67F264
Tetradic (Square)4 corners at 90° intervals
#6366F1
#F264AD
#F2EF64
#64F2A8
MonochromaticSingle hue with varying lightness
#0F12AE
#1E21EB
#6366F1
#ABACF8
#E8E8FD
12-Step Tints (Lightened) & Shades (Darkened) Ladder:
#E8E8FD
#B9BAF9
#8A8BF5
#5B5DF1
#2C2FED
#1216D3
#2C2FED
#1216D3
#0E11A4
#0A0C75
#060746
#030426

WCAG Accessibility & Color Blindness Simulator

Test your palette across vision deficiencies and check live UI readability.

Backdrop:
Heading in Simulated Color

This preview card simulates how text, primary action buttons, and secondary badges render to users under normal vision filters.

Secondary Pill
Simulated Contrast: 4.47:1WCAG Status: Fails AA Standard

140 Official HTML Named Colors

Standard CSS named keywords supported natively by all web browsers.

AliceBlue#F0F8FF
AntiqueWhite#FAEBD7
Aqua#00FFFF
Aquamarine#7FFFD4
Azure#F0FFFF
Beige#F5F5DC
Bisque#FFE4C4
Black#000000
BlanchedAlmond#FFEBCD
Blue#0000FF
BlueViolet#8A2BE2
Brown#A52A2A
BurlyWood#DEB887
CadetBlue#5F9EA0
Chartreuse#7FFF00
Chocolate#D2691E
Coral#FF7F50
CornflowerBlue#6495ED
Cornsilk#FFF8DC
Crimson#DC143C
Cyan#00FFFF
DarkBlue#00008B
DarkCyan#008B8B
DarkGoldenrod#B8860B
DarkGray#A9A9A9
DarkGreen#006400
DarkKhaki#BDB76B
DarkMagenta#8B008B
DarkOliveGreen#556B2F
DarkOrange#FF8C00
DarkOrchid#9932CC
DarkRed#8B0000
DarkSalmon#E9967A
DarkSeaGreen#8FBC8F
DarkSlateBlue#483D8B
DarkSlateGray#2F4F4F
DarkTurquoise#00CED1
DarkViolet#9400D3
DeepPink#FF1493
DeepSkyBlue#00BFFF
DimGray#696969
DodgerBlue#1E90FF
FireBrick#B22222
FloralWhite#FFFAF0
ForestGreen#228B22
Fuchsia#FF00FF
Gainsboro#DCDCDC
GhostWhite#F8F8FF
Gold#FFD700
Goldenrod#DAA520
Gray#808080
Green#008000
GreenYellow#ADFF2F
HoneyDew#F0FFF0
HotPink#FF69B4
IndianRed#CD5C5C
Indigo#4B0082
Ivory#FFFFF0
Khaki#F0E68C
Lavender#E6E6FA
LavenderBlush#FFF0F5
LawnGreen#7CFC00
LemonChiffon#FFFACD
LightBlue#ADD8E6
LightCoral#F08080
LightCyan#E0FFFF
LightGray#D3D3D3
LightGreen#90EE90
LightPink#FFB6C1
LightSalmon#FFA07A
LightSeaGreen#20B2AA
LightSkyBlue#87CEFA
LightSlateGray#778899
LightSteelBlue#B0C4DE
LightYellow#FFFFE0
Lime#00FF00
LimeGreen#32CD32
Linen#FAF0E6
Magenta#FF00FF
Maroon#800000
MediumAquamarine#66CDAA
MediumBlue#0000CD
MediumOrchid#BA55D3
MediumPurple#9370DB
MediumSeaGreen#3CB371
MediumSlateBlue#7B68EE
MediumSpringGreen#00FA9A
MediumTurquoise#48D1CC
MediumVioletRed#C71585
MidnightBlue#191970
MintCream#F5FFFA
MistyRose#FFE4E1
Moccasin#FFE4B5
NavajoWhite#FFDEAD
Navy#000080
OldLace#FDF5E6
Olive#808000
OliveDrab#6B8E23
Orange#FFA500
OrangeRed#FF4500
Orchid#DA70D6
PaleGoldenrod#EEE8AA
PaleGreen#98FB98
PaleTurquoise#AFEEEE
PaleVioletRed#DB7093
PapayaWhip#FFEFD5
PeachPuff#FFDAB9
Peru#CD853F
Pink#FFC0CB
Plum#DDA0DD
PowderBlue#B0E0E6
Purple#800080
RebeccaPurple#663399
Red#FF0000
RosyBrown#BC8F8F
RoyalBlue#4169E1
SaddleBrown#8B4513
Salmon#FA8072
SandyBrown#F4A460
SeaGreen#2E8B57
SeaShell#FFF5EE
Sienna#A0522D
Silver#C0C0C0
SkyBlue#87CEEB
SlateBlue#6A5ACD
SlateGray#708090
Snow#FFFAFA
SpringGreen#00FF7F
SteelBlue#4682B4
Tan#D2B48C
Teal#008080
Thistle#D8BFD8
Tomato#FF6347
Turquoise#40E0D0
Violet#EE82EE
Wheat#F5DEB3
White#FFFFFF
WhiteSmoke#F5F5F5
Yellow#FFFF00
YellowGreen#9ACD32

Why Choose Our HTML Color Codes?

Complete directory of all 140 standard CSS/HTML color names

Harmonies generator: Complementary, Analogous, Triadic, Tetradic

Interactive 10-step tint and shade generation ladder

WCAG 2.1 AA/AAA accessibility contrast checker with live rating

How to Use HTML Color Codes in 4 Easy Steps

1

Pick or Search Color

Select a color name or enter any custom HEX code.

2

Explore Harmonies

Review complementary and triadic color schemes.

3

Check Contrast

Verify text readability on white and dark backgrounds.

4

Copy Values

Copy color values in CSS, Tailwind, or JSON format.

Frequently Asked Questions

They are 140 predefined color keywords (e.g., 'Crimson', 'DarkSlateGray') supported by all web browsers.