Color Picker
Pick colors with EyeDropper, get HEX/RGB/HSL/CMYK/HWB values, explore harmonies and gradients.
FREE ONLINE TOOL
HTML Color Codes Reference
Browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click.
2 worked examples
Methodology and sources included
Ads only on eligible content
Reviewed April 27, 2026
Design
HTML Color Codes Reference is a free, browser-based design tool. Browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click.
Drop an image file here or click to upload
Supports JPG, PNG, WebP, AVIF · browser-based · No upload
What this tool does
- all 140 CSS Level 1–4 named colors
- HEX, RGB, and HSL values for each
- search by color name or hex code
- filter by color family (reds, blues, greens, etc.)
- click any swatch to copy color code
More Design Tools
WCAG Contrast CheckerAdvanced WCAG 2.1 contrast checker with AA/AAA pass/fail badges, color blindness CSS Animation GeneratorVisual keyframe animation builder with live preview. Choose from 10 presets or b Color Name FinderFind the nearest CSS named color for any hex or RGB value — see the top 5 closes Color MixerMix two colors together at any ratio — see the blended result as hex, RGB, and aIn-Depth Guide
Generative tools for design have quietly become as important as manual ones, because they free humans to focus on the creative decisions and leave the combinatorial work to the tool. HTML Color Codes Reference sits in that generative category. Processing is browser-first: data flows through JavaScript in the sandboxed browser runtime and is discarded when you close the page unless a tool explicitly stores local preferences. The interface is intentionally minimal — one or two inputs, one primary action, one result area — so the mental model you build on your first visit still works on your hundredth.
Why This Matters
The visual quality of a product is a product of a hundred small aesthetic decisions executed correctly. HTML Color Codes Reference lowers the cost of executing one of those decisions, which means you can afford to make more of them.
Real-World Case Studies
- Cross-discipline handoff. A content marketer preparing a promotional graphic uses HTML Color Codes Reference to generate the raw element, then finishes the asset in their usual editor. The full round trip is minutes instead of an hour.
- Learning and practice. A frontend developer implementing a design-system token plugs the value into HTML Color Codes Reference and pastes the output directly into the theme file. No back-and-forth with the designer over an intermediate value.
- Mobile-first field use. A product designer exploring a rebrand generates a set of candidate artifacts with HTML Color Codes Reference and drops them into the shared Figma file within the same working hour. The cost of trying another direction has dropped low enough that more directions actually get tried.
Technical Deep Dive
The generator emits standards-compliant CSS, SVG, or HTML that you can drop directly into any modern web project. Calculations happen locally using the browser's numeric routines; there is no rounding beyond what CSS itself specifies for colour and length values. The output is ready for production and needs no post-processing. Accessibility is considered in the default output (contrast ratios in colour generators follow WCAG 2.2 guidance, focus states on interactive examples are preserved, and semantic HTML is used where applicable), but you remain responsible for the larger accessibility context your generated artifact lives in. Performance-wise, the output is small enough that it will not meaningfully affect Core Web Vitals of any reasonable page.
💡 Expert Pro Tip
Pair this tool with the design system's accessibility checker whenever the output touches colour or typography. Generative outputs are aesthetically optimised by default; accessibility requires a deliberate second look.
Methodology, Sources & Accessibility
Methodology
The generator follows the published W3C specifications for each artifact type. Colour outputs use the formulas defined in the CSS Color Module specification. Layout generators emit standard Flexbox or Grid syntax. SVG outputs conform to the SVG 2 specification with fallbacks for older renderers where practical. Accessibility metrics (when surfaced) follow WCAG 2.2 guidance in both the AA and AAA conformance levels.
Authoritative Sources
- CSS Color Module Level 4 — The current W3C specification for colour values and conversions in CSS.
- WCAG 2.2 Contrast — Accessibility contrast requirements colour tools reference.
- SVG 2 Specification — The scalable vector graphics spec used for design artifact generation.
- W3C Web Standards — The World Wide Web Consortium publishes HTML, CSS, DOM, and accessibility specifications that browser-based tools rely on.
- MDN Web Docs — Mozilla's reference documentation for web platform APIs used throughout this tool's implementation.
About This Tool
HTML Color Codes Reference is a free, browser-based utility in the Design category. Browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click. Standard processing runs on the client — no account is required, and there is no paywall or usage cap. The implementation uses audited standard-library primitives and published specifications rather than proprietary algorithms, so the output is reproducible and transparent.
Accessibility
FastTool targets WCAG 2.2 Level AA conformance: keyboard-navigable controls, visible focus states, semantic HTML, sufficient colour contrast, and screen-reader compatibility. If you encounter an accessibility issue, please reach us via the site footer.
Whether you are a beginner or an expert, HTML Color Codes Reference makes it easy to browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click in seconds. Variable fonts, OKLCH color, container queries, and CSS nesting all moved from experimental to mainstream by 2025, dramatically expanding what browser-based design tools can reliably do without plug-ins. From all 140 CSS Level 1–4 named colors to HEX, RGB, and HSL values for each to search by color name or hex code, HTML Color Codes Reference packs the features that matter for web design, graphic design, and creative projects. The tool is designed to handle both simple and complex inputs gracefully. Whether your task takes five seconds or five minutes, HTML Color Codes Reference provides a consistent, reliable experience every time. Your data stays yours. HTML Color Codes Reference performs standard calculations and transformations locally, without requiring a server-based project workspace. Responsive design means HTML Color Codes Reference works equally well on mobile and desktop. You can even add the page to your home screen on iOS or Android for instant, app-like access without downloading anything. Save this page and HTML Color Codes Reference is always ready when you need it — today, tomorrow, and for every future task.
You might also like our CSS Button Generator. Check out our Color Picker. For related tasks, try our Color Shades & Tints Generator.
What HTML Color Codes Reference Offers
- all 140 CSS Level 1–4 named colors — reducing manual effort and helping you focus on what matters
- HEX, RGB, and HSL values for each to handle your specific needs efficiently
- Built-in search to quickly locate specific entries in large datasets
- Filtering options to narrow results based on your criteria
- Color code conversion between HEX, RGB, HSL, and other notation systems
- Completely free to use with no registration, no account, and no usage limits
- Runs in your browser for standard workflows, with no account or upload queue required
- Responsive design that works on desktops, tablets, and mobile phones
Reasons to Use HTML Color Codes Reference
- Uninterrupted workflow — the tool controls remain available without interstitials, forced waits, or layout shifts. Your workflow stays focused from input to result.
- Cross-platform consistency — whether you use Chrome, Firefox, Safari, or Edge on Windows, macOS, Linux, iOS, or Android, HTML Color Codes Reference delivers identical results. You never have to worry about platform-specific differences affecting your output.
- Offline capability — once the page loads, HTML Color Codes Reference works without an internet connection. This makes it useful in situations with limited connectivity — airplanes, remote locations, or metered mobile data plans — where cloud-based alternatives would fail.
- Continuous improvements — HTML Color Codes Reference is part of the FastTool collection, which receives regular updates and new features. Every time you visit, you get the latest version automatically without downloading updates or managing software versions.
Getting Started with HTML Color Codes Reference
- Navigate to the HTML Color Codes Reference page. The tool is ready the moment the page loads.
- Choose your design settings in the designated input area. The all 140 CSS Level 1–4 named colors option can help you format your input correctly. Labels and placeholders show you exactly what is expected.
- Adjust settings as needed. HTML Color Codes Reference offers HEX, RGB, and HSL values for each and search by color name or hex code so you can tailor the output to your exact requirements.
- Press the action button and your result appears immediately. All computation happens in your browser, so there is zero latency.
- Review your result carefully. HTML Color Codes Reference displays the output clearly so you can verify it meets your expectations before using it elsewhere.
- Use the copy button to save your result to the clipboard, or preview, copy, or export the result. The copy feature works with a single click and includes the complete, formatted output.
- Repeat with different inputs as many times as you need — there are no usage limits, no cooldowns, and no session restrictions. HTML Color Codes Reference is always ready for the next task.
Tips from Power Users
- Use HTML Color Codes Reference as a starting point, then fine-tune in your main design application. The speed of browser-based tools makes the exploration phase much faster.
- When presenting to clients, open HTML Color Codes Reference live in the meeting. Generating values on the fly shows confidence and lets clients see changes in real time.
- Build a personal library of frequently used values. Many designers keep a plain text file of their go-to colors, sizes, and ratios alongside tools like this.
Typical Mistakes with HTML Color Codes Reference
- Ignoring dark mode in your workflow. Modern users expect both light and dark themes — test every generated value in both contexts before declaring a design done.
- Forgetting that designs look different across devices. A color or spacing choice that works on a calibrated monitor can fail on an OLED phone or a cheap laptop panel — sample across real hardware.
- Skipping motion accessibility. `prefers-reduced-motion` affects an estimated 35% of users at some point — always provide a non-animated fallback for any animated design.
- Choosing colors by eye alone. Always check your generated palette against WCAG 2.2 contrast requirements (4.5:1 for body, 3:1 for large text) before shipping — accessibility regressions hurt both users and SEO.
- Hard-coding design tokens that should be CSS variables. Pasting raw hex values into dozens of components locks you out of easy theming later — centralize them in a token file from day one.
Try These Examples
Looking up a color code
Input
Color name: DodgerBlue
→
Output
HEX: #1E90FF
RGB: rgb(30, 144, 255)
HSL: hsl(210, 100%, 56%)
DodgerBlue is one of 148 CSS named colors. Named colors are easier to read in code than hex values.
Browsing color families
Input
Family: Blues
→
Output
AliceBlue #F0F8FF, CornflowerBlue #6495ED, DodgerBlue #1E90FF, RoyalBlue #4169E1, Navy #000080
CSS named colors in the blue family range from very light (AliceBlue) to very dark (Navy), covering the full spectrum.
Comparison Overview
| Feature | Browser-Based (FastTool) | Design Suite | Mobile Design App |
|---|---|---|---|
| Cost | Free, no limits | $$$ license or subscription | Free with limitations |
| Privacy | Browser-local standard processing | Local processing | May upload data |
| Installation | None — runs in browser | Large download + install | Browser extension install |
| Speed | Instant for quick tasks | Powerful for complex work | Lightweight but limited |
| Cross-Platform | Works everywhere | OS-specific versions | Browser-dependent |
| Updates | Always latest version | Manual updates needed | Auto-updates |
Situations Where HTML Color Codes Reference Is Not the Right Fit
No tool is perfect for every scenario. Here are situations where a different approach will serve you better:
- When working with advanced typography. Pro-level font features (OpenType ligatures, variable axes, language-specific forms) need a dedicated design application.
- When preparing for print production. Color calibration, bleed, crop marks, and spot colors are print-shop essentials that browser tools typically do not surface.
- When producing final assets for a major brand campaign. HTML Color Codes Reference handles quick iterations well, but the precision controls of Figma, Adobe Illustrator, or Affinity Designer remain essential for production-grade output.
The Essentials of HTML Color Codes Reference
HTML Color Codes Reference helps designers and front-end developers work more efficiently with visual properties. Browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click. Digital design involves constant iteration on visual parameters — colors, spacing, typography, and layout. Having instant access to this functionality eliminates the need to open heavyweight design applications for quick calculations or conversions, keeping you in your creative flow.
The task that HTML Color Codes Reference handles — browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click — is something that designers and creatives encounter regularly in their work. Before tools like this existed, the same task required either specialized desktop software, manual effort, or custom scripts written from scratch. Browser-based tools have changed this landscape by providing instant access to focused functionality without the overhead of software installation, license management, or environment configuration.
Features like all 140 CSS Level 1–4 named colors, HEX, RGB, and HSL values for each demonstrate that browser-based tools have matured to the point where they can handle tasks that previously required dedicated applications. As web technologies continue to advance — with improvements in JavaScript performance, Web Workers for parallel processing, and modern APIs like the Clipboard API and File System Access API — the gap between browser tools and native applications continues to narrow. HTML Color Codes Reference represents this trend: professional-grade functionality delivered through the most universal platform available.
How HTML Color Codes Reference Works
HTML Color Codes Reference uses the browser's rendering engine and Canvas/SVG APIs to deliver visual design capabilities with capabilities including all 140 CSS Level 1–4 named colors, HEX, RGB, and HSL values for each, search by color name or hex code. Color calculations follow the CSS Color Level 4 specification, ensuring consistency between the tool's output and how browsers actually render colors. Gradient computations use linear interpolation in the specified color space. The tool generates valid CSS, HEX, RGB, and HSL values that you can copy directly into your stylesheets without modification.
Things You Might Not Know
The RGB color model used in digital displays was developed based on the three types of cone cells in the human eye: red, green, and blue sensitive.
A typical website visitor forms an aesthetic judgment about a page within 50 milliseconds — before they have time to read a single word.
Essential Terms
- Gradient
- A gradual transition between two or more colors. CSS supports linear gradients (straight line), radial gradients (circular), and conic gradients (around a center point).
- Typography Scale
- A set of harmoniously sized text values used in a design system. Common scales are based on mathematical ratios like the golden ratio (1.618) or the perfect fourth (1.333).
- WCAG (Web Content Accessibility Guidelines)
- An international standard for making web content accessible to people with disabilities. WCAG covers perceivable, operable, understandable, and robust design principles.
- Color Space
- A mathematical model that describes how colors can be represented as numbers. Common color spaces include RGB (Red, Green, Blue), HSL (Hue, Saturation, Lightness), and CMYK (Cyan, Magenta, Yellow, Key/Black).
Got Questions?
How many named colors are in HTML/CSS?
This is a common question about HTML Color Codes Reference. Browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click. The tool features all 140 CSS Level 1–4 named colors, HEX, RGB, and HSL values for each, search by color name or hex code and runs entirely client-side for maximum privacy. It is one of 902 free tools on FastTool, focused on web design, graphic design, and creative projects.
What is the difference between #ff0000 and red in CSS?
Difference between #ff0000 and red in CSS is a key concept in design that HTML Color Codes Reference helps you work with. Browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click. Understanding difference between #ff0000 and red in CSS is important because it affects how you approach this type of task. HTML Color Codes Reference on FastTool lets you explore and apply difference between #ff0000 and red in CSS directly in your browser, with features like all 140 CSS Level 1–4 named colors, HEX, RGB, and HSL values for each, search by color name or hex code — no sign-up or download required.
Check out: Color Picker
What is HTML Color Codes Reference and who is it for?
HTML Color Codes Reference is a browser-based design tool that anyone can use for free. Browse all 140+ HTML named colors with their hex, RGB, and HSL values — search by name or hex, filter by hue family, and copy any color code in one click. It is especially useful for designers and creatives working on web design, graphic design, and creative projects. The tool offers all 140 CSS Level 1–4 named colors, HEX, RGB, and HSL values for each, search by color name or hex code and processes everything locally on your device.
Can I use HTML Color Codes Reference on my phone or tablet?
You can use HTML Color Codes Reference on any device — iPhone, Android, iPad, or desktop computer. The interface automatically adjusts to your screen dimensions, and processing performance is identical across platforms because everything runs in your browser's JavaScript engine. No app download is needed — just open the page in your mobile browser and start using the tool immediately. Your mobile browser's built-in features like copy, paste, and share all work seamlessly with the tool's output.
You might also find useful: CSS Gradient Generator
Does HTML Color Codes Reference work offline?
Once the page finishes loading, HTML Color Codes Reference works without an internet connection. All computation runs locally in your browser using JavaScript, so there are no server requests during normal operation. Feel free to disconnect after the initial load — your workflow will not be affected. Bookmark the page so you can reach it quickly the next time you are online, and the tool will be ready to use again as soon as the page loads.
Why choose HTML Color Codes Reference over other design tools?
Most online design tools either charge money for full access or require account-based server processing, which raises both cost and data-handling concerns. HTML Color Codes Reference avoids those tradeoffs for standard workflows: it is free, browser-first, and delivers instant results. On top of that, it supports 21 languages with full right-to-left layout support, works offline after loading, and runs on any device without requiring an app download or account creation.
Check out: CSS Gradient Generator
What languages does HTML Color Codes Reference support?
HTML Color Codes Reference is available in 21 languages including English, Spanish, French, German, Chinese, Hindi, Arabic, and more. You can switch languages instantly using the language selector at the top of the page, and the entire interface updates without a page reload. Right-to-left languages like Arabic and Urdu are fully supported with proper layout adjustments that mirror the interface direction. Your language preference is saved locally, so it persists across visits.
When to Use HTML Color Codes Reference
Print Design Preparation
Use HTML Color Codes Reference to convert and verify design values when preparing files for print production. Since there are no usage limits, you can repeat this workflow as many times as needed, experimenting with different inputs and settings until you achieve the exact result you want.
Responsive Design Testing
Test how your design values translate across screen sizes by using HTML Color Codes Reference to calculate responsive breakpoints, font scales, and spacing systems. The browser-based approach means you can start immediately without any installation, making it practical for time-sensitive situations where setting up dedicated software is not an option.
Design Handoff to Developers
Use HTML Color Codes Reference to generate precise design specifications and tokens that developers can copy directly into code during the handoff process. This is a scenario where having a reliable, always-available tool in your browser saves meaningful time compared to launching a desktop application or searching for an alternative.
Accessibility Audits
Ensure your designs meet accessibility standards by using HTML Color Codes Reference to check contrast ratios, font sizes, and other WCAG-related parameters. Since there are no usage limits, you can repeat this workflow as many times as needed, experimenting with different inputs and settings until you achieve the exact result you want.
MOST POPULAR
Trending tools on FastTool
The most frequently used tools by our community.
All Design Tools (40)
- 🎨 Color Palette from Image
- ⬜ CSS Border Radius Generator
- ✍️ Font Style Generator
- 🎨 RGB to Hex Converter
- 📐 Aspect Ratio Calculator
- ✨ Favicon Generator
- 🖼️ Placeholder Image Generator
- 🔤 Google Fonts Previewer
- 👁️ Color Blindness Simulator
- 🎨 CSS Gradient Animator
- ✏️ SVG Path Editor
- 🎨 WCAG Contrast Checker
- View all 40 Design tools →
BROWSE BY CATEGORY
Explore all tool categories
Find the right tool for your task across 17 specialized categories.
Featured in FastTool Blog
Articles and guides that reference this tool:
References & Further Reading
Authoritative sources and official specifications that back the information on this page.
- CSS Color Module Level 4 — W3C
Authoritative color specification
- Web colors - Wikipedia — Wikipedia
History of web color codes
- <color> - MDN Web Docs — MDN Web Docs
Reference for color syntax