Color Name Reference
Browse named colors from CSS/HTML, Material Design, and Tailwind CSS. Click any swatch to copy its hex value. Use the search box to filter by color name or hex code.
FAQ
Q: What are CSS named colors?
A: CSS named colors are 148 predefined color keywords recognized by all modern browsers. Instead of writing a hex code like #FF6347, you can use the name "tomato" directly in your CSS. These names were standardized in the CSS Color Level 4 specification.
Q: What is the difference between hex, RGB, and HSL color formats?
A: Hex uses a six-digit hexadecimal notation (#RRGGBB). RGB specifies red, green, and blue channel values from 0-255. HSL defines colors by hue (0-360), saturation (0-100%), and lightness (0-100%). All three can represent the same colors; they are just different notations.
Q: What are Material Design colors?
A: Material Design colors are a curated palette created by Google for use in Material Design interfaces. Each color family has shades from 50 (lightest) to 900 (darkest), with 500 being the primary shade. They are designed for accessibility and visual harmony.
Q: What are Tailwind CSS colors?
A: Tailwind CSS provides a hand-picked default color palette with 22 color families. Each family includes shades from 50 to 950. The shade 500 is the base color, and the palette is designed to look great in both light and dark UI themes.
Q: How do I choose the right color for my project?
A: Consider contrast ratios for accessibility (WCAG recommends at least 4.5:1 for normal text). Use a primary color for brand identity, a neutral palette for text and backgrounds, and accent colors sparingly for interactive elements. Tools like color contrast checkers can help validate your choices.