Color Names & HTML (HEX) Codes Chart (Full Shades List)
Choosing the right hue—whether for a website header or a living‑room accent wall—starts with knowing its exact code. This page compiles every official HTML color name and HEX code into a single, scroll‑able chart, complete with live swatches you can click to copy straight into your CSS or design software. No more guesswork, no more hunting through scattered lists.

Beyond pixels, these color chips double as a quick‑reference palette for real‑world projects. Planning a nursery repaint? Curious how Sea Green compares to Mint Cream on your trim? Grab the HEX value here, plug it into any paint‑matching app, and visualize the shade on your next mood board before buying a single gallon. Interior designers and DIYers can treat this chart like a digital fan deck—perfect for coordinating throw pillows with brand colors or testing front‑door paint ideas pulled from your website’s theme.
Scroll down to explore the full chart by shade family, copy codes on the fly, and bookmark the page for your next dev sprint or weekend redecorating session.
If you’d rather experiment visually, try the interactive color-picker grid where you can click any hue and copy its HEX instantly.
Quick‑Copy Master Table of HTML Color Names
Below you’ll find the heart of this page: a full, alphabetized chart of all 140+ HTML/CSS color names, each displayed as an actual swatch so you can judge the hue at a glance. We’ve grouped the list by shade family—reds with reds, blues with blues—so you can jump to the palette you need without endless scrolling. Whether you’re coding a button border or hunting for the perfect accent wall, every color here comes with an instant‑copy HEX value to keep your workflow fast and friction‑free.
How to Use the Table
- Scan or jump — Use your browser’s “find” (⌘/Ctrl + F) or the page jump links in the sidebar (if you enabled them) to go straight to a color family.
- Preview in real time — Each swatch tile is rendered with the exact HEX code, so what you see is precisely what will display in a browser—or on a paint‑matching app.
- Copy on click — Click (or double‑tap on mobile) any HEX cell to copy the code to your clipboard, then paste it into your CSS, Figma file, or color‑matching software.
Tip for home‑improvers: Paste the HEX into a digital paint‑visualizer tool (e.g., Sherwin‑Williams ColorSnap or Behr’s ColorSmart) to see how that web shade translates to real‑world paint before you spend a dime at the hardware store.
Legend — Swatch | Color Name | HTML (HEX) Code
Column | What It Shows | Why It Matters |
---|---|---|
Swatch | A live color tile rendered in your browser. | Lets you eyeball the hue instantly—no need to imagine what “Light Sky Blue” looks like. |
Color Name | The official W3C color keyword (split into readable words). | Valid as a direct CSS value (color: HotPink; ) and handy for design discussions. |
HTML (HEX) Code | A six‑digit hexadecimal value preceded by # . | Universally accepted in CSS, design software, and paint‑matching apps for pinpoint accuracy. |
Scroll on to explore the table and grab the shades that match your brand palette, blog theme, or living‑room mood board.
What Are HTML Color Names?
Origin of the 140 “Web‑Safe” Colors
Back in the dial‑up 1990s, early browsers (think Netscape Navigator) could safely display only 216 colors on 8‑bit monitors without dithering. From that palette, the W3C standardized 140 keyword names—from classic Red
to quirky Papaya Whip
—so designers and coders could reference hues with human‑friendly words instead of numbers. Those names remain valid in every modern browser, which is why you can still write color: HotPink;
today and get the exact same shade your visitors see.
HTML vs. CSS vs. RGB/HSL Codes
While the keywords are convenient, production code usually relies on numeric values for precision and flexibility—especially when you need intermediate tints or alpha transparency.
Pro tip: HEX and RGB are interchangeable; browsers parse them instantly. HSL is designer‑friendly because you can tweak lightness or saturation without recalculating red‑green‑blue channels.
HEX ↔ RGB Conversion
A HEX code is simply the base‑16 shorthand for its RGB triplet (FF
hex = 255 decimal). You can convert either way with a quick calculator or, if you prefer no math, punch the HEX into our HEX‑to‑RGB Converter tool and copy the result. That same value also drops cleanly into most paint‑matching apps, letting you preview a digital hue—say, #3CB371
(Medium Sea Green)—on a kitchen cabinet mock‑up before you break out the rollers.
Color Categories by Shade — Picking Palettes That Pop
A color chart is most useful when you can translate codes into practical pairings. Below you’ll find seven quick‑reference overviews—one for each major hue family—highlighting signature HTML colors, real‑world design moods, and décor ideas. Use these mini‑guides to zero‑in on a palette for your website and to inspire a fresh coat of paint on your next room makeover.
Red & Pink Tones
Key HTML shades: Crimson
, Fire Brick
, Deep Pink
, Light Coral
- Digital vibe: urgency, passion, click‑me call‑to‑actions (CTAs)
- Home‑decor angle: perfect for accent walls, statement doors, or Valentine’s tablescapes. Try pairing
Indian Red
with neutral linen for a cozy reading nook.
Orange & Yellow Tones
Key HTML shades: Tomato
, Dark Orange
, Gold
, Khaki
- Digital vibe: optimism, energy, “Buy Now” buttons, data‑viz highlights
- Home‑decor angle: brighten a small kitchen with
Light Salmon
cabinets or lift a neutral bedroom withPeach Puff
throw pillows.
Green Tones
Key HTML shades: Lime Green
, Sea Green
, Medium Spring Green
, Olive
- Digital vibe: growth, success badges, eco‑friendly branding
- Home‑decor angle:
Pale Green
walls create a spa‑like bathroom;Olive Drab
works on shaker cabinets for that farmhouse look.
Blue & Aqua Tones
Key HTML shades: Dodger Blue
, Deep Sky Blue
, Turquoise
, Midnight Blue
- Digital vibe: trust, security messaging, SaaS dashboards
- Home‑decor angle: pair
Light Sky Blue
with white shiplap for a coastal bedroom, or useNavy
to anchor a moody office accent wall.
Purple Tones
Key HTML shades: Medium Purple
, Indigo
, Lavender
, Fuchsia
- Digital vibe: creativity, luxury, Calls‑to‑share on social banners
- Home‑decor angle:
Amethyst
throw blankets on a gray sofa, orLavender
nursery walls balanced with warm wood tones.
Brown & Earth Tones
Key HTML shades: Peru
, Saddle Brown
, Wheat
, Rosy Brown
- Digital vibe: grounding backgrounds, organic‑brand packaging, coffee‑shop menus
- Home‑decor angle:
Burly Wood
trims for boho interiors orGoldenrod
in rattan accents to warm up white walls.
White & Grey Tones
Key HTML shades: White Smoke
, Gainsboro
, Dim Gray
, Black
- Digital vibe: minimal UI, negative space, dark‑mode toggles
- Home‑decor angle: use
Ghost White
on ceilings to lift a room, or contrastLight Slate Gray
cabinetry with brass hardware for a modern twist.
FAQs About HTML Color Codes
1. How many HTML color names are supported in 2025?
Modern browsers still support the same 147 keyword names formalised by the W3C (often rounded to “140 colors”). From Black to the whimsical Papaya Whip, each renders identically in Chrome, Firefox, Safari and Edge.
2. Why do Fuchsia and Magenta show the exact same shade?
Both keywords are hard‑wired to the identical RGB value #FF00FF
. They were kept as separate names for historical reasons and designer preference, even though they display the same colour.
3. Is using a keyword like Red
slower than #FF0000
?
No. When a browser parses CSS, it converts keywords to their numeric RGB values almost instantly. Performance is identical, so choose the format your team finds most readable.
4. Which spelling is correct in CSS — Gray or Grey?
Only the American spelling Gray (#808080
) is recognised as a valid keyword. Typing Grey results in an undefined colour, causing the browser to fall back to the default text colour. Use Gray in code; use grey in prose only if your style guide requires British English.