HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable.
- Runs locally
- Category Color & Design
- Best for Moving from a visual idea to reusable color values.
black黑maroon栗darkred深红brown棕dimgray暗灰dimgrey暗灰 (英式)firebrick砖红gray灰grey灰 (英式)red红indianred印度红rosybrown玫瑰棕darkgray深灰darkgrey深灰 (英式)lightcoral浅珊瑚silver银lightgray浅灰lightgrey浅灰 (英式)gainsboro庚斯博罗灰whitesmoke烟白snow雪white白salmon鲑色mistyrose雾玫瑰tomato番茄红darksalmon深鲑色orangered橙红coral珊瑚lightsalmon浅鲑色sienna赭saddlebrown马鞍棕chocolate巧克力seashell海贝sandybrown沙棕peachpuff蜜桃peru秘鲁linen亚麻darkorange深橙bisque陶坯黄tan茶色burlywood硬木色antiquewhite古董白navajowhite纳瓦白blanchedalmond杏仁白papayawhip番木瓜moccasin鹿皮鞋orange橙wheat麦色oldlace旧蕾丝floralwhite花卉白darkgoldenrod深金菊goldenrod金菊黄cornsilk玉米丝白gold金khaki卡其lemonchiffon柠檬绸黄palegoldenrod苍金菊darkkhaki深卡其olive橄榄yellow黄lightgoldenrodyellow浅金菊黄beige米白lightyellow浅黄ivory象牙白olivedrab橄榄褐yellowgreen黄绿darkolivegreen深橄榄绿greenyellow绿黄lawngreen草坪绿chartreuse黄绿darkgreen深绿green绿forestgreen森林绿lime酸橙绿limegreen酸橙绿darkseagreen深海绿lightgreen浅绿palegreen苍绿honeydew蜜瓜白seagreen海绿mediumseagreen中海绿springgreen春绿mintcream薄荷奶油mediumspringgreen中春绿mediumaquamarine中碧绿aquamarine碧绿turquoise绿松石lightseagreen浅海绿mediumturquoise中绿松石darkslategray深岩灰darkslategrey深岩灰 (英式)teal青绿darkcyan深青aqua水绿cyan青paleturquoise苍绿松石lightcyan浅青azure苍白蓝darkturquoise深绿松石cadetblue军服蓝powderblue粉末蓝deepskyblue深天蓝lightblue浅蓝skyblue天蓝lightskyblue浅天蓝steelblue钢蓝aliceblue爱丽丝蓝slategray岩灰slategrey岩灰 (英式)lightslategray浅岩灰lightslategrey浅岩灰 (英式)dodgerblue道奇蓝lightsteelblue浅钢蓝cornflowerblue矢车菊蓝royalblue皇室蓝navy海军蓝darkblue深蓝midnightblue午夜蓝mediumblue中蓝blue蓝lavender薰衣草紫ghostwhite幽灵白darkslateblue深岩蓝slateblue岩蓝mediumslateblue中岩蓝mediumpurple中紫blueviolet蓝紫indigo靛蓝darkorchid深兰花紫darkviolet深紫罗兰mediumorchid中兰花紫purple紫darkmagenta深品红fuchsia紫红magenta品红violet紫罗兰plum梅红thistle蓟紫orchid兰花紫mediumvioletred中紫罗兰红deeppink深粉hotpink亮粉palevioletred苍紫罗兰红lavenderblush薰衣草红crimson深红pink粉lightpink浅粉Contrast Checker
Pick any two colors below — we calculate WCAG AA / AAA pass.
What this tool does
The complete reference for the 147 standardized CSS named colors — the W3C list every browser has supported since IE 4. Each card shows a large true-color swatch, the English keyword (`cornflowerblue`), the Chinese name (矢车菊蓝), and the hex / rgb() / hsl() values, with a one-click copy button for each format. Search by English name, Chinese name, or hex fragment (`#ff` finds every red-rich color). Sort the entire grid by hue (rainbow walk 0°→360°), lightness (whitest → blackest), saturation (vivid → muted), or alphabetical. Filter to warm tones (reds / oranges / yellows / pinks), cool tones (blues / greens), neutrals (greys / off-whites), or the cyan-and-magenta family. The bottom WCAG contrast checker lets you click any two swatches in the grid to compute the WCAG 2.1 ratio and see whether the pair passes AA / AA Large / AAA. 100% client-side, no tracking, no API call, no sign-in.
Tool details
- Input
- Text + Numbers + Structured content
- The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
- Output
- Live result + Copy + Preview
- The result area focuses on usable output, with copy, download, or preview actions when supported.
- Privacy
- Browser-side processing
- The main tool logic does not call an external API, so inputs normally stay in the current tab.
- Save / share
- No account required
- Open the page and use it; whether results survive refresh depends on the tool.
- Performance budget
- Initial JS <= 25 KB
- No WASM budget is declared, keeping the tool quick to open on mobile.
- Best fit
- Color & Design · Developer
- Category and role tags drive related tools, internal links, and quick fit checks.
How to use
-
1. Input
Paste or drop your content into the tool panel.
-
2. Process
Click the button. All processing is local in your browser.
-
3. Copy / Download
Copy the result or download to disk in one click.
How HTML Color Names fits into your work
Use it while choosing, checking, converting, or documenting colors for real interface work.
Color jobs
- Moving from a visual idea to reusable color values.
- Checking contrast and accessibility before a UI ships.
- Keeping brand, design, and implementation color decisions aligned.
Color checks
- Verify contrast against the actual background, not just a sample swatch.
- Check dark and light themes separately when both exist.
- Copy the final format your design system or codebase expects.
Good next steps
These links move the current task into a more complete workflow.
- 1 Color Converter HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only Open
- 2 CSS Gradient Generator Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export. Open
- 3 Color Blindness Simulator Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy. Open
Real-world use cases
Writing a quick error banner without opening the design system
You're patching a backend admin page that has no Tailwind, just a raw stylesheet. You want a soft red warning box now, not a hex hunt. Type "red" in the search, scan the pinkish swatches, and copy `background: mistyrose; border-color: salmon`. Two named colors, zero hex lookup, and the next dev reading the CSS knows exactly what shade you meant.
Checking two swatches pass AA before you commit the colors
A teammate proposes `goldenrod` text on a `cornsilk` card. Looks fine, but you suspect it fails contrast. Click both swatches in the grid and the bottom checker shows 1.6:1 — far under the 4.5:1 AA floor. You swap the text to `saddlebrown` (5.2:1), it passes, and you ship without a follow-up accessibility ticket.
Translating a color name for a bilingual style guide
Your Chinese design doc needs both the English keyword and a natural Chinese label for each accent color. Search `cornflowerblue`, read the paired 矢车菊蓝, and drop both into the doc. The 147 cards each carry a vetted Chinese name, so you skip the guesswork of machine-translating "lightgoldenrodyellow" into something readable.
Picking a printable swatch order for a CSS color cheat sheet
You're building a one-page reference for a workshop. Sort the grid by hue so the 147 colors walk the rainbow 0°→360°, screenshot it, and you have a logically ordered chart instead of an A-to-Z jumble where `darkred` sits 90 cards away from `red`. Re-sort by lightness for a separate greyscale-to-vivid handout.
Common pitfalls
Assuming `gray` and `grey` differ — they don't; `darkgray` and `darkgrey` are the exact same
Trusting that any named pair is readable — `goldenrod` on `cornsilk` is only 1.6:1; always click both swatches in the bottom checker before using one as text on the other.
Reaching for named colors in a design system — they can't express a `red-500`/`red-600` ramp, so use them for demos and error states, not for tokens that need tints and shades.
Privacy
This page is 100% client-side. The 147 colors are a static built-in list, and the search box, sort order, filter tags, and contrast-checker selections are all computed in your browser. Nothing you type or click is sent to a server, logged, or written into the URL by default, and there is no API call, no tracking pixel, and no sign-in.
FAQ
Tool combos
Folks in your role tend to reach for these alongside this tool.
- 555 Timer Calculator Astable f = 1.44/((R1+2R2)C) + monostable t = 1.1RC — pick R1, R2, C in Ω/kΩ and µF/nF, read frequency, duty cycle and pulse width — browser-only
- Add Line Numbers Number every line of pasted text — set start, step and separator, zero-pad to align, skip blanks, or strip numbers back off — browser-only
- AES Text Encryptor Encrypt & decrypt text with a password — AES-256-GCM + PBKDF2 via WebCrypto — 100% in your browser, nothing uploaded
- Affine Cipher Encoder & Decoder Encrypt and decrypt the ax+b affine cipher with live modular-inverse check, browser-only